11

I have 2 tables, one table has 2 columns, the other table has 1 column. When you click on a row, that row is removed from the table and a new TR is added to the end of the opposite table. Now I want to sort it alphabetically.

jQuery plugins like tablesorter are total overkill for what I want to do. Is there a simple way I can sort the table?

Edit: Fiddle

Community
  • 1
  • 1
Slowfib
  • 291
  • 1
  • 4
  • 15
  • http://stackoverflow.com/questions/3160277/jquery-table-sort – Jon Friskics May 10 '12 at 23:48
  • 1
    How do you expect us to know without seeing the table? Make a [fiddle](http://jsfiddle.net) or at least post some code? Should be straight forward with just a couple of rows, but we like to have something to play with, not just "I have this and want that". – adeneo May 10 '12 at 23:48
  • You asked the very same question couple of minutes ago, wad downvoted and then deleted. why doing it again? http://stackoverflow.com/questions/10543476/jquery-sort-table-after-adding-data-to-it – gdoron May 10 '12 at 23:57

2 Answers2

21

Here you have a simple table sorter with a Fiddle demo here:

HTML

<table id="sort-table">
    <tbody>
        <tr><td>he</td></tr>
        <tr><td>stackoverflow</td></tr>
        <tr><td>by</td></tr>
        <tr><td>vote</td></tr>
        <tr><td>post</td></tr>
        <tr><td>And</td></tr>
        <tr><td>clicking</td></tr>
        <tr><td>up</td></tr>
        <tr><td>did</td></tr>
    </tbody>
</table>
<br>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>

JQUERY

$('.sort-table').click(function(e) {
    e.preventDefault();                    // prevent default behaviour

    var sortAsc = $(this).hasClass('asc'), // ASC or DESC sorting
        $table  = $('#sort-table'),        // cache the target table DOM element
        $rows   = $('tbody > tr', $table); // cache rows from target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).text();
        var keyB = $('td',b).text();

        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;  // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;  // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                  // append rows after sort
    });
});
Zuul
  • 16,217
  • 6
  • 61
  • 88
  • Here's a [tiny jQuery plug-in](http://jsfiddle.net/mindplay/H2mrp/) that lets you sort lists, tables, or anything else, by providing a custom callback that returns the value to sort by. – mindplay.dk Oct 04 '13 at 12:49
3

I don't have enough reputation to comment on Zuul's answer, but it is not always working. Check this fiddle:

$('.sort-table').click(function(e) {
    e.preventDefault();                        // prevent default button click behaviour

    var sortAsc = $(this).hasClass('asc'),     // ASC or DESC
        $table  = $('#sort-table'),            // cache the target table DOM element
        $rows   = $('tbody > tr', $table);     // cache all rows from the target table body

    $rows.sort(function(a, b) {

        var keyA = $('td',a).text();
        var keyB = $('td',b).text();

        if (sortAsc) {
            return (keyA > keyB) ? 1 : 0;     // A bigger than B, sorting ascending
        } else {
            return (keyA < keyB) ? 1 : 0;     // B bigger than A, sorting descending
        }
    });

    $rows.each(function(index, row){
      $table.append(row);                    // append rows after sort
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<table id="sort-table">
    <tbody>
<tr><td>Text 2003-01-27.pdf</td></tr>
<tr><td>Text 2004-03-23.pdf</td></tr>
<tr><td>Text 2004-04-01.pdf</td></tr>
<tr><td>Text 2004-12-31.pdf</td></tr>
<tr><td>Text 2010-04-14.pdf</td></tr>
<tr><td>Text 2011-02-07.pdf</td></tr>
<tr><td>Medic 2004-08-24.pdf</td></tr>
<tr><td>Bank 2009-10-06.pdf</td></tr>
<tr><td>Family 2010-10-19.pdf</td></tr>
<tr><td>Statement 2002-03-06.pdf</td></tr>
<tr><td>Statement 2002-03-06.pdf</td></tr>
<tr><td>Statement 2004-06-30.pdf</td></tr>
<tr><td>Statement 2010-03-31.pdf</td></tr>
<tr><td>Next.pdf</td></tr>
<tr><td>School 2002-03-04.pdf</td></tr>
<tr><td>School 2003-06-23.pdf</td></tr>
<tr><td>School 2010-06-10.pdf</td></tr>
<tr><td>Deal 2002-03-04.pdf</td></tr>
<tr><td>Deal 2002-06-03.pdf</td></tr>
<tr><td>Deal 2003-06-03.pdf</td></tr>
<tr><td>Vacation 2009-08-10.pdf</td></tr>
<tr><td>Vacation 2007-03-26.pdf</td></tr>
<tr><td>Vacation 2009-08-10.pdf</td></tr>
<tr><td>Vacation 2008-03-19.pdf</td></tr>
<tr><td>Vacation 2009-03-23.pdf</td></tr>
<tr><td>Vacation 2012-09-21.pdf</td></tr>
<tr><td>Vacation 2012-09-17.pdf</td></tr>
<tr><td>Vacation 2014-09-25.pdf</td></tr>
<tr><td>Vacation 2014-10-23.pdf</td></tr>
<tr><td>Work 2004-06-21.pdf</td></tr>
<tr><td>Work 2009-09-09.pdf</td></tr>
<tr><td>Work 2010-05-01.pdf</td></tr>
<tr><td>AGR 2002-03-05.pdf</td></tr>
<tr><td>AGR 2004-10-28.pdf</td></tr>
<tr><td>AGR 2005-11-22.pdf</td></tr>
<tr><td>AGR 2011-01-20.pdf</td></tr>
    </tbody>
</table>
<br>
<button class="sort-table asc">sort ASC</button>
<button class="sort-table desc">sort DESC</button>

JS FIDDLE

Bartosz
  • 41
  • 4
  • I think I found a solution: replace _return (keyA > keyB) ? 1 : 0;_ with _return $.isNumeric(keyA) && $.isNumeric(keyB) ? keyA - keyB : keyA.localeCompare(keyB)_ and similarly second case – Bartosz May 21 '15 at 12:46