使用Layui分页查询数据

最新推荐文章于 2024-08-03 13:41:47 发布
最新推荐文章于 2024-08-03 13:41:47 发布
阅读量1w 收藏 7
点赞数 2
分类专栏： C#
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44484473/article/details/90271794
版权

首先要引入要使用的插件
在这里插入图片描述
引入成功之后，根据插件里面的写法要求，布局，给这个表格设置一个ID
在这里插入图片描述
然后声明两个全局变量，第一个变量用来保存layui模块以便全局使用，第二个变量存放表格，在下一步根据layui插件的使用方法初始化表格，根据声明的变量，设置的table id
再然后设置一下表格，filed：设置要显示在该列的数据，具体根据控制器传过来对应的字段，否则无法显示，title：设置表格中要显示出来的表头，limit：设置每页显示的条数，limits：每页条数的选择项，表格的具体数据通过请求控制器查询出来的数据显示出来，路径要与对应的控制器名字和方法名字一致
在这里插入图片描述
来到控制器，首先创建好要使用到的类，page：代表当前页码，limit：代表每页数据量，GetStartIndex：代表分页开始序号，GetEndIndex：代表分页结束序号
在这里插入图片描述
另外一个类，LayuiTableData，里面的count：总行数 data：数据
在这里插入图片描述
创建好了之后，通过linq查询出该表的信息，根据员工的编号就行倒序排列，再查询出数据的总条数，然后根据封装好的类进行分页操作，将查询出来的数据总行数，数据
最后返回到页面就完成了，具体代码如下：
在这里插入图片描述

