jQuery DataTables: Unsorted View

Question

Does the jQuery DataTables plugin support the concept of "unsorted" or "natural sort order".

That is -- I have a table where the order that the rows are printed out is significant.

<tr><td>One</td></tr>
<tr><td>Two</td></tr>
<tr><td>Three</td></tr>

There are times where users will want to sort these alphabetically. There are also times where they'll want to see them in the order that they appear in the HTML source.

Short of creating a specific numerical column that tracks sort order

<tr><td>1</td><td>One</td></tr>
<tr><td>2</td><td>Two</td></tr>
<tr><td>3</td><td>Three</td></tr>

Does the DataTables plugin have support for a "unordered" sort. The behavior I'm looking for (that I've seen in other computer user interfaces) is where one click sorts one way, a second click sorts the other, and a third click restores the "unsorted" state.

Patrick Evans · Accepted Answer · 2016-01-26 03:41:23Z

There is an API plugin for restoring the original order. Include the plugin and call order.neutral() on the table.

If you are looking to actually add functionality of the third click you would probably have to modify the click handler for the sort arrows.

$(document).ready(function() {
    $('#example').DataTable( {
        "order": [[ 0, "desc" ]]
    } );
    setTimeout(function(){
      var table = $('#example').DataTable();
      table.order.neutral().draw();
    },3000);
} );

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.10/api/order.neutral().js"></script>

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css"> 

<table id="example" class="display" cellspacing="0" width="100%">
  <thead>
    <tr><th>Column</th></tr>
  </thead>
  <tbody>
  <tr><td>Sixteen</td></tr>
  <tr><td>Two</td></tr>
  <tr><td>Three</td></tr>
  <tr><td>Boots</td></tr>
  <tr><td>One</td></tr>
  </tbody>
</table>

Collectives™ on Stack Overflow

jQuery DataTables: Unsorted View

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related