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>