Search code examples
javascriptjquerydatatablepagination

Datatable pagination Filtereddata count and Total records count is not showing?

I am using data table plugin to fetch the records with server side processing to display it in the table. I have implemented ajax data update in search and paginations.

When the data returned to the table, the data Entries showing "Showing 0 to 0 of 0 entries (filtered from NaN total entries)", also in the pagination , it shows NAN .enter image description here

Here is my code :

var dataTable = $('#Error_log_table').DataTable({
  // Set up the initial DataTable configuration
  "processing": false,
  "serverSide": true,
  "lengthChange": false,
  "scrollX":true,  
  "pageLength": 5,

   
  "ajax": {
    "url": myurl`, 
    "type": 'POST', 
    "data": function(input) {
      let search_input ;
    if($('#Error_log_table_filter').is(':visible')
    ){
      search_input = document.querySelector('input[type=search]').value.trim()
    }
    else{
      search_input = ''
    }
    input.start_index = input.start + 1 || 1; // Start index for the records
    input.row_count = input.length || 5; // Number of records to fetch
     input.date = input_date;
     input.source = source;
    //  input.start_index = 1,
    //  input.row_count=5
   
    input.search = search_input
    },
    dataSrc : function(Res){          
      var Tabledata = Res.ExceptionInfo.map((data) => {
        var date_out = data.CREATEDTM.split(" ")[0];
        var date_finalout = moment(date_out).format("DD/MM/YYYY hh:mm A");                

        return {
          
          Err_id: data.ID,
          created_tm : date_finalout,
          fmsid:data.FMSID,
          userid:data.USERID,
          exceptionfrom:data.EXCEPTIONFROM,
          Err_des: data.ERRORDESCRIPTION,
          Err_log: data.ERRORLOG,
         
         
        };
      });
      return Tabledata
    },
    
  },
  
  
  
  columns: [
    {
      data: "Err_id",
    },
    {
      data: "created_tm",
    },
    {
      data: "fmsid",
    },
    {
      data: "userid",
    },

    {
      data: "exceptionfrom",
    },
    {
      data: "Err_des",
    },
    {
      data: "Err_log",
    },
    
  ]
 
});

Here is the sample output of the API call,

{ "list_info": { "has_more_rows": true, "start_index": 1, "get_total_count": "74", "row_count": 5 }, "ExceptionInfo": [ // JSON data here ] }

How can i fix this issue and get the proper total count and display the correct entries of data in the screen ??

Solution

  • As mentioned in the comments, you need to return the data in the format required by datatable.

    Other option is you can transform the data in the required format after it is received from API call.

    You can do something similar to this.

    $('#myTable').DataTable( {
    serverSide: true,
    ajax: {
        url: '/api/data',
        dataFilter: function(data){
            // Parse the returned API data and modify it the way datatable needs.
            var json = jQuery.parseJSON( data ); 
            json.recordsTotal = json.total;
            json.recordsFiltered = json.total;
            json.data = json.list;
 
            return JSON.stringify( json ); // return JSON string
        }
    }
} );