DataTable的jQuery插件实现

Question

我不断收到从数据表JQ插件“无效JSON响应”， 我米，AJAX调用一起张贴我的webmethod和HTML结构， 我怀疑我的Web方法不序列化到JSON格式正确，但当我测试格式时，我发现它是有效的（http://jsonlint.com/）。我无法弄清楚这里的问题

<WebMethod()> _ 
<ScriptMethod(ResponseFormat:=ResponseFormat.Json, UseHttpGet:=False, XmlSerializeString:=False)> _ 
Public Function SrcTblRegx() 
    Dim constr As String = ConfigurationManager.ConnectionStrings("ARTSQLConStrng").ConnectionString 
    Using con As New SqlConnection(constr) 
     Using cmd As New SqlCommand("TblRegSearchx", con) 
      cmd.CommandType = CommandType.StoredProcedure 
      cmd.Connection = con 
      Dim ds As New DataSet() 
      Using sda As New SqlDataAdapter(cmd) 
       sda.Fill(ds) 
      End Using 
      Dim jsondata As String = JsonConvert.SerializeObject(ds) 
      Return jsondata 
     End Using 
    End Using 
End Function 

将WebMethod输出是

<anyType xmlns:q1="http://www.w3.org/2001/XMLSchema" xmlns:d1p1="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://tempuri.org/" d1p1:type="q1:string"> 
 
{"Table":[{"Filenum":15112777,"FullName":"marwam saleh moh saleem","DOB":"2015-11-26T00:00:00"}]} 
 
</anyType>

<table id="RegSrc2" class="table table-bordered table-striped"> 
          <thead> 
           <tr> 
            <th><b>File Number</b></th> 
            <th><b>Patient Name</b></th> 
            <th><b>DOB</b></th> 
           </tr> 

          </thead> 
          <tbody></tbody> 
          <tfoot> 
           <tr> 
            <th><b>File Number</b></th> 
            <th><b>Patient Name</b></th> 
            <th><b>DOB</b></th> 
           </tr> 
          </tfoot> 
         </table> 

$(document).ready(function() { 
        var $table = $('#RegSrc2'); 
        $table.dataTable({ 
         bProcessing: true, 
         "serverSide": true, 
         "sAjaxSource": $table.data('../CONFIG/WebSerTblsSearch.asmx/SrcTblRegx'), 
        }) 
       }); 

余米太加入我的网络浏览器错误

jquery.dataTables.js:3929 Uncaught TypeError: Cannot set property 'data' of null 
 
    at _fnBuildAjax (jquery.dataTables.js:3929) 
 
    at _fnAjaxUpdate (jquery.dataTables.js:3946) 
 
    at _fnDraw (jquery.dataTables.js:3409) 
 
    at _fnReDraw (jquery.dataTables.js:3528) 
 
    at _fnInitialise (jquery.dataTables.js:4710) 
 
    at loadedInit (jquery.dataTables.js:1320) 
 
    at HTMLTableElement.<anonymous> (jquery.dataTables.js:1332) 
 
    at Function.each (jquery-2.1.4.js:374) 
 
    at jQuery.fn.init.each (jquery-2.1.4.js:139) 
 
    at jQuery.fn.init.DataTable [as dataTable] (jquery.dataTables.js:869)

Answer 1

这是我这样做的方式。我使用帖子取得了更多的成功，而不是使用Web服务获得成功。另外，因为你的web服务正在序列化（我以同样的方式执行），json对象最终被序列化了两次。此外，数据表预计数据将以{data：[您的数据]}和Web服务返回{d：[数据序列化}}的形式出现，您必须对客户端进行调整。这是我如何做到的。

