layui实现数据分页功能_layui分页使用

layui实现数据分页功能_layui分页使用最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来先说前端HTML和js代码先下载layuijs文件,在页面引入layui的js在HTMLboday标签中添加table容器,id为demo $(function(){ getData(); }) functiongetData(){

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

最近需要对后台的数据进行分页渲染并且需要进行表头动态渲染,因此和小伙伴一起学习了layui的数据表格渲染,然后进行了改进,成功之后记录了下来

先说前端HTML和js代码


  
  
  
  1. <script src="/layui/layui.js"></script> 先下载layuijs文件,在页面引入layui的js

Jetbrains全家桶1年46,售后保障稳定

<table id="demo" lay-filter="test"></table>

在HTML boday标签中添加table容器,id为demo

<script>
	$(function(){
		 getData();
	})
	function getData(){
		  $.ajax({  
		        type:'get',  
		        url:'interfaces/demo',  
		    	success:function(data){
					test("#demo",data,"/interfaces/userlist")
				} 
		    });  
	}
	function test(element,data,url){
		  debugger
	      var table = layui.table;
	      //第一个实例
	      table.render({
	        elem: '#demo'
	        ,height: 315
	        ,url: '/interfaces/userlist' //数据接口
	        ,page: true //开启分页
	        ,cols: [
	        	data
	        	]
	      });
	      
	}
	
	 layui.use('table', test());
	</script>

js代码中test方法的element为HTML代码中boday容器的id url为请求数据的后台地址,page属性为是否开启分页,cols中放的是getData中返回的表头信息的json数组

getData为获取动态表头,其中返回的数据格式为一个json数组,其中格式如下: 
field 和title 两个字段不能更改这个是表头的数据格式 

[{
		field: "id",
		title: 'ID'
	},
	{
		field: "name",
		title: 'mingcheng'
	},
	{
		field: "addess",
		title: 'dizhi'
	}]
layui.use('table', test()); 为进行layui分页

然后是后台接口代码,我在这里只是写了一个样例 

先说的是js代码getData访问的接口返回的数据

@RequestMapping("/interfaces/demo")
	@ResponseBody
	public List<Test> demo(){
		Test test=new Test();
		test.setField("userName");
		test.setTitle("名称");
		Test test2=new Test();
		test2.setField("realName");
		test2.setTitle("地址");
		ArrayList<Test> list=new ArrayList<>();
		list.add(test);
		list.add(test2);
		return list;
	}

然后是进行分页test方法访问的接口

	@RequestMapping(value="/userlist", method = RequestMethod.GET)
	  @ResponseBody
	  public ResultMap<List<Users>> getUserList(@RequestParam(value="dep", required=false ,defaultValue="0") int  dep,
	      @RequestParam(value="status", required=false,defaultValue="-1") int  status,
	      @RequestParam(value="duty", required=false,defaultValue="0") int  duty,
	      @RequestParam(value="relName", required=false,defaultValue="") String  relName,
	      @RequestParam(value="page", required=false,defaultValue="1") int  page,
	      @RequestParam(value="limit", required=false,defaultValue="10") int  limit) {
	    int rowIndex=(page - 1)*limit;
	    List<Users> userList=userservice.getUserList(dep, status, duty, relName, rowIndex, limit);
	    List<Users> userListSize=userservice.getUserListSize(dep, status, duty, relName);  
	    /*List<Users> allUserList =userservice.selectAllUser();*/
	    UserManagerPage<List<Users>> userPage=new UserManagerPage<List<Users>>();
	    userPage.setData(userList);
	    userPage.setSize(limit);
	    userPage.setPage(page);
	    userPage.setSizeIndex(rowIndex);
	    userPage.setCount(userListSize.size());
	    return new ResultMap<List<Users>>(0,"",userList,100);
	  }

其中 ResultMap的结构如下: 

package com.mlt.util;

public class ResultMap <T> {

    private String msg;
    
    private int code;
    
    private T data;
    
    private int count;
    
    
    


	public ResultMap() {
    	super();
    }
    
    public ResultMap(int code,String message) {
    	super();
    	this.code=code;
    	this.msg=message;
    }
    
    public ResultMap(int code,String message,T data,int count) {
    	super();
    	this.code=code;
    	this.msg=message;
    	this.data=data;
    	this.count=count;
    }
    
    
    public String getMsg() {
		return msg;
	}

	public void setMsg(String msg) {
		this.msg = msg;
	}

	public int getCount() {
		return count;
	}

	public void setCount(int count) {
		this.count = count;
	}

	public int getCode() {
		return code;
	}

	public void setCode(int code) {
		this.code = code;
	}

	public T getData() {
		return data;
	}

	public void setData(T data) {
		this.data = data;
	}
    
    
    
}

其中的code值一定要为0,这个坑我和小伙伴用一下午才爬上来(layui官网没查到对这个有特别要求,但是只有0才能进行数据渲染) 具体数据格式如下:其中count 为数据的总条数,分页的时候用到,data为一个json数组

data中userName 和 address 要和getData获取表头json数据中filed的value值一样

{
  "count": 100,
  "code": 0,
  "msg": null,
  "data": [
    {
      "userName": "张三",
      "address": 中国,
    }
  ]
}

完成以上工作就可以进行layui的分页数据渲染

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/207470.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 各类手机开发平台介绍(转载)[通俗易懂]

    各类手机开发平台介绍(转载)[通俗易懂]近来无事,把手机开发平台的学习指南、教程和资料总结一下,方便大家参考。手机客户端软件开发最大的困难就是平台不统一,手机开发平台太多。手机可分为智能手机开发和featherphone手机。开发平台可分为开放式平台和封闭式平台,开放式平台包括symbian、windowsmobile、linux、iPhone、Android、BlackBerry、j2me、brew等,支持手机应用程序通过OT…

  • c++入门教程–-6循环语句

    c++入门教程–-6循环语句

  • 值得推荐的Idea十几大优秀插件

    值得推荐的Idea十几大优秀插件最近,闲来无事,为了改变一下枯燥的编程环境,特地搜寻了下有助提升代码功力的插件,够装逼,够狂,拽,屌~绚丽的画面,多彩的跳动,让你区别其他程序猿。产品,测试,开发看到你的界面,眼睛都会发光~算了,

  • usb转rs485 linux驱动下载,USB转485万能驱动下载

    usb转rs485 linux驱动下载,USB转485万能驱动下载USB转RS485串口驱动是一款非常专业的USB转RS485驱动安装程序。这款软件适合WIN7/WINXP/LINUX等系统,能够帮助用户一键解决USB无法转换成RS485的问题,需要的小伙伴可下载体验。【安装方法】1、在安装前可以先看看使用说明再安装。将USB转换线插入电脑的USB接口中,系统会提示检测到新设备并出现新硬件添加向导,选择从列表或指定的位置安装,手动安装,找到刚刚驱动的解压目录,…

  • trylock 用法_try可以没有catch吗

    trylock 用法_try可以没有catch吗tryLock的使用业务场景方法说明用法业务场景对于某些并发业务场景,我们可能想保证同一时刻只有一个线程在执行某一方法。例如:对于缓存的初始化工作,此时我们可以使用tryLock()方法对代码进行上锁,只有拿到锁的线程可以执行操作,而其他线程则只会在进行一次尝试后返回false。方法说明Acquiresthelockonlyifitisnotheldbyanotherthreadatthetimeofinvocation.只有在调用时它是空闲的才能获取锁。获取锁

    2022年10月15日
  • tomcat面试题

    tomcat面试题1.tomcat给你你怎样去调优?1.JVM参数调优:-Xms表示JVM初始化堆的大小,-Xmx表示JVM堆的最大值。这两个值的大小一般根据需要进行设置。当应用程序需要的内存超出堆的最大值时虚拟机就会提示内存溢出,并且导致应用服务崩溃。因此一般建议堆的最大值设置为可用内存的最大值的80%。在catalina.bat中,设置JAVA_OPTS=’-Xms256m-Xmx512m’,表示

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号