Dynamic data-order by columns.render
Dynamic data-order by columns.render
![domenicoparisi](https://secure.gravatar.com/avatar/70df64ca86d313719baa7dc3e973ef30/?default=https%3A%2F%2Fvanillicon.com%2F70df64ca86d313719baa7dc3e973ef30_200.png&rating=g&size=120)
Hello everyone and congratulations for the forum
I have this HTML:
<table id="datatable_promotions" class="table table-striped w-100">
<thead>
<tr>
<th>ID-BricoIO</th>
<th>ID-Volantino</th>
<th>Titolo</th>
<th>Codice</th>
<th>Data inizio</th>
<th>Data fine</th>
<th>Modifica</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID-BricoIO</th>
<th>ID-Volantino</th>
<th>Titolo</th>
<th>Codice</th>
<th>Data inizio</th>
<th>Data fine</th>
<th>Modifica</th>
</tr>
</tfoot>
</table>
And this JS:
datatable_promotions = $('#datatable_promotions').DataTable({
paging: true,
lengthMenu: [10, 25, 50, 75, 100],
pageLength: 25,
searching: true,
order: [
[3, 'desc'],
],
ordering: true,
columns: [
{
visible: true,
orderable: true,
searchable: true,
type: 'string',
data: 'promo_id',
render: function (data, type, row) {
return data;
},
},
{
visible: true,
orderable: true,
searchable: true,
type: 'string',
data: 'id_volantino',
render: function (data, type, row) {
if (data === null) {
return '*****';
}
return data;
},
},
{
visible: true,
orderable: true,
searchable: true,
type: 'string',
data: 'title',
render: function (data, type, row) {
return data;
},
},
{
visible: true,
orderable: true,
searchable: true,
type: 'string',
data: 'code',
render: function (data, type, row) {
return data;
},
},
{
visible: true,
orderable: true,
searchable: false,
type: 'string',
data: 'date_start',
render: function (data, type, row) {
return row.date_start_formatted;
},
createdCell: function (cell, cellData, rowData, rowIndex, colIndex) {
$(cell).attr('data-order', rowData.date_start);
//$(cell).attr('data-sort', rowData.date_start);
},
},
{
visible: true,
orderable: true,
searchable: false,
type: 'string',
data: 'date_end',
render: function (data, type, row) {
return row.date_end_formatted;
},
},
{
visible: true,
orderable: false,
searchable: false,
type: 'string',
data: 'id',
render: function (data, type, row) {
return '<div class="text-center"><button class="btn btn-sm btn-primary fw-bold">Gestisci</button></div>';
},
},
],
});
And I update the table with:
datatable_promotions.clear().rows.add(data).draw(false);
I'm trying to use "createdCell" to sort the column, I want to create a dynamic "data-order" attribute...
Advice?
Answers
Yes, don't
. What do you want the
data-order
for? Is it specifically for DataTables' ordering, or do you need it for something external?The trouble with using a
data-*
attribute and alsorows.add()
is that when you add the data, DataTables will generate the HTML for you. You don't get the option of setting thedata-order
attribute.Instead, in this case, and from what I can surmise from your code above (a running test case would be helpful so I have a full picture of what is happening), you want to use the rendering function to perform orthogonal data - e.g. return something different for the ordering.
is how I would suggest you do this.
Also worth noting that DataTables has built in date / time formatters and de-formatters if you didn't want to sent the data with both formatted and unformatted types.
Allan
Thanks, works!