Problem using jquery extend osort on a dataTable

hammerva

Hello again. I am still trying to figure out how to get a dataTable to sort alphanumerically from A-Z and then 1-9. For example I want:

A1
AA
1Z

To show up as

AA
A1
1Z

i was looking through a bunch of code and it seems like I need to do some kind of extend on the osort of the datatable. Here is the code that I currently have:

   jQuery.extend( jQuery.fn.dataTableExt.oSort['letters-over-numbers-asc'] = function(a, b)  
    {

       if (a === b) return 0; // a and b same
         for (let i = 0; i < a.length; i++) {
           if(b[i] === undefined) return 1; /* b is shorter so should be first */
           if(a[i] === b[i]) continue; /* same char proceed to the next char */
             const isANumber = (/\d/).test(a[i]); 
             const isBNumber = (/\d/).test(b[i]);
           if (!isANumber && isBNumber) return -1;  /* b is a number so it should go after */
           if (isANumber && !isBNumber) return 1; /* a is a number so it should go after */
            return [a[i], b[i]].map(x => x.charCodeAt()).reduce((a,b) => a - b); /* a and b are of the same type so use natural order  */
         }
        return -1; // a is shorter than b so shuold be before b

     } )      


    jQuery.extend( jQuery.fn.dataTableExt.oSort['letters-over-numbers-desc'] = function(a, b)  
    {

       if (a === b) return 0; // a and b same
         for (let i = 0; i < a.length; i++) {
           if(b[i] === undefined) return -1; // b is shorter so should be first
           if(a[i] === b[i]) continue; // same char proceed to the next char
             const isANumber = (/\d/).test(a[i]); 
             const isBNumber = (/\d/).test(b[i]);
           if (!isANumber && isBNumber) return 1;  // b is a number so it should go after
           if (isANumber && !isBNumber) return -1; // a is a number so it should go after
             return [a[i], b[i]].map(x => x.charCodeAt()).reduce((a,b) => a - b); // a and b are of the same type so use natural order  
         }
        return 1; // a is shorter than b so shuold be before b

     } )      


$(document).ready(function() {

        $('#availableRecords').DataTable({
           "aoColumns": [
               { "sType": "letters-over-numbers" }, 
               {},
               {},
               {},
               {},
               {}         
             ]
          }) ;

        var availableTable = $('#availableRecords').DataTable();

    availableTable.order([[ 0, 'asc' ]]).draw(false);
            availableTable.rows().nodes().to$().find('input.alphaNemeric').mask("**", {placeholder:" "});
});

I am not sure if what I am trying will actually work but I am getting a syntax error on the code that starts with 'return [a[i], b[i]]'. Do you know what the syntax error issue for both letters-over-numbers-asc & letters-over-number-desc?

Thanks again for any help.

colin

Hi @hammerva ,

I just took a play with the natural plugin, and it does seem to do what you want, see the example here.

Could you take a look please and see if that would work,

Cheers,

Colin

hammerva

Thanks for the response. The example that you showed is showing the fields as 1Z, AA, and then A1. I am trying to figure out how to get it 'AA', 'A1' and then '1Z'. I understand that is the more "natural' way to sort things but unfortunately the SQL server seems to sort things that way so. trying to figure out the collection sort so I can manipulate that sort as well.

colin

It's only showing them like that at the start because the ordering is on the first column. I've changed it here so the default ordering now is on that column.

C

hammerva

I tried to modified the code to match your example. I am getting a warning message saying 'Cannot reinitalise Database' so I think it is ignoring the columDefs processing. when I run it just puts the code in descending order like Z-A, 9-1 so I guess it just ignores the columnDefs processing. Here is the code I have currently:

         var availableTable = $('#availableRecords').DataTable({columnDefs: [{
            targets:0, type: 'natural-nothml' }] 
          } ); 

        /* var availableTable = $('#availableRecords').DataTable();  */

    availableTable.order([[ 0, 'desc']]).draw(false);
           availableTable.rows().nodes().to$().find('input.alphaNemeric').mask("**", {placeholder:" "});

I tried doing availableTable.columnDefs but that is invalid.

Thanks for the help on this.

colin

Hi @hammerva ,

If it's saying your initialising more than once, I suspect this isn't all the code. Would you be able to link to your page? It would help to understand what's going on.

Cheers,

Colin

hammerva

I am not sure how to link my code since hasn't been moved to our servers. Plus our security is a pain even for people to work with (work with HUD). How do people usually link pages on here?

hammerva

Okay I was able to remove the message about 'Cannot reinitalise DataTables' but I can't figure out how you got the code to sort a field in DESC order and yet still shows the values in ascending order correctly. Here is the code I currently have:

          var availableTable = $('#availableRecords').DataTable({
             destroy: true,  
             columnDefs: [{
            targets:0, type: 'natural-nothml'}] ,
            order:[0,'desc']

        } );

        availableTable.rows().nodes().to$().find('input.alphaNemeric').mask("**", {placeholder:" "});

Thanks once again for the help

hammerva

Wish there was an edit option on posts. I think I was able to create a link of the page although I can't get it to run with the CSS processing and trying to get the servlet processing showing data processing.

http://live.datatables.net/huzomaye/1/edit

colin

Hi @hammerva ,

There's a lot of code in that test case - without seeing it running it'll put a lot of drain on our time. Could you make it runnable, or link a page where it does work, at least?

Cheers,

Colin