当前位置: 首页 > news >正文

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);}

相关文章:

html+vue编写分页功能

效果&#xff1a; html关键代码&#xff1a; <div class"ui-jqgrid-resize-mark" id"rs_mlist_table_C87E35BE"> </div><div class"list_component_pager ui-jqgrid-pager undefined" dir"ltr"><div id"pg…...

计算机网络 实验指导 实验17

实验17 配置无线网络实验 1.实验拓扑图 Table PC0 和 Table PC1 最开始可能还会连Access Point0&#xff0c;无影响后面会改 名称接口IP地址网关地址Router0fa0/0210.10.10.1fa0/1220.10.10.2Tablet PC0210.10.10.11Tablet PC1210.10.10.12Wireless互联网220.10.10.2LAN192.16…...

在 Vue中,v-for 指令的使用

在 Vue中&#xff0c;v-for 指令用于渲染一个列表&#xff0c;基于源数据多次渲染元素或模板块。它对于展示数组或对象中的数据特别有用。 数组渲染 假设你有一个数组&#xff0c;并且你想为每个数组元素渲染一个 <li> 标签&#xff1a; <template> <ul>…...

达梦数据库执行sql报错:数据溢出

数据库执行sql报错数据溢出 单独查询对应的数字进行计算是不是超过了某个字段类型的上限或下限 如果已经超过了&#xff0c;进行对字段进行cast类型转换处理&#xff0c;转换为dec num都可以尝试 这里就是从 max(T.BLOCK_ID as dec*8192t.bytes)/1024/1024 max_MB,换成了这个…...

从「宏大叙事」到「生活叙事」,小红书品牌种草的的“正确姿势”

不同于抖音和微博&#xff0c;在小红书上&#xff0c;品牌营销的基调应该是怎样的&#xff1f;品牌怎样与小红书用户对话&#xff1f;什么样的内容&#xff0c;才能走进小红书用户的心中&#xff1f;本期&#xff0c;小编将带大家洞察品牌在小红书营销的“正确姿势”。从「小美…...

Python Selenium 的基本使用方法

文章目录 1. 概述2. 安装Chrome及ChromeDriver2.1 安装Chrome2.2 安装ChromeDriver 3. 安装Selenium4. 常见用法4.1 启动4.2 查找元素4.3 等待页面加载元素 1. 概述 Selenium 是一个用于自动化 web 浏览器的工具&#xff0c;它提供了一套用于测试 web 应用程序的工具和库。Sel…...

上位机图像处理和嵌入式模块部署(树莓派4b固件功能设计)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 前面我们说过&#xff0c;上位机的功能都是基于插件进行开发的。但是上位机的成本比较贵&#xff0c;一般的企业不一定愿意接接受。这个时候另外一…...

新手入门人工智能:从零开始学习AI的正确途径

你是否对人工智能&#xff08;AI&#xff09;充满了好奇心和探索欲&#xff1f;你是否想了解如何从零开始学习AI&#xff0c;成为一名人工智能领域的专家&#xff1f;那么&#xff0c;这篇文章就是为你准备的&#xff01;我们将带你了解人工智能的基本概念&#xff0c;学习如何…...

ubuntu git相关操作

1 安装git sudo apt install git git --version git version 2.25.1 2 解决git超时 2.1 扩大post的buffer git config --global http.postBuffer 524288000 git config --global http.postBuffer 157286400 2.2 换回HTTP1上传。上传之后再切换回HTTP2 …...

IDEA工具|添加 GitLab 账户之两三事

&#x1f4eb; 作者简介&#xff1a;「六月暴雪飞梨花」&#xff0c;专注于研究Java&#xff0c;就职于科技型公司后端工程师 &#x1f3c6; 近期荣誉&#xff1a;华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 &#x1f525; 三连支持&#xff1a;欢迎 ❤️关注…...

蓝桥杯:棋盘(Java)

目录 问题描述输入格式输出格式代码实现 问题描述 小蓝拥有n n大小的棋盘&#xff0c;一开始棋盘上全都是白子。小蓝进行了m.次操作&#xff0c;每次操作会将棋盘上某个范围内的所有棋子的颜色取反&#xff08;也就是白色棋子变为黑色&#xff0c;黑色棋子变为白色)。请输出所…...

跨界融合:ERP与TMS的区分、相通之处、融合方式,全告诉你。

Hi&#xff0c;如今系统的边界越来越模糊&#xff0c;A系统和B系统会有一些功能的交叉&#xff0c;贝格前端工场今天开始介绍第二篇ERP和TMS的融合。 一、什么是ERP和TMS ERP是企业资源规划&#xff08;Enterprise Resource Planning&#xff09;的缩写&#xff0c;是一种集成…...

