DataTables js didn't sort strings correct

Question

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?

Sure, your rows are sorted lexically (in alphabetical order). if you would append your jQuery code, I may suggest what to change to get it fixed. — Yevhen Horbunkov
– Yevhen Horbunkov, Commented Mar 30, 2020 at 18:22
It looks like you want to sort based on the numeric values embedded in some text. This looks very similar to this question: Datatables sorting - how to ignore text in column?. Does that help? — andrewJames
– andrewJames, Commented Mar 30, 2020 at 18:23
I use the default settings like in the examples of Datatables js. So it is only the jquery load function call. Please look to my answer. — S.Chrobak
– S.Chrobak, Commented Mar 30, 2020 at 18:46

M A Salman · Accepted Answer · 2020-03-30 19:43:12Z

1

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>

answered Mar 30, 2020 at 19:43

M A Salman

3,8302 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

S.Chrobak Over a year ago

Thanks Supercool, but i work with Vanilla JS.. you only need less than 15 lines of code to sort correct with holding index.

M A Salman Over a year ago

You said in the question name " sorting in datatable jquery" thats why i replied with this answer

M A Salman Over a year ago

In the vanilla js you can use c.sort(function(a,b) { return a.split("\s")[1]-b.split("\s")[1] } just one line

S.Chrobak · Accepted Answer · 2020-06-27 14:54:53Z

0

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/

edited Jun 27, 2020 at 14:54

answered Mar 30, 2020 at 18:55

S.Chrobak

1152 silver badges10 bronze badges

Collectives™ on Stack Overflow

DataTables js didn't sort strings correct

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related