Jquery plugins jQuery数据表服务器端处理和ASP.Net

我正在尝试将jQuery Datatables插件的服务器端功能与ASP.Net结合使用。ajax请求返回有效的JSON，但表中没有显示任何内容

我最初在ajax请求中发送的数据有问题。我收到一个“无效”错误。我发现数据需要是字符串，而不是JSON序列化，如本文所述：。我不太确定如何解决这个问题，所以我尝试在ajax请求中添加以下内容：

"data": "{'sEcho': '" + aoData.sEcho + "'}"

如果上述方法最终奏效，我将在以后添加其他参数。现在我只是想在我的桌子上找点东西

返回的JSON看起来正常并进行验证，但是post中的sEcho没有定义，我认为这就是为什么没有数据加载到表中

那么，我做错了什么？我是在正确的轨道上，还是我很愚蠢？以前有没有人遇到过这个问题，或者有什么建议

以下是我的jQuery：

$(document).ready(function()
{

    $("#grid").dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bServerSide":true, 
            "sAjaxSource": "GridTest.asmx/ServerSideTest", 
            "fnServerData": function(sSource, aoData, fnCallback) {
               $.ajax({
                    "type": "POST",
                    "dataType": 'json',
                    "contentType": "application/json; charset=utf-8",
                    "url": sSource, 
                    "data": "{'sEcho': '" + aoData.sEcho + "'}",
                    "success": fnCallback
                });
           }
         });


 });

HTML:

我将数据更改为

"data": "{'sEcho': '"+ aoData[0].value + "'}",

---

它成功了。所以现在的问题是如何将其余的数据传递给Web服务。我尝试使用JSON2将JSON转换为字符串，但这又带来了另一个麻烦，这是另一个问题。

我一直在做同样的事情，我的一个朋友帮助我完成了这一部分。这段代码是C语言的，但是你应该可以把它移植过来

jQuery代码：

<script type="text/javascript">
        $(document).ready(function() {
            function renderTable(result) {
                var dtData = [];
                // Data tables requires all data to be stuffed into a generic jagged array, so loop through our
                // typed object and create one.
                $.each(result, function() {
                    dtData.push([
                           this.FirstName,
                           this.LastName,
                           this.Sign
                        ]);
                });

                $('#grid').dataTable({
                    'aaData': dtData,
                    "bJQueryUI": true
                });
            }

            // Make an AJAX call to the PageMethod in the codebehind
            $.ajax({
                url: '<%= Request.Url.AbsolutePath %>/ServerSideTest',
                data: '{}',
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function(result) {
                    // Call the renderTable method that both fills the aaData array with data and initializes the DataTable.
                    renderTable(result.d);
                },
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest + ": " + textStatus + ": " + errorThrown);
                }
            });
        });
    </script>

$（文档）.ready（函数（）{
函数可渲染（结果）{
var dtData=[]；
//数据表要求将所有数据填充到一个通用的锯齿状数组中，所以循环我们的
//键入对象并创建一个。
$.each（结果，函数（）{
dtData.push([
这个名字，
这个姓，
这个，签名
]);
});
$（'#网格'）。数据表({
“aaData”：dtData，
“bJQueryUI”：真的吗
});
}
//在codebehind中对PageMethod进行AJAX调用
$.ajax({
url:“/ServerSideTest”，
数据：“{}”，
键入：“POST”，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
成功：功能（结果）{
//调用renderTable方法，该方法用数据填充aaData数组并初始化DataTable。
可渲染（结果d）；
},
错误：函数（XMLHttpRequest、textStatus、errorshown）{
警报（XMLHttpRequest+“：”+textStatus+“：”+ErrorSwink）；
}
});
});

aspx代码：

<table id="grid" width="100%">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Sign</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td colspan="5" class="dataTables_empty">Loading data from server</td>
            </tr>
        </tbody>
    </table>

名字
姓
签名
从服务器加载数据

代码隐藏：

// to serialize JSON in ASP.NET, it requires a class template.
    [Serializable]
    public class Data
    {
        // Yay for 3.5 auto properties
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Sign { get; set; }
    };

    [WebMethod]
    public static List<Data> ServerSideTest()
    {
        List<Data> DataList = new List<Data>();

        Data thisData = new Data();
        thisData.FirstName = "Sol";
        thisData.LastName = "Hawk";
        thisData.Sign = "Aries";

        DataList.Add(thisData);

        Data thisData2 = new Data();
        thisData2.FirstName = "Mako";
        thisData2.LastName = "Shark";
        thisData2.Sign = "Libra";

        DataList.Add(thisData2);

        return DataList;
    }

