Render datatable row in reactjs

rajdeepratan

I'm getting the data in response but can't add it the datatable row. Can anyone please help me out with this?

This is what I'm trying to do:

export default (id) => {

  if (!$.fn.dataTable) return;

  $('#'+id).DataTable({
    destroy: true,
    pageLength: 8,
    responsive: true,
    ordering: false,
    searching: false,
    info: true,
    lengthChange: false,
    stripeClasses: [],
    processing: true,
    serverSide: true,
    ajax: {
      url  : `${Config.baseUrl}/homepark/list?page_no=1&settingType=dashboard&isActive=1&categoryId=active-listings`,
      type : 'GET',
      "beforeSend" : function(xhr) {
        xhr.setRequestHeader('userToken',localStorage.getItem('accessToken'));
      },
      "dataSrc": function ( json ) {
        const data = json.response.users
        console.log('@@@', data);
        // data = data.row\````
      },
    },
  });
};

This is what I'm getting as a result from backend in json.response.users:

(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {name: "testt", data: "0"}
1: {name: "testt11", data: "1"}
2: {name: "testt11", data: "2"}
3: {name: "testt11", data: "3"}
4: {name: "testt11", data: "4"}
5: {name: "testt11", data: "5"}
6: {name: "testt11", data: "6"}
7: {name: "testt12", data: "7"}
8: {name: "testt13", data: "8"}
length: 9
__proto__: Array(0)

colin

Hi @rajdeepratan ,

It looks like there's two problems there - this example here shows how to solve both.

1. your data isn't under a "data" object, it's at the top level, so you want to set ajax.dataSrc to "" (see example).
2. as you're returning an array of objects, you need to tell DataTables how the columns match to the object's elements. See columns.data as in that example,

Cheers,

Colin

rajdeepratan

Thank You