how to make an ajax call for pagination (trying to reduce data table load time)

mahee

Hi All,
I am having a text file named sourceFile.txt inside this I have json data like:
{
"data":
[
{
"name":"Mahee",
"lastName":"Sharma"
},
{
"name":"Deepak",
"lastName":"Sharma"
}
]
}

I am trying to get this data on html page like.

            $(document).ready(function() {
                oTable=$('#data-table').dataTable({
                    "bProcessing": true,
                    "bPaginate":true,
                    "bServerSide": false,
                    "sAjaxSource": "./data/sourceFile.txt",
                    "deferRender": true,
                    "columns": [
                        { "data": "name" },
                        { "data": "lastName" }
                        ],
                    dom: 'C<"clear">lfrtip',
                    "order": [[ 3, "desc" ]],
                    "ordering": true,
                } );
            } );

This is perfectly fine when there is few rows in text file but as the amount of data increases,data table took much time to load first time. any one can suggest how to make an ajax call so that first time it will take only 1st page data and when clicking on next page it make again an ajax call and get data from the file..Please let me know if any work around is possible?

Quick help will be appreciated.

~Mahee

tangerine

Perhaps you want server-side processing:

http://datatables.net/examples/data_sources/server_side.html

mahee

server side is only possible if having server in background but In my case I can not go with because my requirement is I need to pull data from text file only.

tangerine

Apologies - I should have read "text file" in your post.

mahee

Hi Tangerine,

I am able to read the data from indexedDB and updating data table like

objectStore.openCursor().onsuccess = function(event)
{
var cursor = event.target.result;
var table = $('#app-table').DataTable();
if (cursor) {

                table.row.add( [
                cursor.value.reference,
                cursor.value.applicant,
                cursor.value.siteAddress,
                cursor.value.applicationType,
                cursor.value.status,
                cursor.value.action
            ] ).draw();

            cursor.continue();
        }

It's rendering table fine. still looking how can I update data table in one go.

allan

any one can suggest how to make an ajax call so that first time it will take only 1st page data and when clicking on next page it make again an ajax call and get data from the file.

That's not possible without some form of server-side processing. You can't have just part of the file read over HTTP - and even worse, you wouldn't know which part of the file to read anyway (assuming the data in it is to be sorted).

How big is the file?

Allan