//要在ASP.NET中序列化JSON，它需要一个类模板。
[可序列化]
公共类数据
{
//适用于3.5自动特性的Yay
公共字符串名{get；set；}
公共字符串LastName{get；set；}
公共字符串符号{get；set；}
};
[网络方法]
公共静态列表ServerSideTest（）
{
List DataList=新列表（）；
数据thisData=新数据（）；
thisData.FirstName=“Sol”；
thisData.LastName=“Hawk”；
thisData.Sign=“Aries”；
添加（此数据）；
数据thisData2=新数据（）；
thisData2.FirstName=“Mako”；
thisData2.LastName=“Shark”；
thisData2.Sign=“Libra”；
DataList.Add（thisData2）；
返回数据列表；
}

我希望这有帮助

---

对我来说，下一步就是让过滤、分页和排序工作起来。让我知道如果你让这些部件工作=）

你可能想看看zowen的解决方案。他做了一个数据表解析器，效果很好

---

希望这有帮助。

您的javascript代码中至少有两个问题：

“数据”：“{'sEcho'：'”+aoData[0]。值+“}”

乍得已经指出了这一点。这是获得sEcho的正确方法：

“success”：函数（msg）{fnCallback（msg.d）；}

如果您使用的是最新版本的.net（我相信是3.5及更高版本），则需要调整success函数以正确返回。阅读理解为什么你必须通过“msg.d”

以下是您的js代码更新：

$("#grid").dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bServerSide":true, 
        "sAjaxSource": "GridTest.asmx/ServerSideTest", 
        "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) {
                            fnCallback(msg.d);
                        }
            });
       }
     });

然后，为了在服务器端实现这一点，我不确定您需要在代码中更改什么（因为我不是VB爱好者），但我知道以下内容对我很有用（使用asmx Web服务）：

使用系统；
使用System.Web；
使用System.Web.Services；
使用System.Web.Services.Protocols；
使用System.Collections.Generic；
[WebService（命名空间=”http://tempuri.org/")]
[WebServiceBinding（ConformsTo=WsiProfiles.BasicProfile1_1）]
[System.Web.Script.Services.ScriptService]
公共类GridTest:System.Web.Services.WebService
{
[网络方法]
公共格式化列表服务器端测试（字符串sEcho）
{
var list=新格式化的列表（）；
list.sEcho=sEcho；
list.iTotalRecords=1；
list.iTotalDisplayRecords=1；
var item=新列表（）；
添加项目（“壁虎”）；
添加项目（“Firefox 1.0”）；
添加（“Win 98+/OSX.2+”）；
添加项目（“1.7”）；
项目.添加（“A”）；
list.aaData=新列表（）；
列表.aaData.Add（项目）；
退货清单；
}
}
公共类格式化列表
{
公共格式化列表（）
{
}
公共字符串sEcho{get；set；}
公共int iTotalRecords{get；set；}
公共int iTotalDisplayRecords{get；set；}
公共列表aaData{get；set；}
}

“FormattedList”类仅用于h

<table id="grid" width="100%">
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Sign</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td colspan="5" class="dataTables_empty">Loading data from server</td>
            </tr>
        </tbody>
    </table>

// to serialize JSON in ASP.NET, it requires a class template.
    [Serializable]
    public class Data
    {
        // Yay for 3.5 auto properties
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Sign { get; set; }
    };

    [WebMethod]
    public static List<Data> ServerSideTest()
    {
        List<Data> DataList = new List<Data>();

        Data thisData = new Data();
        thisData.FirstName = "Sol";
        thisData.LastName = "Hawk";
        thisData.Sign = "Aries";

        DataList.Add(thisData);

        Data thisData2 = new Data();
        thisData2.FirstName = "Mako";
        thisData2.LastName = "Shark";
        thisData2.Sign = "Libra";

        DataList.Add(thisData2);

        return DataList;
    }

$("#grid").dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bServerSide":true, 
        "sAjaxSource": "GridTest.asmx/ServerSideTest", 
        "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) {
                            fnCallback(msg.d);
                        }
            });
       }
     });

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Collections.Generic;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class GridTest : System.Web.Services.WebService
{

    [WebMethod]
    public FormatedList ServerSideTest(string sEcho)
    {
        var list = new FormatedList();

        list.sEcho = sEcho;
        list.iTotalRecords = 1;
        list.iTotalDisplayRecords = 1;

        var item = new List<string>();
        item.Add("Gecko");
        item.Add("Firefox 1.0");
        item.Add("Win 98+ / OSX.2+");
        item.Add("1.7");
        item.Add("A");
        list.aaData = new List<List<string>>();
        list.aaData.Add(item);

        return list;
    }

}

public class FormatedList
{
    public FormatedList()
    {
    }
    public string sEcho { get; set; }
    public int iTotalRecords { get; set; }
    public int iTotalDisplayRecords { get; set; }
    public List<List<string>> aaData { get; set; }
}