asp.net mvc 中利用jquery datatables 實現資料分頁顯示

1、Controller中的方法程式碼如下：

由於方法中的儲存過程沒有帶分頁引數，所以還可以有繼續優化的空間。

        /// <summary>
        /// 獲取測點列表
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public JsonResult GetMeasurePointList(string TreeID, string TreeType, int sEcho, int iDisplayStart, int iDisplayLength)
        {
            DataTable dtResult = new DataTable();
            string sql = string.Format("EXEC P_GET_ZXJG_TagList '{0}','{1}'", TreeID, TreeType);
            dtResult = QuerySQL.GetDataTable(sql);
            dtResult.Columns.Add("XuHao", typeof(string));
            dtResult.Columns.Add("StrValueTime", typeof(string));
            for (int i = 0; i < dtResult.Rows.Count; i++)
            {
                dtResult.Rows[i]["XuHao"] = (i + 1).ToString();
                dtResult.Rows[i]["StrValueTime"] = Convert.ToDateTime(dtResult.Rows[i]["F_ValueTime"]).ToString("yyyy-MM-dd HH:mm:ss");
            }
            int iTotalRecords = 0;
            int iTotalDisplayRecords = 0;
            List<DataRow> queryList = dtResult.AsEnumerable().ToList();
            iTotalRecords = queryList.Count();
            queryList = queryList.Skip(iDisplayStart).Take(iDisplayLength).ToList();
            iTotalDisplayRecords = queryList.Count();
            var temp = from p in queryList
                       select new
                       {
                           XuHao = p.Field<string>("XuHao").ToString(),
                           F_Description = p.Field<string>("F_Description").ToString(),
                           StrValueTime = p.Field<string>("StrValueTime").ToString(),
                           F_Value = p.Field<decimal>("F_Value").ToString(),
                           F_Unit = p.Field<string>("F_Unit").ToString(),
                           F_AlmLow = p.Field<decimal>("F_AlmLow").ToString(),
                           F_AlmUp = p.Field<decimal>("F_AlmUp").ToString()
                       };
            return Json(new
                {
                    draw = sEcho,
                    recordsFiltered = iTotalRecords,
                    recordsTotal = iTotalDisplayRecords,
                    data = temp.ToList()
                }, JsonRequestBehavior.AllowGet);
        }

2、cshtml檢視頁面中程式碼如下：

    function InitData() {
        var dataTable = $('#tbMeasurePointList').DataTable({
            "scrollY": "hidden",
            "scrollCollapse": false,
            "dom": 'tr<"bottom"lip><"clear">',
            language: {
                lengthMenu: '',//左上角的分頁大小顯示。
                search: '<span class="label label-success">搜尋：</span>',//右上角的搜尋文字，可以寫html標籤
                loadingRecords: '資料載入中...',
                paginate: {
                    //分頁的樣式內容。
                    previous: "上一頁",
                    next: "下一頁",
                    first: "",
                    last: ""
                },
                zeroRecords: "暫無資料",//table tbody內容為空時，tbody的內容。
                //下面三者構成了總體的左下角的內容。
                info: "<span class='pagesStyle'>總共<span class='recordsStyle'> _TOTAL_ 條,計 _PAGES_ </span>頁，當前顯示 _START_ -- _END_ 條記錄 </span>",//左下角的資訊顯示，大寫的詞為關鍵字。初始_MAX_ 條 
                infoEmpty: "0條記錄",//篩選為空時左下角的顯示。
                infoFiltered: ""//篩選之後的左下角篩選提示，
            },
            "lengthChange": false,
            "ordering": false,
            "iDisplayLength": 10,
            "searching": false,
            destroy: true, //Cannot reinitialise DataTable,解決重新載入表格內容問題  
            "serverSide": true,
            "sAjaxSource": "@Url.Action("GetMeasurePointList", "OnlineMonitor")",
            "fnServerData": function (sSource, aoData, fnCallback) {
                aoData.push({ "name": "TreeID", "value": $("#hidTreeID").val() });
                aoData.push({ "name": "TreeType", "value": $("#hidTreeType").val() });
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback
                });
            },
            "aoColumns": [
                { "mDataProp": "XuHao", "width": "50" },
                { "mDataProp": "F_Description", "width": "400" },
                { "mDataProp": "StrValueTime", "width": "200" },
                { "mDataProp": "F_Value", "width": "100" },
                { "mDataProp": "F_Unit", "width": "100" },
                { "mDataProp": "F_AlmLow", "width": "100" },
                { "mDataProp": "F_AlmUp", "width": "100"}

            ],
            "createdRow": function (row, data, index) {
                $(row).children('td').eq(0).attr('style', 'text-align: center;');
                $(row).children('td').eq(1).attr('style', 'text-align: left;');
                $(row).children('td').eq(2).attr('style', 'text-align: center;');
                $(row).children('td').eq(3).attr('style', 'text-align: right;');
                $(row).children('td').eq(4).attr('style', 'text-align: center;');
                $(row).children('td').eq(5).attr('style', 'text-align: right;');
                $(row).children('td').eq(6).attr('style', 'text-align: right;');
            }
        });
    }

3、實際顯示效果如下圖所示：