layui动态表格生成

 <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show layui-form">
                        <div class="product-list-cen" style="clear: both;">
                            <table class="layui-table" lay-even lay-filter="productList">
                                <thead>
                                    <tr>
                                        <th lay-data="{checkbox:true}"></th>
                                        <!--<th lay-data="{field:'ids',sort:'true',width:'4%',display: none;}"></th>-->
                                        <th lay-data="{field:'id',sort:'true',width:'4%'}">序号</th>
                                        <th lay-data="{field:'ids',sort:'true',width:'10%'}">编号</th>
                                        <th lay-data="{field:'name',width:'50%'}">内容</th>
                                        <th lay-data="{field:'beginTime',width:'10%'}">状态</th>
                                        <th lay-data="{field:'endTime',sort:'true',width:'14%'}">时间</th>
                                        <th lay-data="{field:'opeartion'}">操做</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    [#list list as siteMsgObj]
                                        <tr>
                                            <td></td>
                                            <!--<td style="display: none;">${siteMsgObj.msgId!}</td>-->
                                            <td>${siteMsgObj_index+1}</td>
                                            <td>${siteMsgObj.msgId!}</td>
                                            <td><div class='product-table-cell-box'><div class='text-box'><p style="text-align: center;">${siteMsgObj.subject!}<p></div></div></td>
                                            <td>[#if siteMsgObj.readflag?? && siteMsgObj.readflag =="1"]已读[#else]未读[/#if]</td>
                                            <td>${siteMsgObj.addtime!}</td>
                                            <td>
                                                <a class="operation edit" href="javascript:void(0)" onclick="editorActivity('/thtml/memberfront/member/siteMsg/toReadReceivedMsgPage.thtml?msgId=${siteMsgObj.msgId!}&r=${.now}&tpl_page=/shop/shop_siteMsg.html')"><i class="iconfont icon-see"></i>查看</a>
                                                <a class="operation delete" href="javascript:void(0)" onclick="deletData('${siteMsgObj.msgId!}')"><i class="iconfont icon-delete"></i>删除</a>
                                            </td>
                                        </tr>
                                    [/#list]
                                </tbody>
                            </table>
                            <div id="paging"></div>
                        </div><!--product-list-cen-->
                    </div><!--layui-tab-item-->
                </div>

<script type="text/javascript">
    
        layui.use(['laydate','laypage','form','table'], function(){
            var laydate = layui.laydate,
                    table = layui.table,
                    form = layui.form,
                    laypage = layui.laypage;

            //转换静态表格
            table.init('productList', {
                page:false
                ,limit: ${paging.itemsPerPage!} //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                //支持全部基础参数
            });
            
            laypage.render({
                elem: 'paging' //注意，这里的 test1 是 ID，不用加 # 号
                ,limit: ${paging.itemsPerPage!} //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
                ,curr: ${paging.currentPage!} //数据总数，从服务端获得
                ,count: ${count} //数据总数，从服务端获得
                ,layout:['prev','next','page','limit','skip','count']
                ,jump: function(obj, first){
                    //obj包含了当前分页的全部参数，好比：
                    console.log(obj.curr); //获得当前页，以便向服务端请求对应页的数据。
                    console.log(obj.limit); //获得每页显示的条数
                    
                    //首次不执行
                    if(!first){
                         var url="";
                        [#if type=="b2b2cOulet"]
                        url = "/thtml/memberfront/siteMsgList.thtml?type=b2b2cOulet";
                        [#else]
                        url = "/thtml/shopfront/siteMsgList.thtml";
                        [/#if]
                           if(url.indexOf('?')>-1){
                               url = url+'&PrmPageNo='+obj.curr+'&PrmItemsPerPage='+obj.limit;
                           }
                           else{
                               url = url+'?PrmPageNo='+obj.curr+'&PrmItemsPerPage='+obj.limit;
                           }
                           url += "&r="+new Date();
                       window.location.href = url;
                    }
                  }
              });

            //监听表格复选框选择
           table.on('checkbox(productList)', function(obj){
             //判断是否选中
                  if(obj.checked)
                  {
                      var data ="";
                      if(obj.type =="all"){
                          var checkStatus = table.checkStatus('idTest'); 
                          var datas = checkStatus.data;
                                                                       
                          for (var i = 0; i < datas.length; i++) {
                              if (i== datas.length-1) {
                                  data = data+datas[i].ids ;     
                            }else{
                                data = datas[i].ids+ "," + data;     
                            }
                                                       
                       }                           
                      }else if(obj.type =="one"){
                        data = obj.data.ids;
                      }     
                      
                    var msgIds = $("#msgIds").val();
                    if(msgIds=="")
                    {
                        $("#msgIds").val(data);
                    }
                    else
                    {
                        msgIds = msgIds + "," + data;
                        $("#msgIds").val(msgIds);
                    }
               }
               else
               {
                   // var data = obj.data.ids; 
                   var data ="";
                      if(obj.type =="all"){
                          $("#msgIds").val("");//全选取消时，ids应该为空                         
                      }else if(obj.type =="one"){
                        data = obj.data.ids;
                      }
                   
                    var msgIds = $("#msgIds").val();
                    if(msgIds.indexOf(",")<0)
                    {
                        $("#msgIds").val("");
                    }
                    else
                    {
                        if(msgIds.indexOf(data)==0)               
                        {
                            msgIds = msgIds.replace(data+",","");
                        }
                        else
                        {
                            msgIds = msgIds.replace(","+data,"");
                        }
                        $("#msgIds").val(msgIds);
                    }
               }
           });
            
        });
        
        //标记已读
        function flagRead(){
            //先判断有没有选中条记录 如有记录则将选中的记录li上添加class active,若未选择则提示请选择要标记的数据
            var ids = $("#msgIds").val();
            if(ids.length==0)
            {
                layer.msg('请选择记录');
            }
            else
            {
                //修改这些记录的是否已读的状态
                $.post("/thtml/memberfront/member/siteMsg/editReadflags.thtml?ids="+ids,{"r":Math.random()},function(data){
                    if(data.done)
                    {
                        layer.msg('标记成功');
                        window.location.reload();
                    }
                    else
                    {
                        layer.msg(data.msg);
                    }
                });
            }
            
        }
        
        function deletMutilData()
        {
            var ids = $("#msgIds").val();
            if(ids.length==0)
            {
                layer.msg('请选择记录');
            }
            else
            {
                layer.confirm('肯定删除选中的消息？', {
                  btn: ['肯定','取消'] //按钮
                }, function(){
                    $.post("/thtml/memberfront/member/siteMsg/deletes.thtml",{"ids":ids,"r":Math.random()},function(data){
                            if(data.done)
                            {
                                layer.msg('删除成功');
                                window.location.reload();
                            }
                            else
                            {
                                layer.msg(data.msg);
                            }
                    });
                }, function(){
                  return;
                });
            }
        }
        
        //查看记录
        function editorActivity(url){ //0 表明未审核经过时编辑  1表明审核经过后查看（不可编辑状态）
            layer.open({
                type: 2,
                title: '消息详情',
                shadeClose: true,
                isOutAnim: false,
                area: ['100%', "100%"],
                content: url
            });
        }
        //删除记录
        function deletData(msgId){
            layer.confirm('肯定删除此消息？', {
              btn: ['肯定','取消'] //按钮
            }, function(){
                $.post("/thtml/memberfront/member/siteMsg/deletes.thtml",{"ids":msgId,"r":Math.random()},function(data){
                        if(data.done)
                        {
                            layer.msg('删除成功');
                            window.location.reload();
                        }
                        else
                        {
                            layer.msg(data.msg);
                        }
                });
            }, function(){
              return;
            });
        }
    </script>