Newbie- How to populate dataTable by sending json string...

rhae

I have a dataTable setup to start out showing empty. Then I have a separate ajax call that can be triggered by a button on the page to return json data that I want to then put in (or replace) the data in the table.
my ajax call is (which isn't working, error below..)
$.ajax({
type: "GET",
contentType: 'application/json; charset=utf-8',
url: "getJSONResult",
data: form,
dataType:"json",
success: function(data){

oTable.fnAddData(data);


},
error: function(xhr, desc, err) {
alert( xhr.responseText );
}
});

The error I am getting is 'Requested unknown parameter '0' from the data source for row 0'

Been searching the forum looking for ideas, but being a newbie I am stumped. I can get the data into the table when I use
"sAjaxSource": '/getJSONResult?'+ $('form').serialize(),
"bServerSide": true,
"sServerMethod": "post",
"aoColumns": [
{ "mDataProp": "customerName" },
{ "mDataProp": "address" },
{ "mDataProp": "city" },
{ "mDataProp": "state" },
{ "mDataProp": "zip" },
{ "mDataProp": "saleDate" },
{ "mDataProp": "entryDate" },
{ "mDataProp": "serialNumber" } ,
{ "mDataProp": "modelNumber" }
],

in the init, but then the paging doesn't work (shows all rows instead of just the set of 10 at a time), and it retrieves the data every time you click one of the paging buttons (database we are using doesn't allow for retrieve rows like 50-60 or 20-30 etc...). So we want to hand all the data over to the datatable and let it do its normal paging over the results without retrieving new data until they click the button again...
Any ideas would be VERY appreciated :)

allan

Could you run your DataTable through the DataTables debugger please? My guess is that there is a column count mismatch somewhere.

Allan

rhae

http://debug.datatables.net/ihanuq

Ran it through...Thanks!

allan

Thanks for that - however there is a difference between your code above:

[code]
"sAjaxSource": '/getJSONResult?'+ $('form').serialize(),
"bServerSide": true,
[/code]

and that from the debugger - no sAjaxSource and bServerSide: false - i.e. the table is using client-side DOM processing, but you've set it up to use mDataProp. mDataProp has no meaning with reading data directly from the DOM since DOM elements aren't JSON object properties and don't have parameter names!

So I'm a little confused as to which mode you are using DataTables in. If no server-side processing, just remove the aColumns set you are using.

Allan

rhae

That is where I was getting confused. How does the data get parsed out to the right columns if you don't specify the mDataProp IF you don't want to use the serverside processing? I just want to feed it data when needed.

allan

Server-side processing or not has little impact upon how the data is read. There are basically thee methods:

1. From the DOM directly
2. From an array of arrays - where the first array is the row data and the inner arrays are in column order.
3. From an array of objects - where the first array, again is the rows, while the inner objects are just data objects (i.e. they have no specific order), and thus mDataProp must be used.

In fact in the first two instances mDataProp is actually used, but it is set automatically by DataTables to be an array index (i.e. an integer).

Allan

rhae

Do you have a sample where the data (array of objects in json) is being passed to the dataTable for it to display/paging etc? The plugin we have from the back end is creating the json for me, so the columns in the array are not in display order (it sorts them alphabetically from what I can tell). That is why I was trying to use the mDataProp to tell it what columns I wanted.

allan

http://datatables.net/release-datatables/examples/ajax/objects.html

This blog post will also likely be of interest: http://datatables.net/blog/Extended_data_source_options_with_DataTables

Allan