CODEWITHSUNDEEP
jqueryajaxdatatable
RoyBarOn
RoyBarOn

Reputation: 987

DataTables ajax don't work

I have This table which i'm trying to add ajax by adding this code :

$('#example').DataTable({
    'serverSide': true,
    "bPaginate": false,
    "info": false,
    "iDisplayLength":20,
    "bLengthChange":false,
    'ajax': {
        type: 'GET',
        'url': 'https://api.myjson.com/bins/ftw5f',
        'data': function(data) {
            return data;
        }
    },
    "columns": [{
        "data": 'Name'
    }, {
        "data": 'Position'
    }, {
        "data": 'Office'
    },
        {
            "data": 'Age'
        },
        {
            "data": 'Start date'
        },
        {
            "data": 'Salary'
        },

    ],

    initComplete: function () { // the filters });

When it's hard coded - like in fiddle - it's working - but when i add the ajax - and remove all the hard coded tr's - the filters don't work.... i checked the console for errors - but there are none.... thanks.

Upvotes: 0

Views: 635

Answers (2)

kennasoft
kennasoft

Reputation: 1593

I believe your problem is with the property 'serverSide': true. Once you set this, the search is no longer happening on the client, but on the server, hence you need to write server-side code to handle the search and return a subset of results. If you want to get data from an ajax source, and still process on the client, just delete the serverSide flag.

See working fiddle here

Upvotes: 1

Wesley Smith
Wesley Smith

Reputation: 19571

Your columns declaration is incorrect, the right side should be the key whose value should appear in that column not a label for that column.

If your data is like:

{
  name: '',
  position: '',
  office: '',
  age: '',
  start_date: '',
  salary: '',
}

Then columns should look like:

"columns": [{
    "data": 'name'
  }, {
    "data": 'position'
  }, {
    "data": 'office'
  }, {
    "data": 'age'
  }, {
    "data": 'start_date'
  }, {
    "data": 'salary'
  },
],

See the docs for more info: https://datatables.net/manual/ajax#Column-data-points

Upvotes: 1

Related Questions