layui实现分页查询

1.下载layui

https://www.layui.com/(layui前端框架由贤心创作)

2.查看文档

https://www.layui.com/doc/modules/laypage.html(分页)

3.实例展示

//核心配置

layui.config({
    base : "js/"
}).use(['form','layer','jquery','laypage'],function(){
    var form = layui.form(),
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        laypage = layui.laypage,
        $ = layui.jquery;

//加载页面数据
    var noticeData = '';
    $.ajax({
        url:'/notice/select',
        type:'post',
        dataType:'json',    
        contenType : 'application/json', 
        error: function(data){
            alert("失败!");
        },
        success: function(data){
            noticeData=data;
            noticeList();
        }
       });

function noticeList(that){
        //渲染数据
        function renderDate(data,curr){
            var dataHtml = '';
            if(!that){
                currData = noticeData.concat().splice(curr*nums-nums, nums);
            }else{
                currData = that.concat().splice(curr*nums-nums, nums);
            }
            if(currData.length != 0){
                for(var i=0;i<currData.length;i++){
                    dataHtml +='<tr>';
                    dataHtml +='<td>'+currData[i].notice_id+'</td>';
                    dataHtml +='<td>'+currData[i].title+'</td>';
                    dataHtml +='<td>'+currData[i].user_id+'</td>';
                    dataHtml +='<td>'+timeStamp2String(currData[i].turnover_time)+'</td>';
                    dataHtml +='<td>'+currData[i].clicks+'</td>';
                    dataHtml +='<td>'+currData[i].classify+'</td>';
                    dataHtml +='<td>'+currData[i].prospectus+'</td>';
                    dataHtml +='<td>'+currData[i].photo+'</td>';
          dataHtml +='<td>'+'<a href="noticeEdit.html?notice_id='+currData[i].notice_id+'"><button type="button"><i class="iconfont icon-edit"></i>编辑</button></a>'
                    +'<button type="button" onclick="deletey5555('+currData[i].notice_id+')" style="background-color:yellow;">删除<i class="layui-icon">&#xe640;</i></button>'+'</td>';
                    dataHtml +='</tr>';
                }
            }
            return dataHtml;
        }

        //分页
        var nums = 2; //每页出现的数据量
        if(that){
            noticeData = that;
        }
        laypage({
            cont : "page",
            pages : Math.ceil(noticeData.length/nums),
            jump : function(obj){
                $(".thead").html(renderDate(noticeData,obj.curr));
                $('.notice_list thead input[type="checkbox"]').prop("checked",false);
                form.render();
            }
        })
    }

分页效果图

4.layui分页使用总结

通过核心参数laypage.render(options)来设置分页参数