Issue with Sorting a HTML Table Data Using Jquery

Question

I've a table displaying table with static data and trying to sort using jquery.

Code:

jQuery(document).ready(function() {
jQuery('#sortTable').dataTable( {
        "order": [[ 2, "asc" ]]
    });
  });

HMTL:

<table class="table" id="sortTable" data-page-length="25">
<thead>
        <tr><th><b>name</b></th><th><b>number</b></th><th><b>Date</b></th></tr>
         </thead>
   <tr><td>a</td><td>10.1</td> <td>12/31/2015</td></tr>
   <tr><td>d</td><td>1.1</td> <td>12/1/2015</td></tr>
   <tr><td>a</td><td>2.3</td> <td>12/2/2015</td></tr>
   <tr><td>e</td><td>1.7</td> <td>12/3/2015</td></tr>
   <tr><td>f</td><td>9.1</td> <td>12/31/2016</td></tr>
</table>

When I click on the number to sort, the sorting is not right as it is treating number as a String, is there anyway that I can resolve this issue...

Stiliyan · Accepted Answer · 2016-09-27 10:21:38Z

1

You can achieve this with the datetime-moment plugin.

Load its dependencies into the DOM, under jquery and data-tables, but above the jQuery(document).ready() block:

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script>

Load the plugin with the correct 12/1/2015 date format before initializing dataTable:

jQuery(document).ready(function() {
    jQuery.fn.dataTable.moment( 'M/D/YYYY' ); // use MM if months have leading 0
    jQuery('#sortTable').dataTable( {
        "order": [[ 2, "asc" ]]
    });
});

edited Sep 27, 2016 at 10:21

answered Sep 27, 2016 at 2:38

Stiliyan

1,1742 gold badges9 silver badges15 bronze badges

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

1 Comment

TP_JAVA Over a year ago

Thanks for that, but If i want to sort on number, second column <td>10.1</td> ..how can we do this?

Collectives™ on Stack Overflow

Issue with Sorting a HTML Table Data Using Jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related