jQuery

Question

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

How do you expect us to know without seeing the table? Make a fiddle 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
– adeneo, Commented May 10, 2012 at 23:48
You asked the very same question couple of minutes ago, wad downvoted and then deleted. why doing it again? stackoverflow.com/questions/10543476/… — gdoron
– gdoron, Commented May 10, 2012 at 23:57

Zuul · Accepted Answer · 2014-06-16 16:09:03Z

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>

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

edited Jun 16, 2014 at 16:09

answered May 11, 2012 at 0:06

Zuul

16.3k6 gold badges63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mindplay.dk Over a year ago

Here's a tiny jQuery plug-in that lets you sort lists, tables, or anything else, by providing a custom callback that returns the value to sort by.

Bartosz · Accepted Answer · 2015-05-21 10:37:00Z

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

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

Collectives™ on Stack Overflow

jQuery - sort a table after adding a row to it

2 Answers 2

HTML

JQUERY

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

HTML

JQUERY

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related