前端分頁插件bootstrapPaginator的使用
阿新 • • 發佈:2018-04-24
hang tex name total head each ldp striped ole
<table class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="sample_2_info"> <thead> <tr role="row"> <th tabindex="0" aria-label=""> **</th> <th tabindex="0" aria-label=""> ** </th> <th tabindex="0" aria-label=""> **</th> <th tabindex="0" aria-label=""> ** </th> <th tabindex="0" aria-label=""> **</th> <th tabindex="0" aria-label=""> ** </th> <th tabindex="0" aria-label=""> ** </th> <th tabindex="0" aria-label=""> ** </th> </tr> </thead> <tbody id="tableBody"></tbody> </table> <div class="paging-toolbar"> <ul id="grid_paging_part"></ul> </div>
<script> $(function () { loadTables(1, 10); }); function loadTables(startPage, pageSize) { $("#tableBody").html(""); $.ajax({ type: "GET", url: "/Transaction/GetRecordList?startPage=" + startPage + "&pageSize=" + pageSize, success: function (data) { $.each(data.rows, function (i, item) { var tr = "<tr>"; tr += "<td>" + item.orderId + "</td>"; tr += "<td>" + item.appName + "</td>"; tr += "<td>" + item.realName + "</td>"; tr += "<td>" + item.accountTypeName + "</td>"; tr += "<td>" + item.transAmount + "</td>"; tr += "<td>" + item.transTime.replace("T", " ") + "</td>"; if (item.transType == ‘1‘) { tr += "<td>**</td>"; } if (item.transType == ‘2‘) { tr += "<td>**</td>"; } if (item.flag == ‘0‘) { tr += "<td>**</td>"; } else { tr += "<td>**</td>"; } tr += "</tr>"; $("#tableBody").append(tr); }) var elment = $("#grid_paging_part"); //分頁插件的容器id if (data.rowCount > 0) { var options = { //分頁插件配置項 bootstrapMajorVersion: 3, currentPage: startPage, //當前頁 numberOfPages: data.rowsCount, //總數 totalPages: data.pageCount, //總頁數 shouldShowPage: function (type, page, current) { var result = !0; switch (type) { case "first": result = 1 !== current; break; case "prev": result = 1 !== current; break; case "next": result = current !== this.totalPages; break; case "last": result = current !== this.totalPages; break; case "page": result = !0 } return result }, itemTexts: function (type, page, current) {//設置顯示的樣式,默認是箭頭 switch (type) { case "first": return "首頁"; case "prev": return "上一頁"; case "next": return "下一頁"; case "last": return "末頁"; case "page": return page; } }, onPageChanged: function (event, oldPage, newPage) { //頁面切換事件 loadTables(newPage, pageSize); } } elment.bootstrapPaginator(options); //分頁插件初始化 } } }) }; </script>
前端分頁插件bootstrapPaginator的使用