Syn Syn - 2 months ago 11
MySQL Question

Why does the columns.render option in DataTables stop working with multiple columns?

I am using DataTables Server Side to generate a paginated MySQL table on my website.

I am using the render option to add a hyperlink to one of the MySQL columns like so:

$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "includes/pull_2.php",
"columns": [
{
"render": function (data, type, full, meta) {
return "<a href=" + full[0] + ">" + full[0] +"</a>"; }
}
]
});
});


This works perfectly if I only have one column in my table. For example:

<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First Name</th>
</tr>
</thead>
<tfoot>
<tr>
<th>First Name</th>
</tr>
</tfoot>
</table>


However, as soon as I add another column to the array and another to the table, the table stops rendering the table at all and just says "processing".

This is the table I am working on: http://clients.serallo.co.uk/formtest/

Does anybody have a suggestion as to why this does not work as expected?

Answer

Number of elements in columns array must match number of columns in the table.

You can use columnDefs option instead and target specific column. For example:

$('#example').DataTable( {
   "processing": true,
   "serverSide": true,
   "ajax": "includes/pull_2.php",
   "columnsDefs": [
      {
         "targets": 0,
         "render": function (data, type, full, meta) {
             return "<a href=" + full[0] + ">" + full[0] +"</a>"; 
         }
      }
   ]
});