DataTables Loading and Rendering Delay

Someone had the exact same issue. Seems to be pretty common, expesially with DT

See here for a good answer Datatables - on page load, table layout does not load instantly

In my opinion loading time cannot be acceptable for render 2000 rows(or more). Even if loading time is acceptable in PCs and laptops, there is problem for processing in mobiles. Did you test it already?

Datatable is a perfect plugin and has too many options. you can render just 10 rows in first view, and when the user want to see another pages, request from Datatable to draw and render them. So you need to use data property like this:

HTML:

    <table id="example" class="table table-striped table-bordered" cellspacing="0">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
    </table>

JS:

var dataSet = new Array();
for(i=0;i<2000;i++){
    var item = new Array(
        "name "+i,
        "position "+i,
        "office "+i,
        "age "+i,
        "start date "+i,
        "salary "+i
    );
    dataSet.push(item);
}

tableMain = $("#example").DataTable({
    data: dataSet,
    columns: [
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true},
        {"orderable": true}
    ],
    pageLength: 10
});

As you see just 10 rows renders in HTML code via this method.