Answers

• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  April 2017

  You would have to make use of server-side processing and use the ajax option as a function to override the Ajax request that DataTables makes. Instead of making an Ajax request, the function would get the data required and return it, as required in the server-side processing documentation.

  Having said that, you really shouldn't need to do that with only 2k records. Just make sure you have the deferRender option enabled. Only when you get to around 25k records would you need to start thinking about server-side processing, and at that point you wouldn't really want to have all of those records on the client-side anyway.

  Allan
• Sanith Varma Posts: 5Questions: 2Answers: 0

  April 2017

  Hi Allan
  As you suggested for 2k records server side is not required I am going with existing but how can I set DataTable My Total records. Based on Total records it should generate pagination. As I don't want to iterate 2k records at once. I will iterate 10 only. If you suggest me for paging then i can implement the rest of the Part.

  This is my code :
  var harvest_actors_api_table_grid_id ='harvestActorsTableGrid';
  var harvest_actor_handle_table;
  // API FUNCTIONALITIES
  $(document).ready(function() {
  try {
  harvest_actor_handle_table = $('#' + harvest_actors_api_table_grid_id).DataTable({
  "aoColumns": [
  null,
  null,
  null,
  { "bSortable": false }
  ],
  "aaSorting" : [ [ 2, 'desc' ] ],
  "deferRender": true
  });
  getHarveshHandles();
  setTimeout("jQuery('#apiSuccessDiv').hide();", 5000);
  setTimeout("jQuery('#apiErrorDiv').hide();", 5000);
  } catch (e) {
  alert("Exception raised at ready() in ruleApi file:" + e);
  }
  });

  function getHarvestActorsData() {
  var responseData='';
  try {
  jQuery.ajax({
  type : "POST",
  dataType : "json",
  url : getCompanyURIEndPoint(current_company_name)+HA_LIST_URI,
  async : false,
  success : function(data, status) {
  try {
  responseData= data;
  } catch (e) {
  alert(e);
  }
  },
  error : function(jqXHR, textStatus, errorThrown) {
  responseData= '';
  alert("HTTP Staus Code: " + jqXHR.status + "\ntextStatus: "
  + textStatus + "\nerrorThrown: " + errorThrown);
  }
  });
  } catch (e) {
  alert("Exception raised at getHarvestActorsData() in harvestactors.js file:" + e);
  }
  return responseData;
  }

  function getHarveshHandles(){
  try{
  harvest_actor_handle_table.clear();
  var harvestActorHandleData=getHarvestActorsData();
  if(harvestActorHandleData!='' && harvestActorHandleData!=null){
  console.log("in if condition");
  console.log("before for loop date and time "+ Date());
  for (var i = 0; i < harvestActorHandleData.length; i++) {
  console.log("in for loop");
  var data_array=[];
  var harvest_actor_handle_delete_btn = "<input type='button' id='"
  + harvestActorHandleData[i]["actor_id"]
  + "' class='form-control' onclick='deleteActorHandle(this.id)' value='Delete'/>";
  var createdAt = new Date(harvestActorHandleData[i].createdAt);
  createdAt = moment.tz(createdAt, "UTC");
  createdAt = createdAt.local().format("YYYY-MM-DD HH:mm:ss");

                  var updatedAt = new Date(harvestActorHandleData[i].updatedAt);
                  updatedAt = moment.tz(updatedAt, "UTC");
                  updatedAt = updatedAt.local().format("YYYY-MM-DD HH:mm:ss");
  
                  data_array.push(harvestActorHandleData[i].handle); 
                  data_array.push(createdAt);
                  data_array.push(updatedAt);
                  if( (roles_harvest_actor_delete_all) || (roles_harvest_actor_delete && userHarvestActorsArray.indexOf(harvestActorHandleData[i].actor_id) > -1)){
                      data_array.push(harvest_actor_handle_delete_btn);
                  }else{
                      data_array.push("-");
                  }
  
                  var rowIndex= $('#'+harvest_actors_api_table_grid_id).dataTable().fnAddData(data_array);                  
                  var row = $('#'+harvest_actors_api_table_grid_id).dataTable().fnGetNodes(rowIndex);
                  $(row).attr('id', harvestActorHandleData[i]["actor_id"]);
          }     
           console.log("after for loop date and time"+ Date());
       }
   }catch(e){
        alert("Exception raised at getHarveshHandles() in harvestActors.js file:"+e);
  }   
  

  }

  Thank You
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  April 2017 Answer ✓

  You can't. You have two options:

  1. Implement server-side processing.
  2. Use client-side processing and give DataTables all of the rows up front.

  Allan
• Sanith Varma Posts: 5Questions: 2Answers: 0

  April 2017

  Thanks Allan for your reply. I am going with Server Side processing.

  Sanith Varma
• thisisanjar Posts: 1Questions: 0Answers: 0

  April 2018 edited April 2018

  Its work for me .

  JS
  $('#table').DataTable({

  serverSide : true,
  deferRender : true,

  ajax :{
  url : url ,
  type : 'get',
  data : function (d) {
  d.skip = d.start ;
  d.start = 0 ;
  }
  };
  })

  QUERY
  $skip = $request->skip;
  $length = $request->length;

  $sql = DB::table('users')->skip($skip)->take($length)->get();

  return datatable()->of($sql)->setTotalRecords(User::count());