Datatable drawing all rows before pagination is activated

stevecurrey

Hi there,

I am attempting to use DataTables with an ASP.Net Web Forms project (data coming from Entity framework (ToList())).

I am using a GridView.

On an initial page load, all records are fetched (2,000).

This takes a few seconds and in that time, the entire table is drawn with all rows before flicking back to 20 records with pagination.

In this time, the CSS is not loaded for my menu so the site visual is thrown off.

Is there any way around this?

Thank you very much in advance.

kthorngren

The first FAQ here should help point you in the right direction. You can try deferRender first then if that doesn't help you may need to use serverSide processing.

Kevin

stevecurrey

Hi Kevin,

Many thanks for that.

Unfortunately, that doesn't work.

Datatables is still drawing each of the 2,000 rows before snapping to 10 item pagination.

It's a real shame as it initially saved me a lot of work.

With regards to server-side processing, the amount of time and work this would take to set up would negate the time-saving of the Entity Framework.

I'm just as well creating gridviews with pagination within an Ajax update panel.

Kind regards,

Steven.

kthorngren

Datatables is still drawing each of the 2,000 rows before snapping to 10 item pagination.

Sounds like you are loading the data into the table then initializing Datatables. Is that the case? deferRender works only when you have Datatables fetching via the ajax option or if you are using the data to provide Datatables with the data via Javascript.

On an initial page load, all records are fetched (2,000).

Are these records fetched, loaded into the gridview then Datatables is initialized?

Kevin

stevecurrey

Hi Kevin,

Thank you again for your reply.

I am populating an IList on page load, casting that to a DataTable and then populating the gridview.

The datatables script is being called at the top of the page.

Kind regards,

Stephen.

kthorngren

Can you post a link to your page for debugging?

If not maybe you can start by posting your Javascript code so we can see what you are doing.

Kevin

stevecurrey

Hi Kevin,

Code is as follows:

$(document).ready(function () { jQuery('#gvClients').dataTable({ "pageLength": 10, "searching": false, "lengthChange": false }) });

As I said, on the page load, I populate a gridview with the list of clients.

Kind regards,

Stephen.

kthorngren

on the page load, I populate a gridview with the list of clients.

Based on the info you have provided it sounds like the gridview is populated first followed by the Datatables init. If this is the case then the delay is before Datatables starts. You can see if this is the case with a couple console.log statements, for example:

        $(document).ready(function () {
            console.log('Datatables init started', Date());
            jQuery('#gvClients').dataTable({
                "pageLength": 10,
                "searching": false,
                "lengthChange": false,
                "initComplete": function(settings, json) {
                    console.log( 'DataTables has finished its initialization.', Date() );
                }
            })
        });

This will give you an idea of how long Datatables is taking to initialize. If you find that loading the gridview is the delay then one option maybe to hide the gridview then in the Datatables initComplete show the gridview.

Kevin