Jquery sort table data

Question

I got struck in sorting tds in table using jquery.

My Demo fiddle

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

var $sort = this;
v         


        

Answer 1

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>

Answer 2

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>

Answer 3

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

Answer 4

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);}

Answer 5

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/

Answer 6

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();
} );

Demo Here