I am fetching about 5000 rows of data from the database and also 5 relational tables data. Which is causing the issue. I see in network tab size of request resource is 9.1 mb . after that I am appending data in table like this
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data) {
if (data.status == "success") {
var consignment = data.consignment;
for (var i = 0; i <= consignment.length; i++) {
if (typeof consignment[i] !== "undefined") {
if (consignment[i].run_sheets != null) {
var run_sheet_name = consignment[i].run_sheets.name;
var run_sheet_id = consignment[i].run_sheets.id;
if (consignment[i].run_sheets.drivers != null) {
var driver = consignment[i].run_sheets.drivers.name;
} else {
var driver = '';
}
if (consignment[i].run_sheets.vehicles != null) {
var vehicle = consignment[i].run_sheets.vehicles.name;
} else {
var vehicle = '';
}
} else {
var run_sheet_name = '';
var run_sheet_id = '';
var driver = '';
var vehicle = '';
}
if (consignment[i].delivery_runs !== null) {
var delivery_run_name = consignment[i].delivery_runs.name;
} else {
var delivery_run_name = '';
}
if (consignment[i].delivery_addresses != null) {
var delivery_name = consignment[i].delivery_addresses.company_name;
var delivery_suburb = consignment[i].delivery_addresses.suburb;
var delivery_postcode = consignment[i].delivery_addresses.postcode;
} else {
var delivery_name = '';
var delivery_suburb = '';
var delivery_postcode = '';
}
if (consignment[i].customers != null) {
var customer_name = consignment[i].customers.name;
} else {
var customer_name = '';
}
if (consignment[i].product_types != null || consignment[i].product_types != undefined) {
var product_type = consignment[i].product_types.name;
} else {
var product_type = null;
}
$('#consignment_table > tbody').append(
`<tr class="consignment-row" id="${consignment[i].id}"><td><label class="kt-checkbox kt-checkbox--single kt-checkbox--solid">
<input type="checkbox" class="kt-checkable check_con" name="check_consignment" data-id="${consignment.id}" value="${consignment[i].id}">
<span></span>
</label></td><td>${consignment[i].id}</td><td>${$.trim(customer_name)}</td><td>${consignment[i].customer_reference}</td><td>${$.trim(delivery_name)}</td><td>${$.trim(delivery_suburb)}</td><td>${$.trim(delivery_postcode)}</td><td class="carton">${consignment[i].carton}</td><td>${consignment[i].pallet}</td><td>${consignment[i].space}</td><td>${consignment[i].weight}</td><td>${$.trim(run_sheet_name)}</td><td>${run_sheet_id}</td><td>${getStatusName(consignment[i].status)}</td><td>${$.trim(delivery_run_name)}</td><td>${$.trim(getFormattedDate(consignment[i].delivery_date))}</td><td>${$.trim(getFormattedDate(consignment[i].required_delivery_date))}</td><td>${driver}</td><td>${vehicle}</td><td>${consignment[i].consignment_type}</td><td>${$.trim(product_type)}</td><td><a href="/consignments/show/${consignment[i].id}"><i class="fa fa-eye"></i></a></td></tr>`
);
}
}
} else {
toastr.error(data.message);
}
$('#consignment_table').DataTable({
"deferRender": true,
responsive: true,
"order": [],
"bSort": true,
scrollY: '50vh',
scrollX: true,
scrollCollapse: true,
"paging": false,
dom: '<"top"i>f<"top"rt><"clear">',
aLengthMenu: [
[-1],
["All"]
],
iDisplayLength: 5000
}).draw();
$('.loader').hide();
}
});
It is taking long time to render about 2 to 3 minutes. and some times browser page crashes. Is there any way in which I can solve this issue fast the rendering without crashing browser?
I cant use pagination. or any thing like that I just need to render data at once
Actually, this issue was not only because of big data main issue was data table response property.
when I commented responsive property now it's working perfectly fine
Now time is reduced from 2min to 15sec
$('#consignment_table').DataTable({
// responsive: true,
scrollY: '50vh',
scrollX: true,
scrollCollapse: false,
"paging": false,
dom: '<"top"i>f<"top"rt><"clear">',
aLengthMenu: [
[-1],
["All"]
],
iDisplayLength: 5000
}).draw();