綁定jquery的數據表，以C＃WEBMETHOD

Question

我需要創建一個數據表（jquery的）結合AJAX（C＃的WebMethod）

1-的WebMethod返回JSON

public string GetProjects() 
    { 

     DataTable dt = new DataTable("ProjectData"); 
     string Conn = System.Configuration.ConfigurationManager.ConnectionStrings["GPS_TrackingConnectionString"].ConnectionString; 

     SqlConnection conn = new SqlConnection(Conn); 

     conn.Open(); 

     SqlCommand comm = new SqlCommand("SP_GetAll_Projects", conn); ///+ branch, conn); 
     comm.CommandType = CommandType.StoredProcedure; 

     dt.Load(comm.ExecuteReader()); 
     conn.Close(); 

     DataSet ds = new DataSet(); 
     ds.Tables.Add(dt); 
     JavaScriptSerializer js = new JavaScriptSerializer(); 
     //return ds.GetXml(); 
     //Context.Response.Write(js.Serialize(dt)); 
     var list = JsonConvert.SerializeObject(dt, 
Formatting.None, 
new JsonSerializerSettings() 
{ 
    ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore 
}); 

     return list; 
     // return (js.Serialize(dt)); 
    } 
} 

2-客戶端腳本

$(document).ready(function() { 
     $("#myTable").dataTable({ 
      "bJQueryUI": true, 
      "sPaginationType": "full_numbers", 
      "bServerSide": true, 
      "sAjaxSource": "Query.asmx/GetCars", 

      "fnServerData": function (sSource, aoData, fnCallback) { 
       $.ajax({ 
        "type": "POST", 
        "dataType": 'json', 
        "contentType": "application/json; charset=utf-8", 
        "url": sSource, 
        // "data": "{'sEcho': '" + aoData[0].value + "'}", 
        "success": function (msg) { 
         alert(msg.d); 
         fnCallback(msg.d); 
        } 
       }); 
      }, 
      "columns": [ 
     { "data": "Name" } 

      ] 

     }); 
    }); 

3 HTML

 <table id="myTable" width="100%"> 
      <thead> 
       <tr> 

        <th>Name</th> 

       </tr> 
      </thead> 

     </table> 

4 json結果

此XML文件似乎沒有任何與其關聯的樣式信息。文檔樹如下所示。 [{「id」：1，「Name」：「mh」，「StartDate」：null，「EndDate」：null}，{「id」：2，「Name」：「rf」，「StartDate」 null，「EndDate」：null}] 4-目前的情況 成功顯示正確數據的警報 但表不顯示數據我的問題是如何告訴數據表，表的列名是否轉到數據列名 NO控制檯錯誤

謝謝

Answer 1

試試這個

var Table1 = $('#myTable').DataTable({ 
     ajax: { 
      url: "Query.asmx/GetCars", 
      type: "POST", 
      "datatype": "json", 
      dataSrc: "" 
     }, 
     "columns": [ 
       { "data": "Name", "name": "Name" } 
     ], 
     "bDestroy": true, 
     "serverSide": true, 
     "pageLength": 25, 
     "processing": true, 
     "searching": false, 
     "bSort": false, 
    }); 




<table id="myTable" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
      </tr> 
     </thead> 
     <tbody></tbody></table> 

Answer 2

如果您的JSON響應是[{"id":1,"Name":"mh","StartDate":null,"EndDate":null},{"id":‌​2,"Name":"rf","Start‌​Date":null,"EndDate"‌​:null}]

改變您的代碼以

$(document).ready(function() { 
    $("#myTable").dataTable({ 
     "bJQueryUI": true, 
     "sPaginationType": "full_numbers", 
     "bServerSide": true, 
     "sAjaxSource": "Query.asmx/GetCars", 

     "fnServerData": function (sSource, aoData, fnCallback) { 
      $.ajax({ 
       "type": "POST", 
       "dataType": 'json', 
       "contentType": "application/json; charset=utf-8", 
       "url": sSource, 
       // "data": "{'sEcho': '" + aoData[0].value + "'}", 
       "success": function (msg) { 
        alert(msg.d); 
        fnCallback(msg.d); 
       } 
      }); 
     }, 
     "columns": [ 
     { data: 'id' }, 
     { data: 'Name' }, 
     { data: 'StartDate' }, 
     { data: 'EndDate' }] 
    }); 
});