DataTables.net how to order only with custom code

Question

I am trying to add only custom code for ordering, while clicking a table th. I added a click event for this like:

$div.find('table').on('click', 'thead th', async function () {                               
    doSearch();                
});

But it seems to order the table by the default code first and then it orders with my custom code. How can I disable the default code?

it is just the example table from DataTable.net in 1st example. (Initialized as: $('#example').DataTable();) — iakwvina
– iakwvina, Commented Sep 3, 2021 at 14:06
@iakwvina did you see datatables.net/examples/basic_init/table_sorting.html ? With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the order initialisation parameter, you can set the table to display the data in exactly the order that you want. — Twisty
– Twisty, Commented Sep 3, 2021 at 14:11
I also found this: datatables.net/forums/discussion/32899/override-order-function — Twisty
– Twisty, Commented Sep 3, 2021 at 14:14
@iakwvina please edit your post and include a Minimal, Reproducible Example: stackoverflow.com/help/minimal-reproducible-example — Twisty
– Twisty, Commented Sep 3, 2021 at 14:26

andrewJames · Accepted Answer · 2021-09-03 15:15:10Z

One DataTables way to do this is to use the $.fn.dataTable.ext.type.order object as follows:

Decide on a name you want to use for your custom sorting "type". For example, my-custom-sort. This is how you differentiate your sorting function from various other built-in sorting functions which are provided by DataTables, or which may have been added via plug-ins.

This is how you avoid using the default sorting function.

Use that "type" name in your DataTable definition and attach it to the relevant columns which need to be sorted in your custom way - for example:

columnDefs: [
  { "type": "my-custom-sort", targets: "_all" }
]

In the above example, I have applied this type name to every column in the table.

Add your "type" to the DataTables $.fn.dataTable.ext.type.order object, which is where the collection of different sorting "types" is stored:

$.extend( $.fn.dataTable.ext.type.order, {
  "my-custom-sort-asc": function (val_1, val_2) {
    // your sorting code here - or a call to a function
  }
} );

$.extend( $.fn.dataTable.ext.type.order, {
  "my-custom-sort-desc": function (val_1, val_2) {
    // your sorting code here - or a call to a function
  }
} );

In the above code I actually added two entries, by adding -asc and -desc suffixes to my custom type name. This allows us to perform different versions of our custom sorting, depending on which way the data needs to be sorted.

These are pre-defined suffixes, which are recognized by Datatables.

Provide your sort function(s) - either directly in the above anonymous functions, or separately. To do this you need to provide code which returns one of the following:

a positive value
a negative value
zero

You calculate this return value based on the two input values val_1 and val_2 which represent a pair of values from the column being sorted.

To clarify point (4): DataTables delegates sorting to the JavaScript sort() function. You can read full details in that documentation.

Here is a very basic example. All it does is reverse the meanings of "asc" and "desc":

var dataSet = [
    {
      "id": "123",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh"
    },
    {
      "id": "456",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York"
    }
  ];

$(document).ready(function() {

  $.extend( $.fn.dataTable.ext.type.order, {

    "my-custom-sort-asc": function ( val_1, val_2 ) {
      if (val_1 < val_2) {
        return 1;
      } else if (val_1 > val_2) {
        return -1;
      } else {
        return 0;
      }
    },

    "my-custom-sort-desc": function ( val_1, val_2 ) {
      if (val_1 < val_2) {
        return -1;
      } else if (val_1 > val_2) {
        return 1;
      } else {
        return 0;
      }
    }

  } );

var table = $('#example').DataTable( {
  data: dataSet,
  columns: [
    { title: "ID", data: "id" },
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "Start date", data: "start_date" },
    { title: "Salary", data: "salary" }
  ],
  columnDefs: [
    { "type": "my-custom-sort", targets: "_all" }
  ]

} ); 

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
    </table>

</div>



</body>
</html>

Collectives™ on Stack Overflow

DataTables.net how to order only with custom code

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