Using column names with DataTables with AJAX data source

Question

I'm trying to upgrade my system to use 1.10 instead of 1.9 of DataTables and I'm trying to find a way to pass back the row contents using a JSON object instead of a list. Specifically instead of passing back data in the format [['data','data','data'],['data','data','data'],etc..] I want to put it in the format [['colA':'data','colB':'data','colC':'data']].

Right now I've got my AJAX function returning the data in that format and I'm trying to initialize with this code:

$("table").DataTable({
    "columnDefs": [
        {"name": "wo_status", "title": "wo_status", "targets": 0},
        //repeat for each of my 20 or so fields
    ],
    "serverSide": true,
    "ajax": "url/to/ajax/function"
});

The results are coming back from my AJAX function correctly but DataTables is trying to find an index of 0 in row 0 and failing to find it because my table cells are indexed by their column name instead of a numerical index. Does anyone know how to tell DataTables to use the column names specified in columnDefs (or in some other option I haven't found) instead of numerical indices?

Gyrocode.com · Accepted Answer · 2015-08-20 18:59:27Z

17

Use columns.data option to specify property names as shown below:

$("table").DataTable({
    "columns": [
        { "data": "colA", "name": "colA", "title": "colA" },
        { "data": "colB", "name": "colB", "title": "colB" },
        { "data": "colC", "name": "colC", "title": "colC" }
        //repeat for each of my 20 or so fields
    ],
    "serverSide": true,
    "ajax": "url/to/ajax/function"
});

answered Aug 20, 2015 at 18:59

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

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

3 Comments

user9008566 Over a year ago

Is this setup required in order to use the table.ajax.reload(); Ajax reload does not seem to work with column_def

Armitage2k Over a year ago

why do you have to define data, name and title? Wouldnt name be enough?

Gyrocode.com Over a year ago

@Armitage2k, you don't have to define name and title, they were in the original question. Usually data is enough.

ahmeti · Accepted Answer · 2017-02-04 08:04:07Z

13

Use forEach in fnServerParams function...

$("table").DataTable({

  "columns": [{
    "data": "colA"
  }, {
    "data": "colB"
  }, {
    "data": "colC"
  }],

  "serverSide": true,

  "ajax": "url/to/ajax/function",

  fnServerParams: function(data) {
      data['order'].forEach(function(items, index) {
          data['order'][index]['column'] = data['columns'][items.column]['data'];
    });
  },
});

answered Feb 4, 2017 at 8:04

ahmeti

5046 silver badges13 bronze badges

1 Comment

Ali Over a year ago

Thank you. you have shown the path of secret treasure

madzohan · Accepted Answer · 2017-11-09 17:36:51Z

1

Thanks @ahmeti I've updated your approach :)

ajax: {
        url: fetchUrl,
        data: function ( data ) {
            data['columns_map'] = {};
            data['columns'].forEach(function(item, index) {
                data['columns_map'][item.data] = data['columns'][index];
            });
            data['order'].forEach(function(item, index) {
                data['order'][index]['column'] = data['columns'][item.column]['data'];
            });
            return {"data": JSON.stringify(data)};
        }
    },

answered Nov 9, 2017 at 17:36

madzohan

11.8k9 gold badges43 silver badges68 bronze badges

Collectives™ on Stack Overflow

Using column names with DataTables with AJAX data source

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related