html+vue编写分页功能

效果：

html关键代码：

<div class="ui-jqgrid-resize-mark" id="rs_mlist_table_C87E35BE">&nbsp;</div><div class="list_component_pager ui-jqgrid-pager undefined" dir="ltr"><div id="pg_list_table_C87E35BE_pager" class="ui-pager-control" role="group"><table class="ui-pg-table ui-common-table ui-pager-table table table-sm"><tbody><tr><td id="list_table_C87E35BE_pager_left" align="left"></td><td id="list_table_C87E35BE_pager_center" align="center"style="white-space: pre; width: 370.844px;"><table class="ui-pg-table ui-common-table ui-paging-pager"><tbody><tr><td ng-show="pageNum<=1" class="ui-pg-button undefined ui-disabled"title="第一页"><span class="bi bi-chevron-bar-left"></span></td><td ng-show="pageNum>1" class="ui-pg-button undefined" title="第一页"ng-click='ctrl.firstPage()'><span class="bi bi-chevron-bar-left"></span></td><td ng-show="pageNum<=1" class="ui-pg-button undefined ui-disabled"title="上一页"><span class="bi bi-chevron-left"></span></td><td ng-show="pageNum>1" class="ui-pg-button undefined" title="上一页"ng-click='ctrl.upperPage()'><span class="bi bi-chevron-left"></span></td><td class="ui-pg-button ui-disabled" style="cursor: default;"><span class="ui-separator"></span></td><td id="input_list_table_C87E35BE_pager" dir="ltr"><input class="ui-pg-input undefined" type="text" size="2" maxlength="7"ng-model="pageNum" role="textbox"> 　共<span id="sp_1_list_table_C87E35BE_pager">{{totalPages}}</span>页</td><td class="ui-pg-button ui-disabled" style="cursor: default;"><span class="ui-separator"></span></td><td ng-show="totalPages==pageNum"class="ui-pg-button undefined ui-disabled"title="下一页"style="cursor: default;"><span class="bi bi-chevron-right"></span></td><td ng-show="pageNum>=1&&totalPages>1&&pageNum!=totalPages"class="ui-pg-button undefined"title="下一页"ng-click='ctrl.nextPage()'style="cursor: default;"><span class="bi bi-chevron-right"></span></td><td ng-show="pageNum<totalPages"class="ui-pg-button undefined" title="最后一页"ng-click='ctrl.lastPage()'><span class="bi bi-chevron-bar-right"></span></td><td ng-show="pageNum>=totalPages"class="ui-pg-button undefined ui-disabled"title="最后一页"><span class="bi bi-chevron-bar-right"></span></td><td style="margin-top: 20px;"><cb-select style="border: 1px solid #f0f0f0;margin-top: 20px;"ng-model="statType" options="statTypeOptions"ng-change='ctrl.flippingPage()'inline="true" title="每页记录数"></cb-select><!--                                            <select class="ui-pg-selbox undefined" size="1" role="listbox"--><!--                                                    title="每页记录数">--><!--                                                <option role="option" value="15" selected="selected">15</option>--><!--                                                <option role="option" value="50">50</option>--><!--                                                <option role="option" value="100">100</option>--><!--                                            </select>--></td></tr></tbody></table></td><td id="list_table_C87E35BE_pager_right" align="right"><div dir="ltr" style="text-align:right" class="ui-paging-info">{{test1}}-{{test2}} 　共{{count}} 条</div></td></tr></tbody></table></div></div>

vue代码：

