SSM框架+Layui框架实现数据表格分页效果图如下所示：

具体实现方法：

方法一：（基于前台进行分页）

实现思路：主要是后台将全部数据返回到前台，之后前台通过Layui的parseData函数来实现分页显示

具体代码如下：

HTML代码：

 <script>layui.use(['table', 'form'], function () {var table = layui.table;var form = layui.form;table.render({elem: '#tb',url: '${pageContext.request.contextPath}/getCustomerList',toolbar: '#toolbarDemo',//开启头部工具栏，并为其绑定左侧模板page: true,limit: 10,limits: [5, 10, 20, 50, 100],//分页方法一：parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据var result;console.log("aaa="+this);console.log("bbb"+JSON.stringify(res));console.log("curr==="+this.page.curr);//(前端来实现)分页方法一：//这是前台 用res.data接受全部数据 再根据当前页的条件从全部数据中选取一部分数据显示出来if(this.page.curr){//若为第二页 则curr为2 页面显示的数据就是从res.data集合数组里的 （2-1）*limit（10）=10 到 limit（10）*2=20的数据result = res.data.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);}else{// 一开始就是第一页 则就是 显示的数据就是从res.data集合数组里的0到limit（10）中result=res.data.slice(0,this.limit);}return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.total, //解析数据长度"data": result //解析数据列表};},cols: [[ //表头//{type: 'radio', fixed: 'left'},//{field: 'id', title: 'ID', sort: true, fixed: 'left', hide: true},{type: 'checkbox', fixed: 'left'},//行号{type: 'numbers', title: '行号', fixed: 'left'},{field: 'cust_id', title: '客户编号'},{field: 'cust_name', title: '客户名称'},{field: 'cust_source', title: '客户来源'},{field: 'cust_industry', title: '客户所属行业'},{field: 'cust_level', title: '客户级别'},{field: 'cust_phone', title: '固定电话'},{field: 'cust_mobile', title: '手机'},{fixed: 'right', width: 120, title: '操作', toolbar: '#barDemo'}]],done: function (res, curr, count){}});});</script>

后端java代码：

1、先定义一个公用返回信息类Message继承HashMap

import java.util.HashMap;
import java.util.Map;/*** 公用返回信息类*/
public class Message extends HashMap {private static final long serialVersionUID = 1L;public Message() {super.put("message", "ok");super.put("msg", "操作成功");super.put("code", "0");}public void set(String key, Object value) {super.put("result", true);super.put(key, value);}public void setData(String key, Object value) {super.put("result", true);super.put(key, value);}public void setData(Map data) {super.put("result", true);if (null != data) {this.putAll(data);}}public void setMsg(String msg) {this.put("msg", msg);}public void put(String key, Object value) {this.setData(key, value);}public void setErrorMessage(String msg) {super.put("msg", msg);super.put("result", false);super.put("status", "error");}public void setOkMessage(String msg) {super.put("msg", msg);super.put("result", true);super.put("status", "ok");}
}

2、Controller层：

@Controller
public class CustomerController {@Autowiredprivate CustomerService customerService;@ResponseBody@RequestMapping(value = "getCustomerList")public Message getCustomerList(int page, int limit, HttpServletRequest request) {System.out.println("getCustomerList===");return customerService.getCustomerList(page,limit);}}

3、service层：

import com.itheima.po.Message;public interface CustomerService {public Message getCustomerList(int page, int limit);
}

4、Impl：

@Service("customerService")
@Transactional
public class CustomerServiceImpl implements CustomerService {@Autowiredprivate CustomerMapper customerMapper;@Overridepublic Message getCustomerList(int page, int limit) {//这里msg已经包括3个键值对  1、"message", "ok"  2、"msg", "操作成功"   3、"code", "0"Message msg = new Message();try {System.out.println("getList");//(前端来实现)分页方法一：List<Customer> list=customerMapper.findCustomer();System.out.println("list==="+list);msg.setData("data", list.toArray());msg.set("total", list.size());} catch (Exception e) {msg.setErrorMessage("新增失败:" + e.getMessage());}System.out.println(msg);return msg;}
}

5、Mapper：

import com.itheima.po.Customer;import java.util.List;public interface CustomerMapper {public List<Customer> findCustomer();
}

6、Mapper.xml：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.itheima.mapper.CustomerMapper"><select id="findCustomer"  resultType="Customer">select * from customer</select></mapper>

方法二：（基于后台进行分页）

实现思路：主要是后台接收前台传过来的page和limit来进行取部分数据再返回到前台显示，而不是直接取全部数据返回到前台。

具体代码如下：

HTML代码：

 <script>layui.use(['table', 'form'], function () {var table = layui.table;var form = layui.form;table.render({elem: '#tb',url: '${pageContext.request.contextPath}/getCustomerList',toolbar: '#toolbarDemo',//开启头部工具栏，并为其绑定左侧模板page: true,limit: 10,limits: [5, 10, 20, 50, 100],//(后端来实现)分页方法二：parseData: function(res){ //将原始数据解析成 table 组件所规定的数据，res为从url中get到的数据console.log("aaa="+this);console.log("bbb"+JSON.stringify(res));console.log("curr==="+this.page.curr);return {"code": res.code, //解析接口状态"msg": res.msg, //解析提示文本"count": res.total, //解析数据长度"data": res.data //解析数据列表};},cols: [[ //表头//{type: 'radio', fixed: 'left'},//{field: 'id', title: 'ID', sort: true, fixed: 'left', hide: true},{type: 'checkbox', fixed: 'left'},//行号{type: 'numbers', title: '行号', fixed: 'left'},{field: 'cust_id', title: '客户编号'},{field: 'cust_name', title: '客户名称'},{field: 'cust_source', title: '客户来源'},{field: 'cust_industry', title: '客户所属行业'},{field: 'cust_level', title: '客户级别'},{field: 'cust_phone', title: '固定电话'},{field: 'cust_mobile', title: '手机'},{fixed: 'right', width: 120, title: '操作', toolbar: '#barDemo'}]],done: function (res, curr, count){}});});</script>

java后端代码：

1、公用返回信息类Message 、Controller层、service层、Mapper、Mapper.xml代码与方法一代码相同。

2、Impl：

@Service("customerService")
@Transactional
public class CustomerServiceImpl implements CustomerService {@Autowiredprivate CustomerMapper customerMapper;@Overridepublic Message getCustomerList(int page, int limit) {//这里msg已经包括3个键值对  1、"message", "ok"  2、"msg", "操作成功"   3、"code", "0"Message msg = new Message();try {System.out.println("getList");//(后端来实现)分页方法二：System.out.println("page====:"+page);System.out.println("limit====:"+limit);List<Customer> customer=customerMapper.findCustomer();//customerStrings是最终要传给前端的数据ArrayList<CustomerString> customerStrings=new ArrayList<>();//根据page和limit来选取数据给customerStringsint x = page * limit - limit;for(int i=x;( i<customer.size()) && ((i-x)<limit) ;i++ ){CustomerString customerString=new CustomerString();customerString.setCust_id(customer.get(i).getCust_id());customerString.setCust_name(customer.get(i).getCust_name());customerString.setCust_user_id(customer.get(i).getCust_user_id());customerString.setCust_create_id(customer.get(i).getCust_create_id());customerString.setCust_source(customer.get(i).getCust_source());customerString.setCust_source_id(customer.get(i).getCust_source_id());customerString.setCust_industry(customer.get(i).getCust_industry());     customerString.setCust_industry_id(customer.get(i).getCust_industry_id());customerString.setCust_level(customer.get(i).getCust_level());customerString.setCust_level_id(customer.get(i).getCust_level_id());customerString.setCust_linkman(customer.get(i).getCust_linkman());customerString.setCust_phone(customer.get(i).getCust_phone());customerString.setCust_mobile(customer.get(i).getCust_mobile());customerString.setCust_zipcode(customer.get(i).getCust_zipcode());customerString.setCust_createtime(customer.get(i).getCust_createtime());customerStrings.add(customerString);}msg.setData("data", customerStrings);msg.set("total", customer.size());} catch (Exception e) {msg.setErrorMessage("新增失败:" + e.getMessage());}System.out.println(msg);return msg;}
}

总结：

正处于学习阶段，深知实现方法有很多，若有更好的方法实现或以上若有错误和改进地方，请各位大佬多多指教。

Layui数据表格分页通过两种方法实现相关推荐

Yii实现分页的两种方法
Yii实现分页的两种方法,一种是用DAO实现,另外一种是在widget实现. 各有优点吧,第一种效率会高一点, 第二种可以使用自带的表格,方便一些. 一. DAO实现分页. [Controller层] ...
layui数据表格分页无法正常显示
layui数据表格分页无法正常显示应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从ur ...
layui数据表格分页导出全部页面的数据到Excel表格中
在使用layui数据表格进行分页显示时,可能需要导出数据到Excel表,可是直接使用table.exportFile却会导出的是已经渲染到表中的数据,这时就会发现问题,导出的数据只是分页表格数据中的一 ...
layui 数据表格分页搜索 checkbox 缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
layui 数据表格+分页+搜索+checkbox+缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
mongoDB分页的两种方法
http://www.cnblogs.com/xiaolai/p/3401289.html mongoDB的分页查询是通过limit(),skip(),sort()这三个函数组合进行分页查询的下面这 ...
mysql授权改表_mysql开启远程登陆(修改数据表和授权两种方法)
一.确认防火墙没有阻止3306端口(一般服务器默认会屏蔽掉) windows防火墙例外设置方法控制面板(右上角选择查看方式为大图标)---防火墙---高级设置---高级设置---出站规则---最右边 ...
java实现layui静态表格分页,layui——数据表格分页实例
layui实现数据表格table分页功能,异步加载,表格渲染.总体流程:layui的数据表格设置分页参数开启可以从请求中看到如下图,所以我们需要在后端控制器接收分页数据page和limit进行操作,下 ...
layui数据表格分页简单实现
首先要了解layui分页和一般的后台分页不一样. 至少:我用的layui是基于前台分页的. 后台分页,都是根据前台传递了pageNum和limit这些分页参送给后台,后台根据参数进行了分页查询返回给 ...

Layui数据表格分页通过两种方法实现

SSM框架+Layui框架实现数据表格分页效果图如下所示：

具体实现方法：

方法一：（基于前台进行分页）

具体代码如下：

方法二：（基于后台进行分页）

具体代码如下：

总结：

Layui数据表格分页通过两种方法实现相关推荐

最新文章

热门文章