Dynamic data-order by columns.render

domenicoparisi

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?

allan

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 also rows.add() is that when you add the data, DataTables will generate the HTML for you. You don't get the option of setting the data-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.

render: function (data, type, row) {
  return type === 'sort' || type === 'type'
    ? row.date_start
    : row.date_start_formatted;
},

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

domenicoparisi

Thanks, works!