$scope.statTypeOptions = [{id: '1', name: '15'}, {id: '2', name: '50'}, {id: '3', name: '100'}];
$scope.statType = $scope.statTypeOptions[0];
$scope.count = '';//总数
$scope.test1 = '';//开始页数
$scope.test2 = '';//结束页数
$scope.totalPages = '';//总页数
$scope.pageNum = '';//页码
$scope.pageSize = '';//每页数
$scope.lastSize = '';//最后一页

                initialize: function () {ctrl.initData();},initData: function () {ctrl.getList(ctrl.filter.keyword, ctrl.filter.dateRange, ctrl.filter.dateRanges, $scope.pageNum, $scope.pageSize)},getList: function (keyword, dateRange, dateRanges, pageNum, pageSize) {http.get('maintenanceRecords/total', {keyword: keyword,dateRange: util.encodeJSON(dateRange),dateRanges: util.encodeJSON(dateRanges),pageNum: pageNum, pageSize: pageSize}).then(function (response) {var result = _.get(response, 'data.datas.result', {});$scope.entity = result.list;$scope.count = result.count;$scope.totalPages = result.totalPages;$scope.pageNum = result.pageNum;$scope.pageSize = result.pageSize;if ($scope.pageNum == '1') {$scope.test1 = '1'$scope.test2 = $scope.count} else {$scope.test1 = $scope.pageSize * 1 + 1if ($scope.pageSize * $scope.pageNum <= $scope.count) {$scope.test2 = $scope.pageSize * $scope.pageNum} else {$scope.test2 = $scope.count}}$scope.lastSize = Math.ceil($scope.totalPages / $scope.pageSize);util.apply($scope);});},firstPage: function () {ctrl.getList(ctrl.filter.keyword, ctrl.filter.dateRange, ctrl.filter.dateRanges, '1', $scope.pageSize)},upperPage: function () {$scope.pageNum = $scope.pageNum * 1 - 1ctrl.getList(ctrl.filter.keyword, ctrl.filter.dateRange, ctrl.filter.dateRanges, $scope.pageNum, $scope.pageSize)},nextPage: function () {$scope.pageNum = $scope.pageNum * 1 + 1ctrl.getList(ctrl.filter.keyword, ctrl.filter.dateRange, ctrl.filter.dateRanges, $scope.pageNum, $scope.pageSize)},lastPage: function () {$scope.pageNum = Math.ceil($scope.count * 1 / $scope.pageSize * 1);ctrl.getList(ctrl.filter.keyword, ctrl.filter.dateRange, ctrl.filter.dateRanges, $scope.pageNum, $scope.pageSize)},flippingPage: function () {$scope.pageSize = $scope.statType.namectrl.getList(ctrl.filter.keyword, ctrl.filter.dateRange, ctrl.filter.dateRanges, $scope.pageNum, $scope.pageSize)},

Java后端代码：

@GetMapping("/total")public CheckMessage total(@RequestParam(value = "keyword", required = false) String keyword,@RequestParam(value = "dateRanges", required = false) String dateRanges,@RequestParam(value = "dateRange", required = false) String dateRange,@RequestParam(value = "pageNum", required = false, defaultValue = "1") Integer pageNum,@RequestParam(value = "pageSize", required = false, defaultValue = "15") Integer pageSize) {Document userDoc = UserUtils.getUser();Document query = new Document();//维修单编号、状态、产品类型、产品编码、产品名称、SN码（新旧码一起搜索）、处理方案、创建日期、维修完成日期if (StrUtil.isNotEmpty(keyword)) {query = new Document().append("$or", Arrays.asList(new Document("repairOrderNumber", new Document("$regex", keyword)),new Document("orderWorkStatus", new Document("$regex", keyword)),new Document("appraisal.service.name", new Document("$regex", keyword)),new Document("product.type", new Document("$regex", keyword)),new Document("product.code", new Document("$regex", keyword)),new Document("product.name", new Document("$regex", keyword)),new Document("snCode", new Document("$regex", keyword)),new Document("resultsRepair.newSnCode", new Document("$regex", keyword)),new Document("resultsRepair.machine", new Document("$regex", keyword))));}if (UserUtils.isOEMUser()) {Document oemDto = userDoc.get("oem", Document.class);query.append("oemCode", oemDto.getString("id"));}if (StrUtil.isNotEmpty(dateRange)) {Document entity = DocuLib.parseDecode(dateRange);if (entity.size() > 0) {query.append("$and", Arrays.asList(new Document("createTime", new Document("$gte", entity.getString("start"))),new Document("createTime", new Document("$lte", entity.getString("end")))));}}if (StrUtil.isNotEmpty(dateRanges)) {Document entity = DocuLib.parseDecode(dateRanges);if (entity.size() > 0) {query.append("$and", Arrays.asList(new Document("completedRepairData", new Document("$gte", entity.getString("start"))),new Document("completedRepairData", new Document("$lte", entity.getString("end")))));}}// 计算跳过的记录数int skipCount = (pageNum - 1) * pageSize;List<Document> list = DBUtils.list(MaintenanceRecords.collectionName, query, null, null, pageSize, skipCount);//总数long count = DBUtils.count(MaintenanceRecords.collectionName, query);// 计算总页数int totalPages = (int) Math.ceil((double) count / pageSize);Document entity = new Document();entity.put("list", list);entity.put("count", count);entity.put("pageNum", pageNum);entity.put("pageSize", pageSize);entity.put("totalPages", totalPages);return ResultData.succ(entity);}