Default json data during table init

munglet

I'm using bServerSide and sAjaxDataSource and I on the initial page load I want to be able to supply the initial data that should be shown without a server side callback being made. Once the user requests the next page, sort, search, etc... then the server side ajax requests should be made.

How can specify the initial data in json format to datatables?

Thanks.

dgtaylor22

I believe you can use the aoData structure when initializing your datatable. Here is a simple example that I pulled from another thread. The JSON in this example is empty, but can easily be changed to include your JSON.

[code]
$(document).ready( function() {
$("#dt_table").dataTable({
"aoData": [
/* Filename */ null,
/* Extension */ null,
/* Type */ null,
/* Date */ null
]});
});
[/code]

allan

@munglet - So you want to read data from the DOM for the first page, and then use server-side processing for the other pages? DataTables doesn't really support this at the moment, either you have server-side processing or you have client-side. What you could do is put your informaiton into the DOM as normal and then on initialisation DataTables will overwrite it with it's first callback. This will be one extra Ajax request which you are looking to avoid, but the end user will probably never notice anything.

@dgtaylor22 - The aoData object doesn't mean anything in the DataTables initialiser. You can use aaData to pass in an array or arrays with table informaiton in them - perhaps this is what you meant - but I'm not sure it would address what munglet is looking for unfortunately.

Allan

dgtaylor22

oops sorry. Thought I saw that in another thread about aoData and didn't test it. Yes, it should be aaData, not aoData (not sure the difference).

The way I understand munglet's issue, is you want to have initial data that isn't received from a call to the server, and then after that you want to have calls go to the server for sorting, etc.

I think I discovered a way to do this as I was working through my issue. When initializing your table, don't set the values bServerSide and sAjaxDataSource (they'll be set later). This prevents a GET from being sent during initialization. Set the aaData value to your initial data. Then after your table initializes, set the bServerSide and sAjaxDataSource values for the table.

Here's some semi-pseudo-code of what I'm talking about:
[code]

var oTable;
var oSettings;

$(document).ready(function(){
oTable = $('#dt_table').dataTable( {
"bPaginate": true,
"bProcessing": true,
"aaData": [
["1", "Value 1", "Description 1"],
["2", "Value 2", "Description 2"]
]
});

oSettings = oTable.fnSettings();
oSettings.bServerSide = true;
oSettings.sAjaxDataSource = "www.yoururl.com/ajaxsource";

//Here is where you may need something more so that datatable knows the settings have changed
});
[/code]

I think this might help or at least give you some ideas. Just remember whatever Allan suggests trumps anything I'm saying.

allan

Hi dgtaylor22,

That's certainly an interesting idea. DataTables doesn't really support switching features on-the-fly - it might well work, but it's not something I've specifically planned for. And in this regard, I can't see any reason why this wouldn't work. You might not even need to use aaData, rather just reading the information from the DOM for the initial page might be enough - then enable server-side processing.

I like it! A way of doing progressive enhancement with server-side processing :-)

I haven't tried this (so who knows it might not work - but the idea seems sound), but this is the code you would need to enable server-side processing:

[code]
oSettings.oFeatures.bServerSide = true;
oSettings.sAjaxSource = "www.yoururl.com/ajaxsource";
[/code]

Regards,
Allan

aman-tuladhar

Hi,
I tried this method and it seems to work.
Only problem I saw was in pagination.
I mean u might have 100 records
but since on initial display of table u are just making 10 visible.
Pagination think u only have 10 records to display.
So pagination link seem to remain disabled