以前は、このプロジェクトにはページング プラグインが必要でした。以前は、単に 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に導入できます:
1 <ul id="pagination" class="pagination"> 2 </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, 注: ページング プラグインを使用する場合、ページング メソッドを初めて実行した後、ページ内に他の非同期で読み込まれたデータがある場合、ページ上のページング スタイルは、ページング内のデータとは異なります。このデータは、非同期読み込みでページにデータを再入力し、新しいデータに引き続きページングを実装する必要があります。次のコードを引用する必要があります:
1 //页面重载时置空分页数据(属于分页插件) 2 $('#managePagination').empty(); 3 $('#managePagination').removeData("twbs-pagination"); 4 $('#managePagination').unbind('page');
以上がtwbsPagination.js ページング プラグインの使用方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。