Datatable Jquery插件实现

时间:2017-04-26 21:43:21

标签: jquery asp.net vb.net datatables

我一直得到"无效的json响应"来自datatable Jq插件, 我发布我的webmethod和HTML结构以及AJAX调用, 我怀疑我的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输出

&#13;
&#13;
<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>
&#13;
&#13;
&#13;

<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'),
                    })
                });

我也在添加网页浏览器错误

&#13;
&#13;
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)
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分: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"}]

        });

    });

答案 1 :(得分:0)

我从上面的代码中做了更改,我使用数据表而不是数据集。

此序列化数据表的代码

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"}]

    });

});