datatables的初始化及刷新

来源:互联网 发布:读书笔记软件下载 编辑:程序博客网 时间:2024/06/06 10:25
前台: 
<table style="width:100%;" id="FengXianPingGu_datatable" class="table table-striped table-bordered table-hover">
                    <thead>
                    <tr class="text-c">
                        <th>评估报告编码</th>
                        <th>评估日期</th>
                        <th>项目名称</th>
                        <th>项目描述</th>
                        <th>创建者</th>
                        <th>文件路径</th>
                        <th>备注</th>
                        <th>模板类型</th>
                        <th>用户类型</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody></tbody>
                </table>

 
        var sel = $("#FengXianPingGu_select1").val();
        $('#FengXianPingGu_datatable').dataTable().fnClearTable();//清空数据.fnClearTable();//清空数据
        $('#FengXianPingGu_datatable').dataTable().fnDestroy(); //还原初始化了的datatable
                $('#FengXianPingGu_datatable').DataTable({
                    "ajax": "/FengXian/FengXianPingGuGetList1?id="+sel,
                    "aLengthMenu": [50, 100, 150], 
                    "columns": [
                        {
                            "data": "RIID",
                            "width":"150px"
                    
                        },
                        { "data": "RIDate" },
                        { "data": "RIName" },
                        { "data": "RIDescription" },
                        { "data": "Creater" },
                        { "data": "FileUrl" },
                        { "data": "BZ" },
                        { "data": "RIType" },
                        { "data": "userType" },
                        {
                            //data: null, render: 'EMPNUMBER'
                            data: null,
                            className: "center",
                            width: "120px",
                            render: function (data, type, row) {
                                return "<div class='hidden-sm hidden-xs action-buttons'><a class='green' onclick='FengXianPingGu_fun_edit(this)' href='#'><i class='ace-icon fa fa-pencil bigger-130'></i></a><a class='red' onclick='FengXianPingGu_fun_delrow(this)' href='#'> <i class='ace-icon fa fa-trash-o bigger-130'></i></a></div>";

                            }
                        }

                    ],
                    "columnDefs": [
                        
                        {
                            "targets": [1],
                            "visible": false
                        },
                        {
                            "targets": [4],
                            "visible": false
                        },
                        {
                            "targets": [5],
                            "visible": false
                        },
                        {
                            "targets": [7],
                            "visible": false
                        },
                        {
                            "targets": [8],
                            "visible": false
                        }
                    ]
                });

后端:
RiskItemInfoBll rii_b=new RiskItemInfoBll();
 List<RiskItemInfo> items =  rii_b.GetModelList(""); 
return this.Json(new
            {
                sEcho = 1,
                iTotalRecords = items.Count(),
                aaData = items.ToArray()

            }, JsonRequestBehavior.AllowGet); 
返回类型:JsonResult 

特别注意:每个字段都可以有render,作用对字段值进行修改,比如:
render: function (data, type, row) {
                                if (moment($("#ServerDate").text()).isBefore(data)) {
                                    return moment(data).format('YYYY年M月D日');
                                } else {
                                    return "<span style='color: red; font-weight:bold'>" + moment(data).format('YYYY年M月D日') + "</span>";
                                }
                            }
原创粉丝点击