jQuery Datatables - Table not populated for Ajax response

Question

I'm trying to integrate jquery datatables with server side processing into one of the UI components. The request url returns a json. The JSON is well formed and passes validation on jsonlint.

Here's a typical json response fetched from firebug.

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

Script:

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

I see processing window on the screen and it won't stop. The table is still empty.

Am I missing anything here?

Is it a problem it sEcho? Since I am seeing processing window all through.

Yes, I tried specifying columns with mdata initially. It didn't work, so changed back to 0,1,2,3 default notation. — Slick
– Slick, Commented Feb 12, 2013 at 9:53

Massimiliano Brenna · Accepted Answer · 2013-03-28 10:59:29Z

2

I have had the same problem, i.e. the processing message never stop but the post response was without any errors. I have checked the POST data, and my mistake was that after change page number the browser sent to server sEcho=2 (if click page 2) but my server side code still sent back to the browser sEcho=1, so causing the mistake. I have taken the correct sEcho values from request parameters and put it into my json response data, and now It works fine!!

String sEcho =request.getParameter("sEcho");

answered Mar 28, 2013 at 10:59

Massimiliano Brenna

213 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

thomasjonas · Accepted Answer · 2013-02-12 10:20:44Z

1

I think your settings expect an array of arrays. You're data is an array of objects. So you have to use the "aoColumns" option (http://www.datatables.net/release-datatables/examples/ajax/objects.html)

So I think it should be something like this:

$(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" },
        ]
    });
});

This fiddle seems to work for me (but I can't test the sAjaxSource property since it expects an url I can't access) http://jsfiddle.net/thomasjonas/jW7uC/1/

answered Feb 12, 2013 at 10:20

thomasjonas

4801 gold badge5 silver badges19 bronze badges

7 Comments

Slick Over a year ago

Thanks for the response. I have tried with and without mData - I still get the empty table :-(. Processing window stays open all the time though. Firebug shows get as successful (200 OK).

Slick Over a year ago

Nope. Only the success response. (200 OK 89ms)

thomasjonas Over a year ago

Did you check if the sEcho parameter from the request is the same as the sEcho parameter that returned from the server? I'm not sure what it might be otherwise... Does a .txt file with the same JSON data work?

Slick Over a year ago

Thanks for the idea. Yes, test file works. So I guess, the issue is with ajax URL. Will try to figure out. GET using browsers/rest client plugin works perfect though.

thomasjonas Over a year ago

What's the content-type of the response? Is it application/json?

|

Collectives™ on Stack Overflow

jQuery Datatables - Table not populated for Ajax response

2 Answers 2

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related