jQuery的DataTable的問題在服務器端處理

Question

我的腳本是在這裏：

<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" /> 
    <script src="~/Scripts/jquery.dataTables.min.js"></script> 

我jQuery代碼是在這裏：

$("#myTable").DataTable({ 
       "processing": true, // for show progress bar 
       "serverSide": true, // for process server side 
       "filter": true, // this is for disable filter (search box) 
       "aaSorting": [[2, 'asc']], 
       //"width":540, 
       "pagingType": "full_numbers", 
       scrollY: 265, 
       "lengthChange": false, 
       "oLanguage": { 
        "sUrl": "media/language/de_DE.txt", 
        "sZeroRecords": "There are no records that match your search criterion", 
        "sLengthMenu": "Display _MENU_ records per page", 
        "sInfo": "Displaying _START_ to _END_ of _TOTAL_ records", 
        "sInfoEmpty": "Showing 0 to 0 of 0 records", 
        "sInfoFiltered": "(filtered from _MAX_ total records)" 
       }, 
       "ajax": { 
        "url": "/Home/LoadData", 
        "type": "POST", 
        "datatype": "json", 

        "dataFilter": function(data){ 
        var json = jQuery.parseJSON(data); 
        json.recordsTotal = json.recordsTotal 
        json.recordsFiltered = json.recordsFiltered; 
        json.data = json.data; 
        return JSON.stringify(json); 
        } 

       }, 
       "columns": [ 

        { 
         "data": " ", "autoWidth": true, 'sortable': false, "mRender": 
          function (value, AddedOn, mData, type, row) { 
            return '<input type="checkbox" name="employeeIdsToDelete" id="' + mData.ID + '" class="call-checkbox" value="' + mData.ID + '" />'; 
                     } 
        }, 

        { 
          "data": "Station", "name": "Station", "autoWidth": true, 'render': 
          function (Station, mData, type, row) { 
            return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >"+ type.Station +"</a>"; 
                   } 
         }, 
         { 
          "data": "FlightNo", "name": "Flight No.", "autoWidth": true, 'render': 
          function (FlightNo, mData, type, row) { 
           return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >" + type.FlightNo + "</a>"; 
                    } 
         }, 
         { 
          "data": "FlightDate", "name": "FlightDate", "autoWidth": true, "type": "date", "render": 
           function (value, FlightDate, mData, type, row) { 
           if (value === null) return ""; 
           var pattern = /Date\(([^)]+)\)/; 
           var results = pattern.exec(value); 
           var dt = new Date(parseFloat(results[1])); 
           //var d = new Date(); 
           var MonthIndex = dt.getMonth(); 
           var monthnames = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); 
           var imonth = monthnames[MonthIndex]; 

           return "<a href='/Home/EditEmployee?id=" + mData.ID + "' id='modal1' >" + dt.getDate() + " " + imonth + " " + dt.getFullYear() + "</a>"; 
                       } 
         }, 
         { 
          "data": "PaxNo", "name": "No. of Pax", "autoWidth": true, 'render': 
           function (No_Of_Passengers, mData, type, row) { 
           return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >" + type.No_Of_Passengers + "</a>"; 
                      } 
         }, 
         { 
          "data": "StatusDescription", "name": "Status", "autoWidth": true, 'render': 
           function (StatusDescription, mData, type, row) { 
            return "<a href='/Home/EditEmployee?id=" + type.ID + "' id='modal1' >" + type.StatusDescription + "</a>"; 
                      } 
         }, 
         { 
          "data": "TextMsg", "name": "LDM", "autoWidth": true, 'render': function (TextMsg, mData, type, row) { 


           return "<a href='/Home/EditEmployee?id=" + type.ID + "'id='modal1' >" + type.TextMsg + "</a>"; 
          } 
         }, 
         { 
          "data": "AddedOn", "name": "AddedOn", "autoWidth": true, "type": "date", 


          "render": function (value, AddedOn, mData, type, row) { 
           if (value === null) return ""; 
           var pattern = /Date\(([^)]+)\)/; 
           var results = pattern.exec(value); 
           var dt = new Date(parseFloat(results[1])); 
           //var d = new Date(); 
           var MonthIndex = dt.getMonth(); 
           var monthnames = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"); 
           var imonth = monthnames[MonthIndex]; 

           return "<a href='/Home/EditEmployee?id=" + mData.ID + "' id='modal1' >" + dt.getDate() + " " + imonth + " " + dt.getFullYear() + "</a>"; 
           //return (dt.getDate() + " " + imonth + " " + dt.getFullYear()); 
          } 
         }, 
         { 
          "data": " ", "autoWidth": true, 'sortable': false, 


        "mRender": function (value, AddedOn, mData, type, row) { 

         if (mData.StatusDescription == "Tkt. info. missing") 
         { 
          return "<a href='/Home/Ticket?id=" + mData.ID + "' id='modal2' class='btn btn-primary btn' style='background-color:rgb(255,95,1);border-color:rgb(255,95,1);color:white;' >Miss Tkts</a>"; 
         } 
         else { 
          return "Completed"; 
         } 

        } 
       }, 
         { 
          "data": " ", "autoWidth": true, 'sortable': false, 


          "mRender": function (value, AddedOn, mData, type, row) { return '<button class="btn btn-primary btn" style="background-color:rgb(255,95,1);border-color:rgb(255,95,1);color:white;" type="submit" name="Command" value="' + mData.ID + '" > Preview </button>'; } 
         } 
       ] 
      }); 

