jQuery DataTables Ajax GET json formatting

Question

I am using JQuery DataTables to show tabular data.

I am using the following code for the GET ajax request:

$(document).ready(function() {
  var table = $('#data_table').DataTable( {
    ajax: {
        type: 'GET',
        url: url_path,
        data: {'data_id':data_id},
        success: function(data) {
            #here is where I am not sure how to populate the table with the data
            for (var i = 0; i < data.length; i++) {
                $.each(data[i], function(name, value) {
                    console.log(name + ": " + value);
                });
            }
        }
    }
} );

example console output:

>>obj1_property1: value1 #to go in table row 1 column 1
>>obj1_property2: value2 #to go in table row 1 column 2
>>obj2_property1: value1 #to go in table row 2 column 1
>>obj3_property2: value2 #to go in table row 2 column 2

From the ajax request I get an array of objects and I can get their name and value properties from the code inside the success function. But I can't work out how to populate the DataTable with this data.

The example I have found here: https://datatables.net/examples/ajax/objects.html shows to use:

"ajax": "data/objects.txt",
    "columns": [
        { "data": "name" },

But I can't work out how to tailor this to the specific example I have provided - where and how would I specify 'columns' in my example returning an array of objects?

Does you returned json of the format { "data": [ ... your objects here ...] } From your example output it doesn't look that way. — backpackcoder
– backpackcoder, Commented Jan 28, 2017 at 9:14
@backpackcoder with code as above output is of the form proprty1: value1, if I replace the code in the success function with: console.log(data) I get [Object, Object, Object] each of these objects should represent a row. Thanks — Don Smythe
– Don Smythe, Commented Jan 28, 2017 at 9:24

backpackcoder · Accepted Answer · 2017-01-28 10:31:19Z

2

You will need to add the columns option with the data option to you Datatables initialization option. You also will need to return JSON that is a single object with your data array contained in the "data" field (see below). Also remove the success option from the ajax option since that requires you to explicitly make a call to draw the table. It's used if you need to post process data from a request. This fiddle should help https://jsfiddle.net/backpackcoder/fv95dzxs/. Because I used post for the /echo/json call, my ajax data object puts the returned JSON in the data param instead of your id.

You'll want you're returned data to have this format.

{
    "data": [{
      "col1": "data1",
      "col2": "data2",
      "col3": "data3",
    }, {
      "col1": "data4",
      "col2": "data5",
      "col3": "data6",
    }]
  }

answered Jan 28, 2017 at 10:31

backpackcoder

3271 silver badge7 bronze badges

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

Collectives™ on Stack Overflow

jQuery DataTables Ajax GET json formatting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related