jquery server-side datatable not wroking properly

Question

I added the server side jQuery data-table, Data from back-end coming correctly for all pagination, sorting etc. and also bind the data first time, but second time not replacing the content of data-table with new data.

Here is my JQuery code:

var table = $('#example').DataTable({
  "processing": true,
  "serverSide": true,                
  "ajax":
  {
    "url": "View_account.aspx/GetData",
    "contentType": "application/json",
    "type": "GET",
    "dataType": "JSON",
    "data": function (d) {
      return d;
    },
    "dataSrc": function (json) {
      json.draw = json.d.draw;
      json.recordsTotal = json.d.recordsTotal;
      json.recordsFiltered = json.d.recordsFiltered;
      json.data = json.d.data;
      var return_data = json;
      return return_data.data;
    }
  },
  "columns": [
    {
      "data": "tblRow",
      "render": function (data, type, row) {
        console.log(data)
        return data;
      }
    },
    { data: "cust_name" },
    { data: "status" },
    {
      data: "account_id",
      "render": function (data, type, row) {
        console.log(data)
        return '<td><a href="Add_Account.aspx?account_id=' + row.account_id + '"><i class="fa fa-pencil edt_icn" aria-hidden="true"></i></a></td>';
      }

    },
    {
      data: "account_id",
      "render": function (data, type, row) {
        console.log(data)
        return '<a href="#" onclick="deleteproject(\'' + row.account_id + '\' ,\'' + row + '\')"><i class="fa fa-trash delet_wrpr delt_icn" aria-hidden="true"></i></a>';
      }
    },
    {
      data: ".account_id",
      "render": function (data, type, row) {
        console.log(data)
        return "<input value='" + row.account_id + "' id='record" + row.account_id + "' name='record" + row.account_id + "' type='checkbox'>";
      }
    }
  ]
});

Please Help. Thank you in advance.

Answer 1

Try with "columnDefs"(datatables example) prop instead "columns" like:

var table = $('#example').DataTable({
  "processing": true,
  "serverSide": true,                
  "ajax":
  {
    "url": "View_account.aspx/GetData",
    "contentType": "application/json",
    "type": "GET",
    "dataType": "JSON",
    "data": function (d) {
      return d;
    },
    "dataSrc": function (json) {
      json.draw = json.d.draw;
      json.recordsTotal = json.d.recordsTotal;
      json.recordsFiltered = json.d.recordsFiltered;
      json.data = json.d.data;
      var return_data = json;
      return return_data.data;
    }
  },
  // HERE CHANGE
  "columnDefs": [
    {
      // HERE CHANGE ( COLUMN INDEX)  
      "targets": 0,
      "render": function (data, type, row) {
        console.log(data)
        return data;
      }
    },
    {
      "targets": 3,
      "render": function (data, type, row) {
        console.log(data)
        return '<td><a href="Add_Account.aspx?account_id=' + row.account_id + '"><i class="fa fa-pencil edt_icn" aria-hidden="true"></i></a></td>';
      }

    },
    {
      "targets": 4,
      "render": function (data, type, row) {
        console.log(data)
        return '<a href="#" onclick="deleteproject(\'' + row.account_id + '\' ,\'' + row + '\')"><i class="fa fa-trash delet_wrpr delt_icn" aria-hidden="true"></i></a>';
      }
    },
    {
      "targets": 5,
      "render": function (data, type, row) {
        console.log(data)
        return "<input value='" + row.account_id + "' id='record" + row.account_id + "' name='record" + row.account_id + "' type='checkbox'>";
      }
    }
  ]
});