Server side processing with custom cells

12hys

Hello, I want to create a table using server side processing and custom cells. Currently on page load, I'm getting data via Ajax, populating the table using JS, and then calling datatables() on that table. The problem with this, is that I have to get all the values from the database and then call the .datatables() function on the built table. This is kind of slow when I'm dealing with a lot of data.

To solve this, I want to be able to use server side processing and build my own custom cells and update datatables, as shown in the HTML below. Is it possible to do this?

Here is the HTML that I want to create:
[code]


First Name
Last Name
Email Address
Clients
Admin
Enabled




Joe
Smith
example@example.com

Client 1,
Client 2









[/code]

Here is the JSON I get back that creates the above table:
[code]
[
{
"entity": "1",
"first_name": "Joe",
"last_name": "Smith",
"enabled": "t",
"admin": "t",
"email_address": "example@example.com",
"clients": [
{
"client": "1",
"name": "Client 1"
},
{
"client": "2",
"name": "Client 2"
}
]
}
]
[/code]

12hys

Alright guys...I've gotten quite far. I've figured out aoColumns with the mDataProp property puts data in the correct cell. Now I'm having trouble with the nested JSON in "clients".

Here is my partially working code:
[code]
$( '#users' ).dataTable(
{
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : '/common/ajax/live.php',
"aoColumns" : [
{ "mDataProp": "first_name" },
{ "mDataProp": "last_name" },
{ "mDataProp": "email_address" },
{ "mDataProp": "clients.name" },
{ "mDataProp": "admin" },
{ "mDataProp": "enabled" }
]
});
[/code]

Now, what I want to attempt to do is use "fnRowCallback" to try and render the inputs in the Admin and Enabled columns of the table, which I believe I can successfully do.

My problem right now, with the code above, is that I get the following error:
[quote]DataTables warning (table id = 'users'): Requested unknown parameter 'clients.common_name' from the data source for row 0[/quote]

Can anyone help me with this error?

allan

So the problem with "mDataProp": "clients.name" as you currently have is that it is expecting an object with a name property, but you actually have an array of objects - hence why DataTables can't find the variable that you are looking for.

So, one possible option is to use a new feature that will be in DataTables 1.9.3 (the development version is available as the 'nightly' on the downloads page). 1.9.3 introduces a new mRender property which works a lot like mDataProp (indeed mDataProp is renamed mData for consistency, but backwards compatible, mDataProp is still read!).

With mRender you can use array syntax to loop over the array getting data - for example you might use:

[code]
$( '#users' ).dataTable(
{
"bProcessing" : true,
"bServerSide" : true,
"sAjaxSource" : '/common/ajax/live.php',
"aoColumns" : [
{ "mData": "first_name" },
{ "mData": "last_name" },
{ "mData": "email_address" },
{ "mData": "clients", "mRender": "[, ].name" },
{ "mData": "admin" },
{ "mData": "enabled" }
]
});
[/code]

What mRender is doing there, is firstly expecting an array from the data (the data selected is given by mData), and plucking out the name property. An array itself isn't much use for the display so we can comma separate the list by putting a string in the array syntax - i.e. the ", " part. You could put anything you want in there, or if you really did want an array, just leave it empty.

Would be interested to hear how you get on with this :-)

Allan