mybiutefou
关注
专栏目录
layui table分页查询
weixin_44540414的博客
04-18 1426
开发工具与关键技术： MVC 作者：彭水清 撰写时间：2019/4/19 首先呢，我得先说明LayuiTablePage、LayuiTableData这三个我自定义的类，LayuiTablePage这个类中有page（代表当前页码）、limit 代表每页数据量、public int GetStartIndex(){return (page - 1) * limit;}（分页开始序号）、public...
layui分页查询
想做一只程序猿。
11-26 1188
在layui框架显示数据需要四个固定的格式 这是在前端通过parseData函数，来返回四个固定的格式，这是前端实现做法。 优化做法：在Models中直接定义一个parseData类（名字随便取的），把这四个当做类的参数，把他们封装起来。（构造函数+无参构造），注意data类型List<Student> 是学生的集合类。 然后在后端直接给这是个参数赋值，就是layui需要的格式。 然后返回json格式的parseData对象，注意这里是返回前端table实例对象.
Flask+LayUI开发手记（一）：LayUI表格的前端数据分页展现
最新发布
hbrown的博客
08-03 1581
因为，一次把数据全传到前端的模式，意味着系统内出现两套数据，一套前端缓冲数据，一套后端原本数据，如果功能中需要增删改数据，如何保持前后端数据的一致性，就成了控制上的大问题。前端数据分页，即一次性提取后台数据到前端，由前端实现全部的分页数据处理控制，后端数据分页，即前端展示分页操作栏，所有的分页操作均提交到后端进行数据请求，由后端生成分页数据传给前端。把这些都配置完成，执行一下，数据出来了，而且，data数据源模式下，table会自动完成分页展示控制，不需要再象url数据源模式下，还需要各种特殊处理了。
layui实现分页查询
qq_48528335的博客
04-14 2086
layui实现分页查询 一、导入分页插件 <!-- 分页插件 --> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.12&lt
使用layui插件分页查询
Iloveskr
09-09 267
一、导入分页插件依赖 <!--分页插件--> <dependency> <groupId>com.github.pagehelper</groupId> <artifactId>pagehelper-spring-boot-starter</artifactId> <version>1.2.9</version>
12.layui分页查询
早日成为鹏总
09-05 1815
真分页 前端分页展示数据，后端分页获取数据。前台向后台传递俩分页参数，一个curr,一个limit case.html <div style="width: 95%;height: auto;min-height: 700px;margin-left: 15px" > <table class="layui-hide" id="caseListTable" la...
基于LayUI分页和LayUI laypage分页的使用示例
08-29
基于LayUI分页和LayUI laypage分页的使用示例 本资源摘要信息主要介绍了基于LayUI分页和LayUI laypage分页的使用示例，涵盖了LayUI分页、LayUI动态分页、LayUI laypage分页、LayUI laypage刷新当前页等知识点。 1....
ASP.NET MVC+Layui数据分页的实现和说明
01-08
ASP.NET MVC 和 Layui 框架结合使用可以轻松实现数据分页功能，这对于构建高效、易维护的后台管理系统尤其重要。Layui 是一款现代前端框架，它提供了丰富的组件和模块，使得开发者无需深入了解前端技术也能快速构建...
Layui实现带查询条件的分页
12-29
本文实例为大家分享了Layui实现带查询条件的分页，供大家参考，具体内容如下 这个前端UI框架是真的让人又爱又恨呐！想了很久的方案才行的通 这是全部源码： {include file=../../../application/admin/view/public/...
layui实现数据表格table分页功能（ajax异步）
10-16
在介绍如何使用layui实现数据表格的分页功能之前，首先需要了解layui是什么。Layui是一个前端UI框架，它提供了一套完整的组件和模块化API，包括布局、弹窗、导航、表单、表格等功能。它的设计哲学是轻量级、易用性和...
layui实现数据分页功能
10-16
通过上述步骤，开发者可以在使用Layui的项目中快速实现数据分页功能，这不仅提高了开发效率，还保证了页面的美观和用户的良好体验。需要注意的是，文档中有一些OCR识别错误，如将“产品经理ID”误识别为...
关于layui的分页查询_table实现
热门推荐
彼岸使者
05-22 1万+
对    于    后   台   管    理    系    统   ,以    前    的    分    页    展    示    是    自    己    写    的  先看一下这是我用layui做的一个简单的分页。↓展示截图。 先来总结一下自己的问题：首先自己是个刚到公司的小白，对于前端的只是和各种ui框架掌握的不是很熟，（实际上是没看过），到公司之后为了方便快捷，所以开始...
layui详细分页和查询功能
Bian_MCheng的博客
04-29 4778
1.Java开发千人交流群 677807540 大家可以一起讨论技术欢迎加入 2.前端页面，注意查询的参数不能放在form里面否则会提交两次表单，后台接收不到数据。 <html><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> &...
Layui分页查询
weixin_44550198的博客
05-16 930
作者：卢远平 撰写时间：2019.5.13 先是在控制器写，写需要获取的数据，在图下代码之前是数据库的查询，筛选条件，数据判断，之后就是图中代码，先是获取总的行数，再分页查询，再实例化VO，传入总行数，分页查询，最后返回Json。 HTML部分再是表格的初始化前面内容只是为了显示表格数据，而再表头结束后的page才是分页，第一个值表示每页有多少条数据，第二个值表示每页条数的设置。 分页效果图。...
LayUI分页查询展示数据（SSH框架）
zhang1409399037的博客
12-24 2562
网页展示的效果图如下：    1、Service方法 public interface IStudentService { //查询学生列表 public List stulist(int page,int limit); //总行数 public long procount(); }   2、Impl方法： import ...
在SpringMVC中获取后台数据，再使用layui分页
05-24
在SpringMVC中获取后台数据，并使用layui分页，可以按照以下步骤进行： 1. 在Controller中编写获取后台数据的方法，并返回数据： ```java @RequestMapping("/getData") @ResponseBody public Map<String, Object> getData(@RequestParam("page") int page, @RequestParam("limit") int limit) { List<Data> dataList = dataService.getDataList(page, limit); int count = dataService.getCount(); Map<String, Object> result = new HashMap<>(); result.put("code", 0); result.put("msg", ""); result.put("count", count); result.put("data", dataList); return result; } ``` 其中，getDataList方法是根据传入的page和limit参数获取对应的数据列表，getCount方法是获取数据总数。 2. 在页面中使用layui的table组件和分页组件展示数据： ```html <table class="layui-table" lay-data="{url: '/getData', page: true, limit: 10}" lay-filter="data"> <thead> <tr> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'name', width:80}">名称</th> <th lay-data="{field:'description'}">描述</th> </tr> </thead> <tbody></tbody> </table> <div id="pagination"></div> ``` 其中，lay-data属性指定了获取数据的url和分页参数，lay-filter属性指定了表格的过滤器。需要注意的是，在表格中需要指定每一列的属性，以便正确显示数据。 3. 在页面中使用layui的分页组件： ```javascript layui.use(['laypage', 'table'], function(){ var laypage = layui.laypage; var table = layui.table; laypage.render({ elem: 'pagination', limit: 10, count: 100, jump: function(obj, first){ if(!first){ table.reload('data', { where: { page: obj.curr, limit: obj.limit } }); } } }); }); ``` 其中，elem属性指定了分页组件的容器，limit属性指定了每页显示的数据量，count属性指定了数据总数。在分页组件的回调函数中，调用table.reload方法重新加载数据表格，并传入当前页和每页显示的数量参数。 这样，就可以在SpringMVC中获取后台数据，并使用layui分页展示数据了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值