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

黄舟
リリース: 2017-10-21 10:16:43
オリジナル
3482 人が閲覧しました

以前は、このプロジェクトにはページング プラグインが必要でした。以前は、単に 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 <ul id="pagination" class="pagination">
2 </ul>
ログイン後にコピー

js:

managementPage:function (pagesize) {
    var obj = $(&#39;#managePagination&#39;).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 = {
                &#39;start&#39;:start,
                &#39;end&#39;:end
            };
            ds.manageSystem(manageSystemUrl,param);//异步加载的方法,主要需要将起始页与结束页带回后台
        }
    });
    obj.data();//加载分页样式
},
ログイン後にコピー

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

1 //页面重载时置空分页数据(属于分页插件)
2 $(&#39;#managePagination&#39;).empty();
3 $(&#39;#managePagination&#39;).removeData("twbs-pagination");
4 $(&#39;#managePagination&#39;).unbind(&#39;page&#39;);
ログイン後にコピー
このコードが配置される場所も特殊です。非同期でロードされるデータの前に、この時点でページング プラグインが一度にクリアされます。再度ロードされたページング データが新しいデータ コンテンツです。

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

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート