twbsPagination.js ページング プラグインの使用方法の詳細な紹介

以前は、このプロジェクトにはページング プラグインが必要でした。以前は、単に pagenation.js というプラグインが使用されていましたが、この統合中に、プロジェクト チームの子供がこのプラグインを使用し、オンラインに基づいて検討しました。例。実際、一般的なプロセスは同じです。主に、このページング プラグインの使用に関する私の経験の一部を共有します。

1. ページング プラグインを HTML に導入するには、次のものが必要です:

bootstrap.css

ページングプラグインjs

自分で書いたページネーションスタイルCSS [そうでない場合は、bootstrapが提供するページングCSSを直接​​使用することもできます。 】

jqueryを使用すると、jquery.js

htmlに導入できます:

1 <script type="text/javascript" src="<c:url value="../js/jquery.twbsPagination.js"/>"></script>
2 <link rel="stylesheet" href="<c:url value="/content/common/css/bootstrap.min.css"/>" />
3 <link rel="stylesheet" href="<c:url value="/content/common/css/pagination.css"/>" />

2. ページングプラグインを使用する場合:

特別なページ変換メソッドを定義して、

htmlに導入できます:

In

1 d6d83bae1d2573fa720c2addb240262f
2 929d1f5ca49e04fdcb27f9465b944689

js:

managementPage:function (pagesize) {
    var obj = $('#managePagination').twbsPagination({
        totalPages: pagesize,//总页数
        startPage: 1,//起始页
        visiblePages: pagesize>5?5:pagesize,//展示页数，超出5页展示5页，未超出时展示总页数
        initiateStartPageClick: true,
        hideOnlyOnePage: true,//只有一页时不展示分页
        onPageClick:function (event,page) {//点击页面事件，回调函数，只能使用ajax异步加载，暂时未发现能够直接在前端操作data的方法。
            $(this).addClass("active").siblings().removeClass("active");

            var start = (page - 1)*5+1;
            var end = page*5+1;
            var param = {
                'start':start,
                'end':end
            };
            ds.manageSystem(manageSystemUrl,param);//异步加载的方法，主要需要将起始页与结束页带回后台
        }
    });
    obj.data();//加载分页样式
},

3, 注: ページング プラグインを使用する場合、ページング メソッドを初めて実行した後、ページ内に他の非同期で読み込まれたデータがある場合、ページ上のページング スタイルは、ページング内のデータとは異なります。このデータは、非同期読み込みでページにデータを再入力し、新しいデータに引き続きページングを実装する必要があります。次のコードを引用する必要があります:

1 //页面重载时置空分页数据（属于分页插件）
2 $('#managePagination').empty();
3 $('#managePagination').removeData("twbs-pagination");
4 $('#managePagination').unbind('page');

このコードが配置される場所も特殊です。非同期でロードされるデータの前に、この時点でページング プラグインが一度にクリアされます。再度ロードされたページング データが新しいデータ コンテンツです。

4. ページング プラグインは基本的に上記のコードを使用してすべての要件を満たします。

以上がtwbsPagination.js ページング プラグインの使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。