$(document).ready(function() { 

     $('#example').DataTable({ 

      "processing": false, 
      // since you are getting all the data at once set serverSide to 
      // false, otherwise using the built in search and paging will trigger 
      // more ajax calls to get the same data. 
      "serverSide": false, 
      "ajax": { 

       // returning the data from the server as json data 
       contentType: "application/json; charset=utf-8", 
       // assuming your url is right.... 
       url: "../CONFIG/WebSerTblsSearch.asmx/SrcTblRegx", 
       type: "Post", 

      // You are not sending parameters to the server so next line commented out 
       data: function (dtParms) { 
        return JSON.stringify({ SrchTxt: "your search string" }); 
       }, 
       dataFilter: function (res) { 

        // do what you need to the data before it loads to the table 
        // first deserialization 
        var parsed = JSON.parse(res); 
        // now you can access the data in d and deserialize that 
        var morp = JSON.parse(parsed.d); 

        // reserialize to what datatables expect. 
        return JSON.stringify({ data: morp }); 
       }, 
       error: function (x, y) { 

        console.log(x); 

       } 
      }, 
      columns:[ 
       {data:"Filenum"}, 
       {data: "FullName"}, 
       {data:"DOB"}] 

     }); 

    }); 

Answer 2

我对上面的代码做了更改，我使用datatable而不是数据集。

此代码序列化的数据表

Public Function DataTableToJSONWithJavaScriptSerializer(table As DataTable) As String 
    Dim jsSerializer As New JavaScriptSerializer() 
    Dim parentRow As New List(Of Dictionary(Of String, Object))() 
    Dim childRow As Dictionary(Of String, Object) 
    For Each row As DataRow In table.Rows 
     childRow = New Dictionary(Of String, Object)() 
     For Each col As DataColumn In table.Columns 
      childRow.Add(col.ColumnName, row(col)) 
     Next 
     parentRow.Add(childRow) 
    Next 
    Return jsSerializer.Serialize(parentRow) 
End Function 

价：http://www.c-sharpcorner.com/UploadFile/9bff34/3-ways-to-convert-datatable-to-json-string-in-Asp-Net-C-Sharp/

服务器侧处理中，的webmethod（存储过程）

<WebMethod()> _ 
 
<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _ 
 
     Public Function SrcTblReg(ByVal SrchTxt As String) 
 
     
 
     Dim constr As String = ConfigurationManager.ConnectionStrings("ARTSQLConStrng").ConnectionString 
 
    Using con As New SqlConnection(constr) 
 
     Using cmd As New SqlCommand("TblRegSearch", con) 
 
      cmd.CommandType = CommandType.StoredProcedure 
 
      If (String.IsNullOrEmpty(SrchTxt)) Then 
 
       cmd.Parameters.Add("@Searchtxt", SqlDbType.NVarChar).Value = DBNull.Value 
 
      Else 
 
       cmd.Parameters.Add("@Searchtxt", SqlDbType.NVarChar).Value = SrchTxt.Trim() 
 
      End If 
 
       cmd.Connection = con 
 
       Using sda As New SqlDataAdapter(cmd) 
 
        Dim dt As New DataTable() 
 
        sda.Fill(dt) 
 
        Dim sJSON = DataTableToJSONWithJavaScriptSerializer(dt) 
 
        Return sJSON 
 
       End Using 
 
       'Dim jsondata As String = JsonConvert.SerializeObject(ds) 
 
       'Return jsondata 
 
      End Using 
 
     End Using 
 
    End Function

最后客户端由Bindrid提供。

$(document).ready(function() { 

    $('#example').DataTable({ 

     "processing": false, 
     // since you are getting all the data at once set serverSide to 
     // false, otherwise using the built in search and paging will trigger 
     // more ajax calls to get the same data. 
     "serverSide": false, 
     "ajax": { 

      // returning the data from the server as json data 
      contentType: "application/json; charset=utf-8", 
      // assuming your url is right.... 
      url: "../CONFIG/WebSerTblsSearch.asmx/SrcTblRegx", 
      type: "Post", 

     // You are not sending parameters to the server so next line commented out 
      data: function (dtParms) { 
       return JSON.stringify({ SrchTxt: "your search string" }); 
      }, 
      dataFilter: function (res) { 

       // do what you need to the data before it loads to the table 
       // first deserialization 
       var parsed = JSON.parse(res); 
       // now you can access the data in d and deserialize that 
       var morp = JSON.parse(parsed.d); 

       // reserialize to what datatables expect. 
       return JSON.stringify({ data: morp }); 
      }, 
      error: function (x, y) { 

       console.log(x); 

      } 
     }, 
     columns:[ 
      {data:"Filenum"}, 
      {data: "FullName"}, 
      {data:"DOB"}] 

    }); 

});