SAP Smartform转存PDF方法汇总

用户会有保存SF至本地PDF文件的需求,下面详细说明一下Smartform转成PDF的四种方法,其中,方法二和三相比于其他方法更便捷实用,如果还有其他方法,欢迎留言补充。 一、代码开发 1)先调用smartform函数获取OTF格式数据 2)后调用函数CONVERT_OTF转换成PDF格式数据 3)再…...

Linux【实战篇】—— NFS服务搭建与配置

目录 一、介绍 1.1什么是NFS&#xff1f; 1.2客户端与服务端之间的NFS如何进行数据传输&#xff1f; 1.3RPC和NFS的启动顺序 1.4NFS服务 系统守护进程 二、安装NFS服务端 2.1安装NFS服务 2.2 创建共享目录 2.3创建共享目录首页文件 2.4关闭防火墙 2.5启动NFS服务 2.…...

Edge的使用心得与深度探索

Microsoft Edge 是微软推出的一款网页浏览器&#xff0c;基于 Chromium 开源项目开发。从 2020 年开始&#xff0c;Edge 浏览器经历了一次重大更新&#xff0c;采用了与 Google Chrome 相同的浏览器引擎&#xff0c;这使得它在性能、兼容性和扩展支持方面都得到了显著改善。以下…...

逆向案例二十八——红某点集登录接口逆向序

网址&#xff1a;aHR0cHM6Ly93d3cuaHJkanl1bi5jb20vIy9sb2dpbj9yZWRpcmVjdD0lMkZyZWFsVGltZUxpdmluZw 登录接口&#xff0c;发现两个参数加密&#xff0c;分别是pwd和sig,t很明显是时间戳。 观察pwd,发现很像md5加密&#xff0c;我输入的密码是123456&#xff0c;在在线加密网…...

我的创作纪念日20240418

机缘 我的技术博客起源于对编程的深深热爱和对知识的渴望。从一开始&#xff0c;我就被编程世界的无限可能所吸引&#xff0c;而这种热情也推动我开始了技术创作之旅。我创建博客的初衷有以下几点&#xff1a; 分享实战经验&#xff1a;在工作中&#xff0c;我遇到了许多技术…...

计算机视觉入门

计算机视觉是人工智能的一个分支&#xff0c;它涉及研究如何使计算机能够理解和解释图像和视频中的视觉信息。这个领域结合了计算机科学、工程学、神经科学和认知科学等多个学科的知识。以下是计算机视觉入门的一些关键点&#xff1a; 1. 基础概念 - **图像处理**&#xff1a;对…...

CTFHUB-技能树-Web前置技能-文件上传(前端验证—MIME绕过、00截断、00截断-双写后缀)

CTFHUB-技能树-Web前置技能-文件上传&#xff08;前端验证—MIME绕过、00截断、00截断-双写后缀&#xff09; 文章目录 CTFHUB-技能树-Web前置技能-文件上传&#xff08;前端验证—MIME绕过、00截断、00截断-双写后缀&#xff09;前端验证—MIME绕过有关MIMEMIME的作用 解题时有…...

Java面试题笔记(持续更新)

Java基础 java中的Math.round(-1.5)等于多少&#xff1f; Math的round方法是四舍五入,如果参数是负数,则往大的数如,Math.round(-1.5)-1&#xff0c;如果是Math.round(1.5)则结果为2 JDK和JRE的区别&#xff1f; JDK 是 Java Development ToolKit 的简称&#xff0c;也就是…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

云启出海,智联未来|阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

java调用dll出现unsatisfiedLinkError以及JNA和JNI的区别

UnsatisfiedLinkError 在对接硬件设备中&#xff0c;我们会遇到使用 java 调用 dll文件 的情况&#xff0c;此时大概率出现UnsatisfiedLinkError链接错误&#xff0c;原因可能有如下几种 类名错误包名错误方法名参数错误使用 JNI 协议调用&#xff0c;结果 dll 未实现 JNI 协…...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Robots.txt 文件

什么是robots.txt&#xff1f; robots.txt 是一个位于网站根目录下的文本文件&#xff08;如&#xff1a;https://example.com/robots.txt&#xff09;&#xff0c;它用于指导网络爬虫&#xff08;如搜索引擎的蜘蛛程序&#xff09;如何抓取该网站的内容。这个文件遵循 Robots…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

关于easyexcel动态下拉选问题处理

前些日子突然碰到一个问题&#xff0c;说是客户的导入文件模版想支持部分导入内容的下拉选&#xff0c;于是我就找了easyexcel官网寻找解决方案&#xff0c;并没有找到合适的方案&#xff0c;没办法只能自己动手并分享出来&#xff0c;针对Java生成Excel下拉菜单时因选项过多导…...