CODEWITHSUNDEEP
jquerysorting
Kurkula
Kurkula

Reputation: 6762

Jquery sort table data

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;
var $table = $('#mytable');
var $rows = $('tbody > 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 > keyB) ? 1 : 0;
    } else {
        return (keyA < keyB) ? 1 : 0;
    }
});

Upvotes: 31

Views: 65418

Answers (7)

M. Lak
M. Lak

Reputation: 911

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

Upvotes: 2

Chris
Chris

Reputation: 10368

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

Upvotes: 0

J Haagsman
J Haagsman

Reputation: 341

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>

Upvotes: 1

Nicolai Dutka
Nicolai Dutka

Reputation: 350

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

Upvotes: 1

ericjam
ericjam

Reputation: 1519

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>

Upvotes: 2

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 6

adeneo
adeneo

Reputation: 318332

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

Upvotes: 55

Related Questions