Server side rendering the whole row (or rows)

rallolollo

Hello, it is possible to simply append the html of the row (or rows) directly when returned form the ajax call?
What i mean by that is to have all the html of the row begin generated server side and simply appended to the datatable.

kthorngren

The row.add() (or rows.add()) docs state this:

This may be an array, object, Javascript object instance or a tr element.

Assuming you are using jQuery ajax to fetch new data for an existing table you can use row.add() to a row as an HTML formatted row.

Kevin

rallolollo

How should i integrate it with a custom ajax function?
Right now i have set the ajax function to be like this..
And i activate it calling draw on the datatable.

 serverSide: true,
 processing: true,
 ajax:(tabledata, callback, settings) => {
   fetch(...).then().then((data)=>{
        callback(data);
   });
}

kthorngren

Can you post the ajax response you get using the browser's network inspector tool?

Kevin

rallolollo

i can change it however i want to.
i can retun full simple html as string (for example)
"<tr><td></td>.....</tr>
<tr><td></td>.....</tr>
<tr><td></td>.....</tr>
<tr><td></td>.....</tr>"
or as an array of tr
["<tr><td></td>.....</tr>","<tr><td></td>.....</tr>"]

kthorngren

You have serverSide: true. Doesn't look like you are returning the required information for server side processing. See the SSP protocol docs. Do you need server side processing? If not remove the serverSide: true option. Its not needed to use the ajax option. Its needed when you have thousands of rows to improve speed.

The Ajax docs explain what Datatables expects. Essentially it expects the data to be in an array with each row being an array of columns or objects. See the Data source types for more details. You will need an array of rows with row being an array of td. Something like this:
http://live.datatables.net/riganuji/1/edit

Kevin

rallolollo

i do need serverSide option and what i want is to render the rows by using arrays of <tr></tr> not arryas of many td.
the reason is simple, since i am using laravel i set the routes for the links in the table by using the route laravel utility.
so after i run the query to retrive the data i wanna show i have to run a cycle to set the datatable data with the correct links in php.
wich is kinda ugly. as i then have to run callbacks also on the datatable in javascript to set other properties in the row (for example the background color).
if i could return an array of tr i could avoid setting all data and links and return directly the renderized html for the row so i could avoid setting both the columns info and the rowcallbacks in the javascript code.

rallolollo

for example my data would be something like

{"data": [
          ['<tr><td>Tiger Nixon</td><td>System Architect</td><td>Edinburgh</td><td>61</td><td>2011/04/25</td><td>$320,800</td></tr>']

wich obviously is not correct and causes error. wich is why i am asking if there is a way to achive this or if it is not possible

kthorngren

You will then need to use ajax.dataSrc as a function to manipulate the returned data object to an array similar to what I show. Then return the updated response along with the other parameters. Using ajax.dataSrc as a funciton with server side processing may or may not work properly - I haven't tested it.

Kevin

kthorngren

It may be better to use the xhr event to manipulate the data.

Kevin

rallolollo

so basically you are saying there is no way to achive what i want and datatables needs an array of data or <td></td> elements right?
for example if i return an array of <tr></tr> i should remove the tr and make it an array of td?

colin

Yep, it needs an array of data, but as Kevin said, you can parse your string in the xhr to get it how DataTables expects it.

Colin