Creating datatables from Javascript source

Question

I am trying to build a datatable (1.10.7) based on an input of a javascript var filled with JSON data. While I've successfully used datatables with ajax sources, I've never attempted to just provide my own variable, but I need to in this case.

Here's my variable:

json = [
 {"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
 ]

According to DataTables' page on Javascript-Sourced Data,

This is achieved using the dataDT option in the initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the columns.dataDT option).

I'm confused by the differences in their test string, and in mine:

var dataSet = [
    ['Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['Trident','Internet Explorer 5.0','Win 95+','5','C'],
    ['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
    ['Trident','Internet Explorer 6','Win 98+','6','A'],
    ['Trident','Internet Explorer 7','Win XP SP2+','7','A']

Namely, their test variable doesn't contain field names, while mine does.

Here is the code that I've written to try and parse my variable, json:

var table = $('#ltc-table').DataTable( {    
    "data" : json,        
    "columns" : [
      { "title" : "designCustomer" },
      { "title" : "designCutomerLocation" },
      { "title" : "dateReceived" },
  ],
  "lengthMenu": [ 25, 50, 101 ],
  "oLanguage": {
  "sSearch": "Filter Results: "
  }
});

It seems, based on the page I linked above, that I'm doing this correctly, but I'm getting errors instead:

Uncaught Error: DataTables warning: table id=ltc-table - Requested unknown parameter '0' for row 0.

Any tips?

dreyescat · Accepted Answer · 2015-05-28 19:34:43Z

2

If you want to use objects as data source instead of arrays, you need to bind the columns using the columns.data options:

json = [
 {"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"2016-04-05","designCustomer":"MULTITEST 2","designCustomerLocation":"SUNNYVALE, CA"},
 {"dateReceived":"1982-04-18","designCustomer":"MULTITEST 3","designCustomerLocation":"SUNNYVALE, CA"}
];

var table = $('#ltc-table').DataTable( {    
    "data" : json,        
    "columns" : [
      { "data" : "designCustomer" },
      { "data" : "designCustomerLocation" },
      { "data" : "dateReceived" }
  ],
  "lengthMenu": [ 25, 50, 101 ],
  "oLanguage": {
  "sSearch": "Filter Results: "
  }
});

See demo

answered May 28, 2015 at 19:34

dreyescat

13.9k5 gold badges52 silver badges38 bronze badges

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

4 Comments

Brian Powell Over a year ago

Yeah this is totally accurate... your fiddle works perfectly. I wonder why I'm still getting errors even after changing title to data. Now I'm getting Uncaught Error: DataTables warning: table id=ltc-table - Requested unknown parameter 'designCustomer' for row 0. , but right above it in my console.log I clearly see "designCustomer":"MULTITEST 1",

dreyescat Over a year ago

Probably the spelling. Check your spelling in the columns.data matches the fields names in the json.

Brian Powell Over a year ago

They match perfectly.

Brian Powell Over a year ago

I don't understand this. If I create a variable on the same page : json = [{"dateReceived":"2015-01-01","designCustomer":"MULTITEST 1" etc..., it works, but it doesn't work if I pass json from another page - even though console.log(json) reads the EXACT same text as I'm putting into the variable on this second page. Arrghhhh

Collectives™ on Stack Overflow

Creating datatables from Javascript source

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related