Load time
Load time
Hello,
I'm trying to load a 6000+ rows table to datatables and so far, I'm not satisfied with load time.
I'm using CodeIgniter3.
The main problem is about load time which takes about 9 to 10 seconds to render.
Response time from php is 1,5s.
I tried to use deferRender but it doesn't make any difference.
Here's the javascript code within the html page:
$('#datatest').DataTable( {
searching: true,
bPaginate: true,
deferRender: true,
pageLength: 25,
lengthMenu: [ 25, 50, 75, 100],
bFilter: false,
bInfo: false,
bAutoWidth: false,
order: [[ 1, 'asc' ]],
});
I search the forums but cannot find anything helping me speeding up loading.
Thanks
Answers
Start with this FAQ discussing option to help increase the load time.
deferRender
only works withajax
ordata
loaded data. Looks like your data is DOM sourced so the browser will render the table then Datatables will process and re-render the table. You can check the page load time without initializing Datatables to see the difference.Can you change to using
ajax
loaded data?deferRender
will work in this case and may help. Possibly you will need to use Server Side Processing with a server script that supports the SSP protocol.Kevin
Thanks for your answer.
I've already read the FAQ and prefer, if I can, not use SSP because the rest of the project is working fine with datatables and simple ajax but not within datatable.
I also tried ajax with server side style to feed the data but in that case, i'm stuck with pagination acting weird. Ie: when displaying 20 results with items per page set to 10, I'm having the correct amount of buttons for pagination. However as I click on "2", the page failed to load with a no results message.
Are you saying you have both
ajax
andserverSide
enabled? Unless your server script supports the SSP protocol remove theserverSide
and all the table data will be fetched and paging should work. Like these examples.Kevin
Here's how the server side code goes:
php:
[code]
function get_list() {
$input = $_POST;
$return_data = array(
'draw' => intval($input['draw']),
'recordsTotal' => intval(0),
'recordsFiltered' => intval(0),
'data' => NULL,
);
$search = $input['search']['value'];
if ( empty($search) ) {
echo json_encode($return_data);
return TRUE;
}
$data = array();
$query = $this->db->get('mytable')->like('person_name', $search)->order_by('person_name');
$count_filtered = count($query->result());
foreach ($query->result() as $row) {
$data[] = array(
$item->id,
$item->licence,
$item->person_name,
);
}
$query = $this->db->get('mytable')->like('person_name', $search);
$count = count($query->result());
$return_data = array(
'draw' => intval($input['draw']),
'recordsTotal' => intval($count),
'recordsFiltered' => intval($count_filtered),
'data' => $data,
);
echo json_encode($return_data);
return TRUE;
}
[/code]
html:
[code]
[/code]
On first load, the list is sent empty so no data is loaded => Ok.
When a search is typed, results are displayed and pagination is correct => Ok.
When clicking on "2" from pagination labels, things get weird => Ko.
I suppose I did something wrong but can't figure out where.
Start by not enabling
serverSide: true
. Are you planning to have many thousands of rows in the table?Kevin
Ok, I found my (dumb) mistake.
I assumed "recordsFiltered" was the count of the data after filtering.
I just switch "recordsFiltered" and "recordsTotal", now it works like a charm.
Thanks for your time.