CODEWITHSUNDEEP
javascriptsortingdatatables
S.Chrobak
S.Chrobak

Reputation: 115

DataTables js didn't sort strings correct

I use the latest DataTables.js with jquery 3.3.1.

This is the table data structure

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 100 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
        <tr>
            <td>Row 11 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

Should sort row 1 

to row 1, row 11, row 100
or row 100, row 11, row 1

but it do

row 1, row 100, row 11

or

row 11, row 100, row 1

This is the normal sort behavior in javascript, what also not sorting correct.

Any ideas?

Upvotes: 0

Views: 50

Answers (2)

S.Chrobak
S.Chrobak

Reputation: 115

I was looking how DataTables js is sorting par Example

row 1, row 100, row 11

Now, i hope, i found a good solution and also develop some DataTable with native JavaScript.

Here fond the source-code: https://github.com/chrobaks/netcodev-datatable

Here you can find a demo: https://www.netcodev.de/datatable/

Upvotes: 0

M A Salman
M A Salman

Reputation: 3820

Set type="textNum" in column definition and then implement custom sort using jquery.extend jQuery.extend( jQuery.fn.dataTableExt.oSort,{//comparator function})

jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "textNum-asc": function ( a, b ) {
        return a.match(/\s*\d*\s/)[0]- b.match(/\s*\d*\s/)[0]
    },
    "textNum-desc": function ( a, b ) {
       return b.match(/\s*\d*\s/)[0]- a.match(/\s*\d*\s/)[0]
    }
});

Run the following snippet 

$("#table_id").dataTable({
"columnDefs": [
    { type: 'textNum',"targets": 0 },
    { type: 'textNum',"targets": 1 },
  ]
})
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "textNum-asc": function ( a, b ) {
       //regex will match first number i.e number to right of row
        return a.match(/\s*\d*\s/)[0]- b.match(/\s*\d*\s/)[0] 
    },
    "textNum-desc": function ( a, b ) {
       return b.match(/\s*\d*\s/)[0]- a.match(/\s*\d*\s/)[0]
    }
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 6 Data 1</td>
            <td>Row 4 Data 2</td>
        </tr>
         <tr>
            <td>Row 3 Data 1</td>
            <td>Row 7 Data 2</td>
        </tr>
        <tr>
            <td>Row 10 Data 1</td>
            <td>Row 0 Data 2</td>
        </tr>
         <tr>
            <td>Row 1 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
        <tr>
            <td>Row 11 Data 1</td>
            <td>Row 3 Data 2</td>
        </tr>
    </tbody>
</table>

Upvotes: 1

Related Questions