Web API - Server-side processing of large data

transputec

Hello folks,
I have been using datatable very efficiently for a long time until I hit by a problem of loading large data into the table.
I am talking about 25K rows loading into datatable on client side. Firstly my web server used to crash due to lack of memory_limit assigned to handle the script (PHP).
Increasing the memory_limit fixed the crashing issue on the server-side, but now it takes enough time to load the data on the client side.
So I had decided to limit the data from the server itself using remote pagination.
That'why I have implemented the ajax processing to fetch the data. I works fine with simple data binding to the table.
But my problem is that I have a reasonable amount of conditions in the PHP code to hide and show control + coloring of the data.
All these are based on the user session and permission on Serverside which cannot be done on the javascript in drawCallback.

I am looking for a solution where I can fill the table rows in html format (after applying all the conditions with PHP code) to the datatable without losing the search, paging functionality.

Any help will be highly appreciated.

allan

Hi,

There are a few options:

1. Output the information you need to the Javascript so you can do the formatting in createdRow or similar (i.e. session access and permission information).
2. Have the server format the HTML and DataTables simply then display it (this would work within a cell - not for a row or cell attributes such as classes - you'd need a call back for that).
3. Add meta information into the data object for each row which would allow createdRow to format the row as needed - e.g. colour: 'red' for a red background.

Allan

transputec

Hi Allan,
This is exactly how I have done it. thanks for your solution. I generated the HTML part from my server side script instead of plain text and just bound the columns with the table.
$('#tblUsers').DataTable({ dom: "<'row'<'col-md-6'f><'col-md-6'l>r>t<'row'<'col-md-12'p i>>", processing: true, serverSide: true, searchDelay: 700, ajax: { "url": base_url + 'users/get_users', "type": "POST", }, "columns": [ { "data": "Col0" }, { "data": "Col1" }, { "data": "Col2" }, { "data": "Col3" }, { "data": "Col4" }, { "data": "Col5" }, { "data": "Col6" }, ], createdRow: function (row, data, dataIndex) { $('td', row).eq(0).addClass('multiselect text-left').attr('data-order', data.Col1); $('td', row).eq(4).attr('data-search', 'filter:'+data.Col4); $('td', row).eq(5).addClass('center-text'); $('td', row).eq(6).addClass('actionCol'); }, order: [[1, 'asc']], columnDefs: [{ orderable: false, targets: [0,-1] }], autoWidth: false, stateSave: true, stateDuration: 5, responsive: true, bSortClasses: "cursort", "language": { "emptyTable": TBL_NO_DATA }, "drawCallback": function (settings) { App.initTooltips(); } });

So no formatting and other things are being done on the js side.