I want to show 10 records per page and pagination by total records

Sanith Varma

Hi Allan
I have Json array with 2000+ records . By using for loop I am preparing data and adding to DataTable by fnAddData and fnGetNodes. But I don't want to iterate 2000+ records at once. I want to iterate only 10 but it should show pagination by my total records count. fnGetNodes generating only records which i am looping . For each request by user (like if user click on 3 page then by slicing jsonarray i will iterate those 10 records in for loop.

Any advice please?

allan

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

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

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

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

Sanith Varma

thisisanjar

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());