layui 前端分页后端分页

1，前端分页

效果图：

代码：

 layui.use('table', function(){var table = layui.table;//第一个实例table.render({elem: '#demo',height: 312,url: '/demo/table/user/' //数据接口,page: true //开启分页,limit:2000 // 当前页数,limits: [1,15, 30, 50,100,200,500,5000,10000,20000,50000] // 页数容量,cols: [[ //表头{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},{field: 'username', title: '用户名', width:80},{field: 'sex', title: '性别', width:80, sort: true},{field: 'city', title: '城市', width:80} ,{field: 'sign', title: '签名', width: 177},{field: 'experience', title: '积分', width: 80, sort: true},{field: 'score', title: '评分', width: 80, sort: true},{field: 'classify', title: '职业', width: 80},{field: 'wealth', title: '财富', width: 135, sort: true}]]});});

2，后端分页

效果图：

代码：

前端代码：

<div class="fp-table" style="width: 100%"><table id="hstable" lay-filter="hstool"></table><div id="pageid"  style="text-align: left;border:1px solid rgba(229, 229, 229, 1);border-top: none ;height: 41px"></div></div>

查询功能：

function searchBtn(pageNumberg,pageSizeg) {hsdata(pageNumberg,pageSizeg);}function hsdata(pageNumberg,pageSizeg) {var fieldValues = {};fieldValues.currentPage=pageNumberg?pageNumberg:1;fieldValues.pageSize=pageSizeg?pageSizeg:15;fieldValues.searchBtn='searchBtn';----------------------------------------------------$.ajax({type: 'post',async: false,data: fieldValues,// 参数url: "",dataType: 'JSON',success: function (dataremote) {hstable(dataremote) // 响应回来的数据}});----------------------------------------------------或者dLong.getJSON("",fieldValues,function(data){if (data.success) {hstable(data)}else {hstable([],true)}},true);}

数据表格：

<style>.soul-bottom-contion {height: 31px;/*line-height: 29px;*/border-top: solid 1px #e6e6e6;display:none;}.soul-bottom-contion .condition-items {display: inline-block;width: calc(100vw - 100px);height: 30px;float: left;/*overflow: hidden;*/white-space: nowrap;display:none;}</style>function hstable(data) {var table = layui.table;pages=data?data.commonPage.pageSize:15var ins1=table.render({elem: '#hstable',height: "full-110",// width: 7* CLIENTWIDTH / 10,size: 'sm' ,filter:{bottom:false},page:false,// 关闭layui数据表格自带的分页样式limit:data?data.commonPage.pageSize:15,limits:[15,30,60,80,160,300,600,1000,2000,5000,10000,20000,50000],where: {"checkType":1,//自定义参数"page":data?data.commonPage.pageIndex:1,//当前页（必传参数，可改变参数名）"size":data?data.commonPage.pageSize:20,//每页条数（必传参数，可改变参数名）},cols: [[]],data: data? data.commonPage.resultlist : [],// data: data? data : [],done: function (res, curr, count) {layui.soulTable.render(this)doneCallback(data) // 回调函数}});}

回调函数：


// 分页回调函数，自定义分页渲染function doneCallback(data){layui.laypage.render({elem: 'pageid', //注意，这里的 test1 是 ID，不用加 # 号count: data?data.commonPage.result.total:0, //数据总数，从服务端得到,limit:data?data.commonPage.pageSize:15,curr:data?data.commonPage.pageIndex:1,limits:[15,30,60,80,160,300,600,1000,2000,5000,10000,20000,50000],layout:  ['prev', 'page','count', 'next', 'limit', 'skip'],// 自定义排版page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局//,curr: 5 //设定初始在第 5 页,groups: 6 // 连续出现的页码个数},skip: true, //是否开启跳页theme:"#009688", // 主题样式jump:function (obj,first) {if(!first){searchBtn(obj.curr,obj.limit); // 传递参数}}});}

后端代码：

@RequestMapping("/getItemList")@ResponseBodypublic HashMap<String, Object> getItemList(@RequestParam Map<String,String> paraMap){try {String sql="";HashMap<String, Object> stringObjectHashMap = new HashMap<>();if(!StringUtil.isEmptyOrLength0(paraMap.get("search"))){sql=" select * from table1 WHERE (ITEMNAME like :search or ITEMCODE like :search) and itemcode not in (select itemcode from table2 where rulecode=:rulecode) ";stringObjectHashMap.put("search","%"+paraMap.get("search")+"%");}else {sql=" select * from table1 where itemcode not in (select itemcode from table2 where rulecode=:rulecode)";}stringObjectHashMap.put("rulecode",paraMap.get("rulecode"));stringObjectHashMap.put(PageUtil.ORDER_BY, "ITEMNAME@desc,ITEMCODE@desc");stringObjectHashMap.put(PageUtil.PAGE_INDEX, StringUtil.isEmptyOrLength0(paraMap.get("currentPage")) ? 1L : Integer.parseInt(paraMap.get("currentPage")));stringObjectHashMap.put(PageUtil.PAGE_SIZE, StringUtil.isEmptyOrLength0(paraMap.get("pageSize")) ? 15L : Integer.parseInt(paraMap.get("pageSize")));CommonPage commonPage =PageUtil.newPageUtil(stringObjectHashMap, sql, "").execSearch(new NamedParameterJdbcTemplate(jdbcTemplate.getDataSource()));HashMap<String, Object> result = createResult(true, "");result.put("commonPage",commonPage);return result;} catch (Exception e) {log.error("系统错误！"+e.getMessage(),e);return  createResult(Boolean.FALSE,"操作失败。");}}

layui 前端分页后端分页相关推荐

【全栈之前端编程】Javaweb使用thymeleaf局部刷新结合Layui插件实现Html分页
热门系列: 程序人生,精彩抢先看目录 1.前言 2.正文 2.1 开发环境介绍 2.2 实现代码 2.3 实现流程说明 2.4 实现效果程序人生,精彩抢先看 1.前言最近个人在做开发的时候,需要 ...
分页查询：前端分页和后端分页
1.废话因为一次查出所有的数据太耗时,网络传输量也大,所以分页. 后端分页: 查询出指定条数的数据,在SQL中使用limit size, size * (num - 1) 起始条数 ,终止条 ...
后端分页+前端分页显示（Angular+Primeng+SpringBoot）
后端实现引入PageHelper插件 <dependency><groupId>com.github.pagehelper</groupId><artifa ...
layui表格使用及分页实现
前言最近一直见群友问table怎么用的,怎么渲染不了我的数据,开了分页怎么没有用-故写本博客望给群友以及刚用layui的开发者解疑答惑,博主是用java写后端的,其他语言的话可做参考本博客表格先 ...
Bootstrap-table学习笔记（二）——前后端分页模糊查询
在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下,顺便做个总结: 1,前端分页 2,后端分页 3,模糊查询前端分页相当简单,在我添加了2w条测试数据的时候打开的很流畅,没有卡顿. ...
修改layui框架html,layui框架如何设置分页？（方法介绍）
layui框架如何设置分页?下面本篇文章给大家介绍一下layui框架中设置分页的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 具体步骤如下: 1.从官方文档 - 内置模块 ...
iview table后端分页多选翻页选中回显
在iview的table组件中,前端在多选时如果点击下一页则丢失了上一页table的多选数据(由于采用的后端分页,每次翻页会直接刷新为新数据) 实现效果全选反选选中单条取消单条代码部分定义数 ...
Bootstrap table后端分页（ssm版）
说明 bootstrap table可以前端分页,也可以后端sql用limit分页. 这里讲的是后端分页,即实用limit.性能较好,一般均用这种源码下载地址:https://git.oschina ...
Spring Boot + JPA + Freemarker 实现后端分页完整示例
Spring Boot + JPA + Freemarker 实现后端分页完整示例界面效果螢幕快照 2017-07-28 15.34.42.png 螢幕快照 2017-07-28 15.34.2 ...
Spring Boot笔记-JPA分页（后端分页）
数据库内容如下: 使用Pageable即可. Maven如下: <?xml version="1.0" encoding="UTF-8"?> < ...

layui 前端分页后端分页

1，前端分页

效果图：

代码：

2，后端分页

效果图：

代码：

layui 前端分页后端分页相关推荐

最新文章

热门文章

layui 前端分页 后端分页

1，前端分页

效果图：

代码：

2，后端分页

效果图：

代码：

layui 前端分页 后端分页相关推荐

最新文章

热门文章

layui 前端分页后端分页

layui 前端分页后端分页相关推荐