twbsPagination.js ページングプラグインの使用状況の共有-jsチュートリアル-php.cn

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

小云云

リリース： 2018-01-04 13:14:35

オリジナル

1729 人が閲覧しました

この記事では主に、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. ページングプラグインは基本的に上記のコードを使用してすべての要件を満たします。