Search Panes *asc* ordering

MihaiVp

Hi all,
I am using search panes for product filtering, i need to order the data inside the filters in asc order atleast. At the moment they are in a random order. The data is stored within a table, and within a span. 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(); } }
        })

allan

Thanks for the screenshots. It isn't random order, but rather alphabetical (descending since you've got it configured that way in dtOpts).

The issue is that 31.75mm is a string which is being compared to 3.99mm (and friends). Note the . in the second position, since it is a string. Which is why it looks odd. You can see that effect in this recreated example.

We can solve that with a little plug-in that will let DataTables see the dimension with units as a number:

DataTable.ext.type.detect.unshift(function (d) {
  return d.match(/\d+(.\d+)?mm/) ? 'mm' : '';
});
 
DataTable.ext.type.order['mm-pre'] = function (d) {
  return parseFloat(d.replace('mm'));
};

The first part will find columns that match numeric data with a trailing mm, and the second part allows it to be sorted as a number.

This is the updated example which shows the data sorting numerically.

Allan

MihaiVp

Hi Allan, thank you for the reply back on this.
Ive tried putting the functions in the code but it hasnt worked. I think it could be with my placement of where i put it. I wasnt too sure where it was meant to go.

Many Thanks,

$('.variants-table').DataTable({
            "bPaginate": false,
            bProcessing: false,
            columnDefs:[{
                searchPanes: {
                    collapse: true,
                    collapse: false
                },
                targets: [1]
            },
            { 
                type: 'natural',
                targets: '_all' 
            }
          ],
            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(); } }
        }).on('draw', function () {
            if ($('.dtsp-searchPane table tr').hasClass('selected')) {
                $('.clear-filters').removeClass('d-none')
                $('.view-results').removeClass('d-none')
                $('.view-results-mob').removeClass('d-none')


            } else if (!$('tr').hasClass('selected')) {
                $('.clear-filters').addClass('d-none')
                $('.view-results').addClass('d-none')
                $('.view-results-mob').addClass('d-none')
            }
            DataTable.ext.type.detect.unshift(function (d) {
                return d.match(/\d+(.\d+)?mm/) ? 'mm' : '';
            });
               
            DataTable.ext.type.order['mm-pre'] = function (d) {
                return parseFloat(d.replace('mm'));
            };
        })

allan

Put them before the DataTables initialisation, like in the example I created.

Adding them in draw is too late. The ordering and type detection has already happened by then.

Allan

MihaiVp

Okay i will try that. This might be a bigger challenge than expected! The data seems to be very broad looking at it again. For example, there is filters such as : 700KG, 32mm x 30mm, 8 , blue and 0.88mm.

To challenge this the right way, would you have to apply a sort like you said before the initialising of the data tables, but it might need a more advance sorting logic. I would need a filter that can sort any type of data, such as a natural sort or a alphanumerical sort.

Thank you very much for the ideas, ive been crunching this issue for some time! I am going to try some things too, if you have any more ideas they are highly welcomed.

And i will try what you said too, hopefully that sparks some ideas.

Many thanks.

allan

KG is easy - just tweak the mm plug-ins I created to use kg rather than mm.

M8 x 70mm and fields might need a little more thought. Perhaps you could create a number based on the two parts - the M number and then the length as the decimal place, right shifted to 4 decimal points. So for example:

• M8 x 70mm would become: 8.0070
• M10 x 100mm would become: 10.0100

Then they can be sorted numerically as floating point values.

A similar approach for the square mm dimensions could be taken. Not too much code, but a little more than the plug-ins I've suggested so far.

If you create some, I'm sure the community would warmly welcome if you were okay with contributing them.

Shout if you run into issues with them.

Allan

MihaiVp

I see, i will do those changes. Also the data tables are intialised after the product data is gathered, and runs on a .done function. Ive attached a image of where i put your plugins. Is that the right place?

allan

That should work.

I'd normally put it just after the DataTables JS file has been loaded. Indeed, since you are going to have a few of these, perhaps you should create a separate file that you can put them all in, and then load them from there?

Allan

MihaiVp

Morning Allan, i created a .js file hosted on our cdn with that script and put it afert and before the data tables js files, and its throwing an error. Not sure if you come across anything similar.

Cheers

allan

That suggests to me that the value being passed in is something other than a string. If you were Ajax loading data with a number in it for example, then that would cause the error you are seeing.

My code should perhaps have been a bit more defensive to guard against that - try:

DataTable.ext.type.detect.unshift(function (d) {
  return typeof d === 'string' && d.match(/\d+(.\d+)?mm/) ? 'mm' : null;
});
  
DataTable.ext.type.order['mm-pre'] = function (d) {
  return parseFloat(d.replace('mm'));
};

Allan

MihaiVp

I think after testing this out for a while. I think im not initialising it properly?

The script file is after the data tables one. And ive tried before too. And its not even console logging anything.

Ive tried some code variations, but the i realised im trying to manipulate data thats been loaded in the dom which is too late.

Not sure, how to get the externsion to run before the initialisation of the data tables and also to confirm its running correctly.

I will be reading the doctorine and trying some other methods.