前端分页插件bootstrapPaginator的使用 _Bootstrap

沉舟侧畔千帆进，病树前头万木春。这篇文章主要讲述前端分页插件bootstrapPaginator的使用相关的知识，希望能为你提供帮助。

< 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的使用】