All geek questions in one place

DataTables.js Sort columns containing full-text HTML links

I am trying to sort columns in . I want to sort the columns numerically.

The sample documentation has an example of automatically detecting sorting of HTML DataTables . I tried this, but it does not solve my problem - it parses the text from HTML correctly, however it treats the resulting text as a string, not an integer.

Output Example:

0, 0, 1, 14, 67, 67, 7

Required Conclusion:

 0, 0, 1, 7, 14, 67, 67

How can I parse the text <a> as an integer before sorting?

Code

Jsfiddle

This is the original JSFiddle without additional updates: http://jsfiddle.net/adamtsiopani/V4Ymr/

Javascript

 $(document).on('ready', function() { $('.data-table').dataTable({ "bPaginate": true, "bFilter": true, "bSort": true, "bAutoWidth": false, "iDisplayLength": 100, "sPaginationType": "full_numbers", "sDom": '<"tools"T><"top"flip>rt<"bottom"lfip><"clear">', "oTableTools": { "aButtons": [ "copy", "csv", "xls", "pdf", { "sExtends": "collection", "sButtonText": "Save", "aButtons": [ "csv", "xls", "pdf" ] } ] } }); $.fn.dataTableExt.aTypes.push( function ( sData ) { return 'html'; } ); });

HTML

 <table class="data-table"> <thead> <tr> <th scope="col">Specialty</th> <th scope="col">Friday<br>21/01/2011</th> <th scope="col">Saturday<br>22/01/2011</th> <th scope="col">Sunday<br>23/01/2011</th> <th scope="col">Monday<br>24/01/2011</th> <th scope="col">Tuesday<br>25/01/2011</th> <th scope="col">Wednesday<br>26/01/2011</th> <th scope="col">Thursday<br>27/01/2011</th> </tr> </thead> <tbody> <tr> <td><a href="#">ACCIDENT AND EMERGENCY</a></td> <td><a href="#">5</a></td> <td><a href="#">14</a></td> <td><a href="#">67</a></td> <td><a href="#">45</a></td> <td><a href="#">43</a></td> <td><a href="#">28</a></td> <td><a href="#">36</a></td> </tr> <tr> <td><a href="#">ANAESTHETICS</a></td> <td><a href="#">36</a></td> <td><a href="#">5</a></td> <td><a href="#">14</a></td> <td><a href="#">43</a></td> <td><a href="#">28</a></td> <td><a href="#">67</a></td> <td><a href="#">45</a></td> </tr> <tr> <td><a href="#">CARDIOLOGY</a></td> <td><a href="#">5</a></td> <td><a href="#">14</a></td> <td><a href="#">67</a></td> <td><a href="#">45</a></td> <td><a href="#">43</a></td> <td><a href="#">28</a></td> <td><a href="#">36</a></td> </tr> <tr> <td><a href="#">HEPATOLOGY</a></td> <td><a href="#">2</a></td> <td><a href="#">0</a></td> <td><a href="#">1</a></td> <td><a href="#">1</a></td> <td><a href="#">1</a></td> <td><a href="#">0</a></td> <td><a href="#">1</a></td> </tr> <tr> <td><a href="#">GASTROENTEROLOGY</a></td> <td><a href="#">0</a></td> <td><a href="#">4</a></td> <td><a href="#">7</a></td> <td><a href="#">0</a></td> <td><a href="#">0</a></td> <td><a href="#">0</a></td> <td><a href="#">2</a></td> </tr> <tr> <td><a href="#">PLASTIC SURGERY</a></td> <td><a href="#">6</a></td> <td><a href="#">0</a></td> <td><a href="#">0</a></td> <td><a href="#">8</a></td> <td><a href="#">16</a></td> <td><a href="#">5</a></td> <td><a href="#">4</a></td> </tr> <tr> <td><a href="#">UROLOGY</a></td> <td><a href="#">3</a></td> <td><a href="#">0</a></td> <td><a href="#">0</a></td> <td><a href="#">0</a></td> <td><a href="#">0</a></td> <td><a href="#">1</a></td> <td><a href="#">2</a></td> </tr> </tbody> </table>
+4
source share
3 answers

Here's the solution: http://jsfiddle.net/adamtsiopani/V4Ymr/8/

 jQuery.fn.dataTableExt.oSort['numeric-html-asc'] = function(a,b) { a = parseInt($(a).text()); b = parseInt($(b).text()); return ((a < b) ? -1 : ((a > b) ? 1 : 0)); }; jQuery.fn.dataTableExt.oSort['numeric-html-desc'] = function(a,b) { a = parseInt($(a).text()); b = parseInt($(b).text()); return ((a < b) ? 1 : ((a > b) ? -1 : 0)); }; $('.data-table').dataTable({ //set the sType to the custom type provided above "aoColumns": [ null, { "sType": "numeric-html" }, { "sType": "numeric-html" }, { "sType": "numeric-html" }, { "sType": "numeric-html" }, { "sType": "numeric-html" }, { "sType": "numeric-html" }, { "sType": "numeric-html" } ] });

Based answer

+10
source

An old question, but datatables> = 1.10 now does this automatically.

+2
source

How about this example? It uses the sorting plugin for DataTables to achieve sorting, but deals with the same sorting type that you want.

0
source

Source: https://habr.com/ru/post/1492166/

More articles:


All Articles