layui 前端分页后端分页

最新推荐文章于 2025-02-06 11:08:22 发布

原创最新推荐文章于 2025-02-06 11:08:22 发布 · 3.2k 阅读

12 ·

CC 4.0 BY-SA版权

layui 专栏收录该内容

46 篇文章

订阅专栏

博客主要介绍了前端分页和后端分页的实现。包含前端分页和后端分页的效果图展示，还给出了相应代码。前端代码涉及查询功能、数据表格和回调函数等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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:15
        var 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")
	@ResponseBody
    public 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,"操作失败。");
        }
    }