Binding Data Table using ajax jquery

Question

I am binding a Data table using ajax and jquery. But i am getting an error like "DataTables warning: table id=datatable - Invalid JSON response."

                         $(document).ready(function () {
                             $.ajax({
                             type: "post",
                             url: "../../loader.svc/gettabledata",
                             data: '{}',
                             contenttype: "application/json; charset=utf-8",
                             datatype: "json",
                             success: onsuccess,
                             failure: function (response) {
                             alert(response.d);
                              },
                             error: function (response) {
                             alert(response.d);
                             }
                             });
                             });
                      function onsuccess(responce) {
                       $('#datatable').DataTable(
                       {
                        "ajax":
                         {
                          "datasrc": function (responce) {
                      
                            var jsonObj;
                             jsonObj = $.parseJSON(responce.d)
                       
                               return jsonObj.d;
                               }
                              },
                           "columns": [
                           { "data": "ID" },
                           { "data": "customername" },
                           { "data": "LoginName" }
                             ]
                            });

                           }

Response text: [{"ID":1,"CustomerName":"John","LoginName":"John"}]"

Check in browser DevTools that server returns valid JSON. Docs might also help. — fen1x
– fen1x, Commented Feb 5, 2021 at 6:33

andrewJames · Accepted Answer · 2021-02-05 14:24:09Z

You have two ajax calls (the jQuery call and then the DataTables call), where only one ajax call is needed.

If you want to fetch your data using the jQuery ajax call, you can pass that data to DataTables using the DataTables data option. To do this, you need to replace the DataTables ajax section with the data option.

Because I do not have your JSON provider for testing, I will use the publicly available "jsonplaceholder" URL:

$(document).ready(function() {

  $.ajax({
    method: "GET",
    url: "https://jsonplaceholder.typicode.com/posts",
    //data: '{}', 
    //contenttype: "application/json; charset=utf-8",
    //datatype: "json",
    success: onsuccess,
    failure: function (response) {
      alert(response.d);
    },
    error: function (response) {
      alert(response.d);
    }
  });

});

function onsuccess(response) {
  //console.log(response);
  $('#example').DataTable( {
    "data": response, // this passes your data to DataTables
    "columns": [
      { "title": "User ID", "data": "userId" },
      { "title": "ID", "data": "id" },
      { "title": "Title", "data": "title" }
    ]
  } );
}

Note that the following three lines...

data: '{}', 
contenttype: "application/json; charset=utf-8",
datatype: "json",

...are not strictly required for my demo to work.

If you prefer, you can simplify the above approach by using only the DataTables ajax call. In this case you need to use dataSrc in the ajax section of your DataTable definition:

$(document).ready(function() {

  var table = $('#example').DataTable( {
    ajax: {
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/posts",
      dataSrc: ""
    },
    "columns": [
      { "title": "User ID", "data": "userId" },
      { "title": "ID", "data": "id" },
      { "title": "Title", "data": "title" }
    ]
  } );

} );

This gives the same result as my first example.

Minor point: you have a small typo here in your question:

"datasrc": function (responce)

It should be dataSrc not datasrc.

Collectives™ on Stack Overflow

Binding Data Table using ajax jquery

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