I am using search panes for product filtering, i need to order the data inside the filters in asc order at least. At the moment they are in a random order. The data is stored within a table (table> tbody> tr > td > div > span (**DATA**)). The issue i came across is that the data in the filters is a string type. I have tried all if not most config options for ordering, but none have work so far.
I tried some custom javascript for it too, but it hasnt worked neither.
I have attached below some screenshots of the code and the code itself. If anyone has any ideas or needs more information let me know.
Thank you
//$('.variants-table').DataTable().destroy()
$('.variants-table').DataTable({
"bPaginate": false,
bProcessing: false,
columnDefs:[{
searchPanes: {
collapse: true,
collapse: false
},
targets: [1]
}],
searchPanes: {
cascadePanes: true,
threshold: 1,
controls: false,
orderable: true,
collapse: true,
clear: false,
dtOpts: {
order: [[0, "desc"]],
select: {
style: 'multi'
},
},
columns: [1, 2, 3, 4, 5],
},
initComplete: function (settings, json) {
$('.dtsp-panes').append(
$(document.createElement('button')).prop({
type: 'button',
innerHTML: `<i class="bi bi-arrow-down"></i> View Results`,
class: 'btn btn-primary view-results d-none',
}).attr('onClick', 'smoothScroll()')
);
$('.dtsp-topRow').on('click', function () {
$(this).toggleClass('bg-secondary')
})
},
dom: 'Plfrtip',
"drawCallback": function (settings) { if ($(window).width() < 1024) { mobileProductFilter(); } }
})
I tried most of the config options for the search panes, it just doesnt order it.
Use a DataTables column renderer to change your string values such as
8mmto numeric values such as8.One simple way to do this is to strip off the final 2 characters from each value - assuming these values all end in
mm.If this assumption is false, then different JavaScript logic would be needed.
You also need to include logic to ensure that the above conversion only happens for the
type === 'sort'rendered value. This is the value that DataTables uses for sorting data in a column - and in the related search pane. It is different from the data value that DataTables uses for display, and for filtering. This ability to store different representations of the same data is referred to as orthogonal data in DataTables.Finally, ensure the rendered data is interpreted by DataTables as a numeric value and not as a string:
See columns.type
A demo, showing all of the above steps:
This approach also means the data in the main table is sortable by numeric size, even though the values displayed are strings (containing
mm):