Jquery sort table data

Question

I got struck in sorting tds in table using jquery.

How can I call it for any table with id in my project?

var $sort = this;
var $table = $('#mytable');
var $rows = $('tbody &gt; tr',$table);
$rows.sort(function(a, b) {
    var keyA = $('td:eq(0)',a).text();
    var keyB = $('td:eq(0)',b).text();
    if($($sort).hasClass('asc')) {
        return (keyA &gt; keyB) ? 1 : 0;
    } else {
        return (keyA &lt; keyB) ? 1 : 0;
    }
});

Try [**this**](https://datatables.net/) plugin or [**this**](https://www.dynatable.com/) one. — Unknown User, Apr 07 '14 at 08:06
I'm not familiar with dynatable, but DataTables has a lot of extra functionality. If you're **only** looking to sort a table then DataTables is overkill. — aydow, Nov 28 '17 at 05:44

score 53 · Accepted Answer · answered Apr 07 '14 at 08:15

53

Something like this

function sortTable(table, order) {
    var asc   = order === 'asc',
        tbody = table.find('tbody');

    tbody.find('tr').sort(function(a, b) {
        if (asc) {
            return $('td:first', a).text().localeCompare($('td:first', b).text());
        } else {
            return $('td:first', b).text().localeCompare($('td:first', a).text());
        }
    }).appendTo(tbody);
}

could be called on any table like this

sortTable($('#mytable'),'asc');

FIDDLE

answered Apr 07 '14 at 08:15

adeneo

312,895
29
395
388

5

@Chandana - That's not my code, it's the code from the other answer, so can't help you there, mine works -> **http://jsfiddle.net/adeneo/d7Kbx/2/** – adeneo Apr 07 '14 at 09:19
1

Wouldn't this fail if the table data is numeric? I tried this one a website and it sorted considering the numbers as a String so `111` came before `2` – Rishav Oct 29 '18 at 20:36
@Rishav - Sure, not suprisingly, something that sorts text alphabetically, will most likely fail in sorting numbers numerically! Same Same, but diffelent. – adeneo Nov 01 '18 at 21:58
Slight modification: This ignores the first table row (if you have a header) tbody.find('tr:not(tr:eq(0))').sort(function (a, b) { – Kowalchick Dec 01 '21 at 16:36

Irvin Dominin · Answer 2 · 2014-04-07T08:24:27.297

I think you are missing the final "reset" function to sort the table. The desc code will not work because the order must be switched.

Code:

$('.sort').click(function (e) {
    var $sort = this;
    var $table = $('#mytable');
    var $rows = $('tbody > tr', $table);
    $rows.sort(function (a, b) {
        var keyA = $('td', a).text();
        var keyB = $('td', b).text();
        if ($($sort).hasClass('asc')) {
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA > keyB) ? 0 : 1;
        }
    });
    $.each($rows, function (index, row) {
        $table.append(row);
    });
    e.preventDefault();
});

Demo: http://jsfiddle.net/7wwvL/

UPDATE

More in general your function can be:

function sortTable($table,order){
    var $rows = $('tbody > tr', $table);
    $rows.sort(function (a, b) {
        var keyA = $('td', a).text();
        var keyB = $('td', b).text();
        if (order=='asc') {
            return (keyA > keyB) ? 1 : 0;
        } else {
            return (keyA > keyB) ? 0 : 1;
        }
    });
    $.each($rows, function (index, row) {
        $table.append(row);
    });
}

sortTable($('#mytable'),'asc')

Demo: http://jsfiddle.net/d7Kbx/

I am unable to sort this at jsfiddle.net/chandana2014/d7Kbx/1 — Kurkula, Apr 07 '14 at 09:18
@Chandana you can ignore the case using toUpperCase, demo: http://jsfiddle.net/d7Kbx/3/ — Irvin Dominin, Apr 07 '14 at 10:02

score 2 · Answer 3 · edited May 23 '17 at 12:03

Here's a modified version of Table sorting with jquery that works for me as a SIMPLE INTERNAL ASCENDING ROW SORTING FUNCTION

var $tbody = $('#mytable tbody');

$tbody.find('tr').sort(function(a, b) {
  var tda = $(a).attr('data-order'); // target order attribute
  var tdb = $(b).attr('data-order'); // target order attribute
  // if a < b return 1
  return tda > tdb ? 1
    // else if a > b return -1
    : tda < tdb ? -1
    // else they are equal - return 0    
    : 0;
}).appendTo($tbody);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr data-order="4">
      <td>d</td>
    </tr>
    <tr data-order="2">
      <td>b</td>
    </tr>
    <tr data-order="1">
      <td>a</td>
    </tr>
    <tr data-order="3">
      <td>c</td>
    </tr>
  </tbody>

score 2 · Answer 4 · edited Nov 06 '21 at 11:43

2

This will done by using jquery and bootstrap with search filter just call the jquery using id. For example i used this id #example you can use this as your table id and include the jquery and datatable jquery.

$(document).ready(function() {
$('#example').DataTable();
} );

edited Nov 06 '21 at 11:43

Zoe

27,060
21
118
148

answered Jun 21 '17 at 07:37

M. Lak

903
9
18

score 1 · Answer 5 · edited Feb 19 '18 at 16:24

Here is a modified version of the answer from Adeneo. This will sort the table based on the text in the specified column instead of only the first column. This will also look for the word "Name" in the second column and make sure that row stays on top (header row).

function SortTable(table, order, nr) {
var asc = order === 'asc',
    tbody = table.find('tbody');

tbody.find('tr').sort(function (a, b) {
    if ($('td:nth-child('+ nr +')', a).text() == "Name") return $('td:nth-child('+ nr +')', a).text();
    else if (asc) {
        return $('td:nth-child('+ nr +')', a).text().localeCompare($('td:nth-child('+ nr +')', b).text());
    } else {
        return $('td:nth-child('+ nr +')', b).text().localeCompare($('td:nth-child('+ nr +')', a).text());
    }
}).appendTo(tbody);}

Thanks mate! I have suggested a small edit to your answer which will make the choice of column dynamic :-) — Mister Verleg, Feb 19 '18 at 14:16

J Haagsman · Answer 6 · 2018-03-27T14:04:44.737

If you have more then 10 rows the function no longer works properly. This is an updated version from @irvin-dominin

 $('.js_sortme').click(function (e) {
  var $sort = this;
  var $table = $('#floorplan-table-list');
  var $rows = $('tbody > tr', $table);
  var $type = $($sort).attr('data-type');
  if ($($sort).hasClass('asc')) {
    $('.js_sortme', $table).removeClass('desc');
    $('.js_sortme', $table).removeClass('asc');
    $('.js_sortme', $table).removeClass('active');
    $($sort).addClass('desc');
    $($sort).addClass('active');
  } else {
    $('.js_sortme', $table).removeClass('desc');
    $('.js_sortme', $table).removeClass('asc');
    $('.js_sortme', $table).removeClass('active');
    $($sort).addClass('asc');
    $($sort).addClass('active');
  }

  $rows.sort(function (a, b) {
    var keyA = parseInt($('td.'+$type+'', a).attr('data-position'));
    var keyB = parseInt($('td.'+$type+'', b).attr('data-position'));
    if ($($sort).hasClass('asc')) {
        var result = keyA - keyB;
        if (result !== 0) { return result; }
        // Fetch secondary keys
        keyA = parseInt( $('td.'+$type+'', a).attr('data-position') );
        keyB = parseInt( $('td.'+$type+'', b).attr('data-position') );
        return keyA - keyB;             
    } else {
        var result = keyB - keyA;
        if (result !== 0) { return result; }
        // Fetch secondary keys
        keyA = parseInt( $('td.'+$type+'', a).attr('data-position') );
        keyB = parseInt( $('td.'+$type+'', b).attr('data-position') );
        return keyB - keyA;             
    }
  });
  $.each($rows, function (index, row) {
    $table.append(row);
  });
  e.preventDefault();
});

The table row will look like this, using the classname as type: making each kolom sortable on its own;

  <tr>
    <td class="A" data-position="1">a-value-1</td>
    <td class="B" data-position="3">b-value-3</td>
  </tr>
  <tr>
    <td class="A" data-position="2">a-value-2</td>
    <td class="B" data-position="2">b-value-2</td>
  </tr>
  <tr>
    <td class="A" data-position="3">a-value-3</td>
    <td class="B" data-position="1">b-value-1</td>
  </tr>

score 0 · Answer 7 · answered Dec 21 '18 at 19:26

In case people show up here looking for a table sorting function, but don't want to pull in jQuery to do it, here's an equivalent solution using browser-native code:

function sortTable(table, order, selector) {
    selector = selector || 'th:first-child, td:first-child';
    var asc = order === 'asc';

    var tbody = table.querySelector('tbody') || table;
    var nodes = tbody.querySelectorAll('tr');
    var sortedNodes = Array.prototype.slice.apply(nodes);
    sortedNodes.sort(function (a, b) {
        var textA = a.querySelector(selector).textContent;
        var textB = b.querySelector(selector).textContent;
        if (asc) {
            var temp = textB;
            textB = textA;
            textA = temp;
        }
        return textA.localeCompare(textB);
    });
    tbody.textContent = '';
    for (var i = 0; i < sortedNodes.length; i++) {
        tbody.appendChild(sortedNodes[i]);
    }
}

Jquery sort table data

7 Answers7

UPDATE

Linked

Related