Newtonsoft.Json与datatables.net的使用 完美分页

.ashx  数据源

   public void ProcessRequest(HttpContext context)
        {
            SaiLun_SP_MySite.DAL.ttMonthlyPlanDetails dal = new SaiLun_SP_MySite.DAL.ttMonthlyPlanDetails();
            string adaccount = ADHelper.GetCurrentUser();
            SqlParameter[] parameter = { new SqlParameter("@User", SqlDbType.NVarChar) };
            parameter[0].Value = adaccount;
            DataSet ds = DbHelperSQL.RunProcedure("tSP_ttMonthlyPlanDetails_List", parameter, "data");
            IsoDateTimeConverter timeFormat = new IsoDateTimeConverter();
            timeFormat.DateTimeFormat = "yyyy-MM-dd HH:mm:ss";
            string jsonStr = JsonConvert.SerializeObject(ds, timeFormat, new DataTableConverter());
            context.Response.ContentType = "text/plain";
            context.Response.Write(jsonStr);
        }

js

   <script src="../Resource/media/js/jquery-1.11.1.min.js"></script>
    <script src="../Resource/media/js/jquery.dataTables.min.js"></script>
    <link href="../Resource/media/css/jquery.dataTables.css" rel="stylesheet" />

<script>
    $(document).ready(function () {
        $('#example').dataTable({
            "processing": true,
            "serverSide": false,
            "ajax": "ttMonthlyPlanList.ashx",
            "columns": [
           { "data": "id" },
           { "data": "taskname" },
           { "data": "user" },
           { "data": "createdate" },
           { "data": "startdate" },
           { "data": "enddate" },
           { "data": "inspectuser" },
           { "data": "statuscode" }
            ]
        });
    });
</script>

html

     <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>
                            <asp:Label ID="lblID" runat="server" Text="ID"></asp:Label>
                        </th>
                        <th>
                            <asp:Label ID="lblTaskName" runat="server" Text="任务名称"></asp:Label></th>
                        <th>
                            <asp:Label ID="lblUser" runat="server" Text="发起人"></asp:Label></th>
                        <th>
                            <asp:Label ID="lblCreateDate" runat="server" Text="发起时间"></asp:Label></th>
                        <th>
                            <asp:Label ID="lblStartDate" runat="server" Text="开始时间"></asp:Label></th>
                        <th>
                            <asp:Label ID="lblEndDate" runat="server" Text="结束时间"></asp:Label></th>
                        <th>
                            <asp:Label ID="lblInspectuser" runat="server" Text="审批人"></asp:Label></th>
                        <th>
                            <asp:Label ID="lblStatusCode" runat="server" Text="流程状态"></asp:Label></th>
                    </tr>
                </thead>
            </table>

常用方法补充：

有些数据不希望显示在屏幕上，或者需要什么条件才会显示，你可以使用columns.visible选项来实现


被隐藏的列依然是表格的一部分，通过column().visible()方法来显示


被隐藏的列既然是表格的一部分，那么用户也可以搜索和访问被隐藏的列的相关内容

下面的例子展示了office和age两列不显示（右键查看网页源代码可以看到），并且不能被搜索到

  $(document).ready(function() {              $('#example').dataTable( {                "columnDefs": [                  {                    "targets": [ 2 ],                    "visible": false,                    "searchable": false                  },                  {                    "targets": [ 3 ],                    "visible": false                  }                ]              } );            } );

多语言设置：

 $(document).ready(function() {                $('#example').dataTable( {                    "language": {                        "lengthMenu": "每页 _MENU_ 条记录",                        "zeroRecords": "没有找到记录",                        "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",                        "infoEmpty": "无记录",                        "infoFiltered": "(从 _MAX_ 条记录过滤)"                    }                } );        } );          

多语言.txt配置

{
"sSearch": "搜索：",  
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {  
    "sFirst": "首页",  
    "sPrevious": "前一页",
    "sNext": "后一页",  
    "sLast": "尾页"  
}, 
"sZeroRecords": "没有检索到数据",  
"sProcessing": "<img src='./loading.gif' />"
}

调用方法:

  "oLanguage": {
                "sUrl": "cn.txt"
            }