而且我Controlller代碼是在這裏：

[HttpPost] 
     public ActionResult LoadData() 
     { 
      cnUCR cn = new cnUCR(); 
      IEnumerable<usp_FlightsStatusGrid_Result> flightinfo; 
      int suserid = Convert.ToInt32(Session["ID"]); 
      flightinfo = cn.usp_FlightsStatusGrid(suserid).Where(x => x.StatusID == 5).ToList(); 
      var idFilter = Convert.ToString(Request["txtStation"]); 
      // var StationName = Request.Form.GetValues("columns[0][search][value]").FirstOrDefault(); 
      // var FlightNo = Request.Form.GetValues("columns[1][search][value]").FirstOrDefault(); 
      var istatus = Request.Form.GetValues("columns[2][search][value]").FirstOrDefault(); 
      // var Flightdate = Request.Form.GetValues("columns[3][search][value]").FirstOrDefault(); 
      var draw = Request.Form.GetValues("draw").FirstOrDefault(); 
      var start = Request.Form.GetValues("start").FirstOrDefault(); 
      var length = Request.Form.GetValues("length").FirstOrDefault(); 
      var sortColumn = Request.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault(); 
      var sortColumnDir = Request.Form.GetValues("order[0][dir]").FirstOrDefault(); 
      //var contactName = Request.Form.GetValues("columns[0][search][value]").FirstOrDefault(); 
      int pageSize = length != null ? Convert.ToInt32(length) : 0; 
      int skip = start != null ? Convert.ToInt32(start) : 0; 
      int recordsTotal = 0; 
      recordsTotal = flightinfo.Count(); 
       var data = flightinfo.Skip(skip).Take(pageSize).ToList(); 
       return Json(new { draw = draw, recordsFiltered = recordsTotal, recordsTotal = recordsTotal, data = data }, JsonRequestBehavior.AllowGet); 
      } 
     } 

當我們運行這個項目我的數據沒有加載到表中，並給我一個提醒信息 提示信息是在這裏： DataTables警告：表id = mytable：Ajax errror。有關此錯誤的更多信息，請參閱：http://datatales.net/tn/7 本地其工作良好，但在服務器方面它給出了此錯誤

Answer 1

我認爲，問題是如何將每列映射到對象字段。 如果您返回對象數組，則應將每列映射到對象字段。
列初始化中的「data」字段應該是屬性的名稱。

例如，更換：

"data": " ", "autoWidth": true, 'sortable': false, 

與

"data": "ID", "autoWidth": true, 'sortable': false, 

我想，這樣的事情：

var arrayOf_flightinfo = [ { "field1": "a", "field2": "b", "field3": "c" }, 
          { "field1": "d", "field2": "e", "field3": "f" }, 
          { "field1": "g", "field2": "h", "field3": "i" }, 
          { "field1": "j", "field2": "k", "field3": "l" } 
         ]; 

$('#table_FligthInfo').DataTable({ 
    aoColumnDefs: [ 
       { "aTargets": [0], "name": "field1", "title": "Field 1", "data": "field1" }, 
       { "aTargets": [1], "name": "field2", "title": "Field 2", "data": "field2" }, 
       { "aTargets": [2], "name": "field3", "title": "Field 3", "data": "field3" } 
      ], 
    aaData: arrayOf_flightinfo 
}); 

我留下幾個例子數據表之間的整合和.Net上的https://github.com/llorentegerman/DataTablesNet，可能會幫助你。