twbsPagination.js ページング プラグインの使用状況の共有

この記事では主に、twbsPagination.js ページング プラグインの使用に基づいたエクスペリエンス (共有) をお届けします。編集者はこれが非常に良いものだと思ったので、皆さんの参考として今から共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

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

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

bootstrap.css

ページングプラグインjs

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

jqueryを使用すると、jquery.jsに導入できます

html:

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

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

特別なページ変換メソッドを定義できます。以下を使用して導入します。

HTML の場合:

<ul id="pagination" class="pagination">
</ul>

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. 注: ページング プラグインを使用する場合は、注意してください。ページ内に他の非同期で読み込まれたデータがある場合は、ページング メソッドを初めて実行すると、ページ上のページング スタイルとページング内のデータが最初のデータになります。新しいデータにページングを引き続き実装したい場合は、次のコードを引用する必要があります:

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

このコードを配置する場所も、データの前に配置する必要があります。非同期でロードされるデータは、最初にページング プラグインをクリアします。この時点で、再度ロードされるページング データは新しいデータになります。

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

関連する推奨事項:

jQuery Pagination ページング プラグインの詳細説明

bootstrap paginator ページング プラグインの 2 つの使用方法の説明

jq ページング プラグインを共有する

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