jQuery Datatables - 未填充Ajax响应的表

时间:2013-02-12 09:42:39

标签: javascript jquery datatables

我正在尝试将jquery数据表与服务器端处理集成到一个UI组件中。请求url返回一个json。 JSON格式正确,并在jsonlint上传递验证。

这是从firebug获取的典型json响应。

{
    "sEcho": 1,
    "iTotalRecords": 6416,
    "iTotalDisplayRecords": 5,
    "aaData": [
        {
            "0": 421367,
            "1": "Test1",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
        },
        {
            "0": 421368,
            "1": "Test2",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
        },
        {
            "0": 421369,
            "1": "Test3",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:12 GMT",
            "5": "TestBench",
            "6": "NA"
        },
        {
            "0": 421370,
            "1": "Test4",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
        },
        {
            "0": 421371,
            "1": "Test5",
            "2": "NEW",
            "3": "Default",
            "4": "18 Aug 2011 20:27:13 GMT",
            "5": "TestBench",
            "6": "NA"
        }
    ]
} 

脚本:

 $(document).ready(function() {
   var thisTable;  
    thisTable = $('#events').dataTable( {
      "bProcessing": true,
      "bServerSide": true,
      "bJQueryUI": true,
      "sPaginationType": "full_numbers",
      "sAjaxSource": "http://localhost:9000/dt/data/all"
    });
  });

我在屏幕上看到处理窗口,它不会停止。该表仍然是空的。

我在这里遗漏了什么吗?

它是sEcho的问题吗?因为我看到了处理窗口。

2 个答案:

答案 0 :(得分:2)

我遇到了同样的问题,即处理消息从未停止,但是后期响应没有任何错误。我检查了POST数据,我的错误是在更改页码后浏览器发送到服务器sEcho = 2(如果点击第2页)但我的服务器端代码仍然发送​​回浏览器sEcho = 1,因此导致错误。我从请求参数中获取了正确的sEcho值并将其放入我的json响应数据中,现在它工作正常!!

String sEcho = request.getParameter(“sEcho”);

答案 1 :(得分:1)

我认为您的设置需要一组数组。你的数据是一个对象数组。所以你必须使用“aoColumns”选项(http://www.datatables.net/release-datatables/examples/ajax/objects.html

所以我认为它应该是这样的:

$(document).ready(function() {
    var thisTable;  
    thisTable = $('#events').dataTable( {
        "bProcessing": true,
        "bServerSide": true,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sAjaxSource": "http://localhost:9000/dt/data/all"
        "aoColumns": [
            { "mData": "0" },
            { "mData": "1" },
            { "mData": "2" },
            { "mData": "3" },
            { "mData": "4" },
            { "mData": "5" },
            { "mData": "6" },
        ]
    });
});

这个小提琴似乎对我有用(但我无法测试sAjaxSource属性,因为它需要我无法访问的网址)http://jsfiddle.net/thomasjonas/jW7uC/1/