使用layui怎么实现数据表格table分页功能-营山大橙子建站

RELATEED CONSULTING

新闻中心

这里有您想知道的互联网营销解决方案

使用layui怎么实现数据表格table分页功能

这篇文章给大家介绍使用layui怎么实现数据表格table分页功能，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

我们提供的服务有：成都网站制作、网站建设、外贸网站建设、微信公众号开发、网站优化、网站认证、嘉善ssl等。为近千家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的嘉善网站制作公司

一、引入layUI的相关资源

二、html页面代码

搜索表单：


 
 项目搜索：

业务员

厂家代表

渠道

客户

项目阶段

货物情况

实施情况

收款情况



数据表格:

三、后台接收分页参数以及查询条件，获取并返回数据

主要注意下:

page: 前台分页插件传入的当前页数，
limit: 前台分页插件传入的每页个数，
projectInfo ：接收前台传入的查询条件的实体
jsonResult ：后台返回的相关数据的响应实体

@ResponseBody
 @RequestMapping("/project/list")
 public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){

 JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo);
 return jsonResult;
 }

后台响应类必须包含code与count字段，因为前台layui会自动获取

自定义后台数据响应实体 JsonResult：

package com.bhy702.jfkj.common.util;

/**
 * JSON结果响应
 *
 */
@Data
public class JsonResult {

 private static final String SUCCESS = "成功";
 private static final String ERROR = "失败";
 
 /**
 * 响应状态code，因为前台layui默认0为响应成功，所以此处默认为0
 */
 private Integer code = 0;

 /**
 * 数据总条数
 */
 private Long count = 0L;

 /**
 * 返回是否成功
 */
 private Boolean result = false;
 
 /**
 * 返回提示信息
 */
 private String msg = "";

 /**
 * 返回数据信息
 */
 private Object data;

 private JsonResult() {
 }

 /**
 * 成功的响应
 * 
 * @return
 */
 public static JsonResult success() {
 return result(true, SUCCESS, null,null);
 }

 public static JsonResult success(String msg) {
 return result(true, msg, null,null);
 }

 public static JsonResult success(Object data) {
 return result(true, SUCCESS, data,null);
 }
 public static JsonResult success(Object data,Long count) {
 return result(true, SUCCESS, data,count);
 }


 public static JsonResult success(String msg, Object data) {
 return result(true, msg, data,null);
 }

 public static JsonResult success(String msg, Object data,Long count) {
 return result(true, msg, data,count);
 }

 /**
 * 失败的响应
 * 
 * @return
 */
 public static JsonResult error() {
 return result(false, ERROR, null,null);
 }

 public static JsonResult error(String msg) {
 return result(false, msg, null,null);
 }

 public static JsonResult error(Object data) {
 return result(false, ERROR, data,null);
 }

 public static JsonResult error(Object data,Long count) {
 return result(false, ERROR, data,count);
 }

 public static JsonResult error(String msg, Object data) {
 return result(false, msg, data,null);
 }

 public static JsonResult error(String msg, Object data,Long count) {
 return result(false, msg, data,count);
 }

 public static JsonResult result(Boolean result, String msg, Object data,Long count) {
 JsonResult jsonResult = new JsonResult();
 jsonResult.setResult(result);
 jsonResult.setMsg(msg);
 jsonResult.setData(data);
 jsonResult.setCount(count);
 return jsonResult;
 }
}

四、渲染table表格数据

主要注意下:

elem: ‘#projectList': projectList为表格id，
page: true: 设置表格分页，
url: ‘/project/list' ：数据请求url
fixed: true:固定列
done : function(res, curr, count){…}:数据加载成功后的回调函数

var tableIns = table.render({
 elem: '#projectList',
 cellMinWidth: 150,
 url: '/project/list',
 cols: [
 [{
 // type: 'checkbox',fixed: 'left'
  checkbox: true, fixed: true
 }, {
 field: 'id',title: 'ID',align:'center',width:50,fixed: true
 }, {
 field: 'name',title: '项目名称',align:'center',fixed: true
 }, {
 field: 'businessOperatorStr',title: '经办人',align:'center',fixed: true
 }, {
 field: 'mftRepresentativeStr',title: '厂家代表',align:'center',fixed: true
 }, {
 field: 'channelStr',title: '渠道',align:'center',fixed: true
 }, {
 field: 'customerStr',title: '客户',align:'center',fixed: true
 }, {
  field: 'projectPhaseStr',title: '项目阶段',align:'center',fixed: true
 }, {
 field: 'amount',title: '金额',align:'center'
 }, {
 field: 'businessSource',title: '商机来源',align:'center'
 }, {
 field: 'mainProduct',title: '主要产品',align:'center'
 }, {
 field: 'productLineStr',title: '产品线',align:'center'
 }, {
 field: 'goodsConditionStr',title: '货物情况',align:'center'
 }, {
 field: 'implementConditionStr',title: '实施情况',align:'center'
 }, {
  field: 'payAmount',title: '已付金额',align:'center'
  }, {
 field: 'payConditionStr',title: '收款情况',align:'center'
 }, {
 field: 'startTime',title: '开项时间',align:'center'
  }, {
 field: 'endTime',title: '结项时间',align:'center'
  }, {
 field: 'remark',title: '备注',align:'center'
 }, {
 field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true
 }]
 ],
 id: 'testReload',
 // skin: 'row', //表格风格
 even: true, //隔行背景
 event: true,
 page: true,
 done : function(res, curr, count){
  $('#totalProjectNumber').text("共有数据："+count+" 条");
  table_data=res.data;
  layer.closeAll('loading');
  // layer.close(layer.index); //它获取的始终是最新弹出的某个层，值是由layer内部动态递增计算的
  // layer.close(index); //返回数据关闭loading
 }
 });

五、监听搜索表单的提交事件,并重新渲染table表格数据

主要注意下:

sreach: 为搜索按钮的lay-filter=“sreach”，
where 中的数据对应搜索表单，为搜索的条件，后台使用这些条件进行筛选数据返回

form.on('submit(sreach)', function(data){

 layer.load();
 tableIns.reload({
 url:"/project/list",
 page: {
  curr: 1 //重新从第 1 页开始
  },
 where:{
 name:data.field.projectName,
  businessOperatorId:data.field.businessOperatorId,
 mftRepresentativeId:data.field.mftRepresentativeId,
 channelId:data.field.channelId,
  customerId:data.field.customerId,
  projectPhase:data.field.projectPhase,
  goodsCondition:data.field.goodsCondition,
  implementCondition:data.field.implementCondition,
  payCondition:data.field.payCondition,
  startTime:data.field.startTime,
  endTime:data.field.endTime
 }
 });

 return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
 });

layui是什么

layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。

关于使用layui怎么实现数据表格table分页功能就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

新闻名称：使用layui怎么实现数据表格table分页功能
文章路径：http://scyingshan.cn/article/pjsdhs.html

其他资讯

快速导航

友情链接

网站建设

联系方式

企业：青羊区大橙子信息咨询工作室
地址：成都市青羊区太升南路288号
电话：18980820575
网址：www.scyingshan.cn

公司名称：青羊区大橙子信息咨询工作室联系电话：18980820575

网站备案号：蜀ICP备2022028542号-24

营山大橙子建站营山网站建设营山网站设计营山网站制作成都做网站