Load 5,00,000 data

rayyan123

Hello, I have 5,00,000 data to load on datatable, I want to load in chunks not altogethor How can I do this without using server side?pllzzz help mee
$(document).ready(function() {
var asyncData;
getdata();
function getdata(){
const getPeople = async () => {
const data = await fetch('data3.json', {
method: 'GET',
// headers: {
// 'Content-Type': 'application/json',
// }
});
const jsondata = await data.json();
console.log(jsondata)
asyncData=jsondata.data;
console.log(asyncData)
initialiseTable();
return jsondata;
};
getPeople();
}
function initialiseTable(){
var table = $("#example").DataTable({
"ajax":{
url:'data3.json',
dataSrc:"data"
},
// data:asyncData,
"deferRender":true,
"iDisplayLength": 10,
// "initComplete": function(settings, json) {
// alert( 'DataTables has finished its initialisation.' );
// },
columns: [
{ title: "ID" , data:"_id" },
{ title: "Name", data:"name" },
{ title: "isActive", data:"isActive" },
{ title: "balance", data:"balance" },
{ title: "age", data:"age" },
{ title: "eyeColor", data:"eyeColor" },
{ title: "gender", data:"gender" },
{ title: "company", data:"company" },
{ title: "email", data:"email" },
{ title: "phone", data:"phone" },
{ title: "address", data:"address" },
]
});
}

} );

kthorngren

How can I do this without using server side?

Why do you not want to use server side processing? If you don't want to use it then you will need to create your own code for paging the data from the server.

Kevin

rayyan123

Thats what I'm looking for I want to create my own code for paging that's why I need help

rayyan123

Kevin can you help me with this?

kthorngren

There are lots of ways to do this. One way is use the ajax option along with ajax.dataSrc as a function to send parameters from the client to the server to indicate what data to fetch. You can then use ajax.reload() to have Datatables fetch the new data sending the parameters defined in ajax.dataSrc.

Kevin

rayyan123

Can you modify my code for this?

rayyan123

I have tried many things but unable to do this

kthorngren

Use ajax.data as a function. There is examples in the docs. Something like this:

$('#example').dataTable( {
  "ajax": {
    "url": "data.json",
    "data": function ( d ) {
        d.extra_search = $('#extra').val();
    }
  }
} );

When you want to fetch new data use ajax.reload().

I have tried many things but unable to do this

What have you tried?

Kevin

rayyan123

I tried with deferRender

kthorngren

deferRender won't help you create your own paging setup.

Please provide details of how you want this to work.

Kevin

rayyan123

I just set deferRender to true, I read in the documentation that deferRender will get you the data which will need upfront, but it doesn't seem to work. I want my data to load in chunks

rayyan123

Can you plzz provide code for my problem?

tangerine

Use server-side processing and save yourself a load of grief.

kthorngren

The deferRender option does not control the amount of data returned in the ajax response.

From the docs:

As an example to help illustrate this, if you load a data set with 10,000 rows, but a paging display length of only 10 records, rather than create all 10,000 rows, when deferred rendering is enabled, DataTables will create only 10.

For this example 10,000 rows of data is returned in the ajax response but Datatables will only process 10 of them to display on the page. This won't allow you to control how many rows are returned.

Can you plzz provide code for my problem?

I've provided links and examples of the client side code that you can start with. Have you tried any of it? You will need to decide how you are going to specify the chunks, then in the ajax.data function pass that chuck value to the server. Then you will need to write your server code to read that parameter and fetch the appropriate data.

Or, you can use serverSide processing. Here is an example. Click the Server-side script tab to see the script. You can download the required ssp.class.php script from here.

Or, are you wanting to pay someone to write the code for you?

Kevin