layui__2">layui 官网地址

https://www.layui.com/demo/

创建一个数据表格

<table class="layui-hide" id="data" lay-filter="test"></table>
<div id="page" style="text-align:center"></div>
function documentList(pageNos,pageSizes,searchs) {
     layui.use(function(){ 
        //得到各种内置组件
        var layer = layui.layer //弹层
            ,laypage = layui.laypage //分页
            ,table = layui.table //表格
        //初始化参数 checkisNull 为自定义的js方法判断是否为空
        //base16Str js是base64 加密方法
        if (checkisNull(pageNos))   { pageNos=base16Str(<%=pageNo%>);}
        if (checkisNull(pageSizes)) { pageSizes=base16Str(<%=pageSize%>);}
        if (checkisNull(searchs))   { searchs=base16Str(<%=search%>);}
        // 初始化数据表格
        DocumentAction(pageNos,pageSizes,searchs);
        function DocumentAction(pageNos,pageSizes,searchs) {
            //执行一个 table 实例
            table.render({
                elem: '#data'
                ,height: 535
                ,method : 'POST'
                ,url: /selectDocumentList' //数据接口
                ,request: {  //自定义 page  limit
                    pageName: 'pageNo',    //页码的参数名称，默认：page
                    limitName: 'pageSize'  //每页数据量的参数名，默认：limit
                }
                ,where:{
                    pageNo:pageNos,
                    pageSize:pageSizes,
                    search:searchs
                }
                ,title: '文档表'
                ,cols: [[ //表头
                    {field: 'recId',name: 'checkbox',fixed: 'left',width:'6%'
                        ,templet: function(d){
                        return '<div class="laytable-cell-checkbox" ><span class="icon_circle"  style="display: none;">'+d.rownumber+'</span><input type="checkbox" name="checkbox" value="'+d.recId+'"><input type="hidden" name="docAID" value="'+d.docId+'"/></div>'
                    }
                    }
                    ,{type:'numbers',title: '序列', width:'5%', fixed: 'left'}
                    ,{field: 'doctitle', title: '文档标题', width:'38%', fixed: 'left',unresize: true, sort: true
                        ,templet: function(d){
                            return '<a href="javascript:void(0);" onclick="documentedit(\''+d.docId+'\',\''+d.recId+'\')" class="layui-table-link" title="'+d.doctitle+'">'+d.icon_zhiding+d.doctitle+'</a>'
                        }
                    }
                    ,{ title: '所在栏目', width:'10%'
                        ,templet: function(d) {
                            return '<a href="javascript:void(0);" onclick="channelLink(\''+d.chnnelid+'\',\'3\')" title="'+d.docId+'"  class="layui-table-link" data-type="3">'+d.chnnelname+'</a>'
                        }
                    }
                    ,{field: 'CRUSER', title: '创建人', width:'8%'}
                    ,{field: 'crtime', title: '创建时间', width:'11%',sort: true, totalRow: true}
                    ,{field: 'docStatus', title: '状态', width: '11%', sort: true, totalRow: true}
                    ,{fixed: 'right', title: '操作',width: '11%', align:'center'
                        ,templet: function(d){
                            return '<a href="javascript:void(0);" onclick="documentdetil(\''+d.documenturl+'\')" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a><a href="'+d.docpuburl+'" target="_blank" class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">预览</a>'
                        }
                    }
                ]]
                ,parseData: function(res){
                    $("#RecordCount").val(res.recordCount);
                    pagenum(res.pageSize,res.recordCount,res.pageNo);
                    return {
                        "code": res.code, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "data": res.data //解析数据列表
                    };
                }
            });
        }
        //  分页 pagesize = 10  recordCount = 23;
        function pagenum(pagesize,recordCount,pageNo) {
            laypage.render({
                elem: 'page'
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                , curr:pageNo
                , count: recordCount
                , limit: pagesize
                , jump: function (obj, first) {
                    if (!first) {
                       $("#pageNo").val(obj.curr);
                       $("#pagesize").val(obj.limit);
                       DocumentAction(base16Str(obj.curr),base16Str(obj.limit),searchs);
                    }
                }
            });
        }

    });
}