javascript - Sort Table Rows according to table data

For example, I have a code:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

I want this to be sorted like this:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

I used this code:

function sortNum(a, b) {
    return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
    $(function() {
        var elems = $.makeArray($('tr:has(.price)').remove())
        elems.sort(sortNum)
        $('table#information').append($(elems));
    });
}

this works but, the problem is, the output is like this:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

The empty one goes to top. I want the empty ones in the bottom.

Thanks

For example, I have a code:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

I want this to be sorted like this:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
</table>

I used this code:

function sortNum(a, b) {
    return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;
}
function sortTheTable(){
    $(function() {
        var elems = $.makeArray($('tr:has(.price)').remove())
        elems.sort(sortNum)
        $('table#information').append($(elems));
    });
}

this works but, the problem is, the output is like this:

<table>
    <tr>
        <th>name</td>
        <th>price</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort"></td>
    </tr>
    <tr>
        <td>h</td>
        <td class="sort">2</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">3</td>
    </tr>
    <tr>
        <td>a</td>
        <td class="sort">5</td>
    </tr>
    <tr>
        <td>p</td>
        <td class="sort">6</td>
    </tr>
    <tr>
        <td>c</td>
        <td class="sort">8</td>
    </tr>
    <tr>
        <td>b</td>
        <td class="sort">20</td>
    </tr>
</table>

The empty one goes to top. I want the empty ones in the bottom.

Thanks

Share Improve this question edited Jun 20, 2012 at 11:51 Felix Christy 2,1931 gold badge19 silver badges32 bronze badges asked Jun 20, 2012 at 9:28 LIGHT 5,71211 gold badges38 silver badges79 bronze badges

So why don't you update your sortNum() function to behave differently for blanks? Also, note that your sortNum() is wrong even ignoring behaviour for empty values, because a .sort() parison function is supposed to return a negative number for less than, a positive number for greater than, or zero for equal (but yours returns only 0 or 1). And you're using .find('.price') when no such class appears in your html. – nnnnnn Commented Jun 20, 2012 at 9:36
Check this jsfiddle/joycse06/YZcQD – Prasenjit Kumar Nag Commented Jun 20, 2012 at 9:50

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

Instead of

return 1 * $(a).find('.sort').text() < 1 * $(b).find('.sort').text() ? 1 : 0;

insert

return 1 * $(a).find('.sort').text() < 1 * $(b).find('.price').text() ? 0 : 1;

http://jsfiddle/E56j8/

You have number of plugins to sort it why are you reinventing the wheel. Here is one such plugin

Link

<script type="text/javascript" src="/path/to/jquery-latest.js"></script> 
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script> 

$("#myTable").tablesorter();

Have a look at Sorting - we're doing it wrong. A simple jQuery plugin for sorting stuff is available here.

some notes on your code:

// you're binding a document ready event within a function call? 
// looks the wrong way 'round, to me
function sortTheTable(){
    $(function() {
        // 1) you probably want to use .detach() over .remove()
        // 2) "tr:has(.price)" will match ALL table rows 
        // containing an element with the class .price
        // even if they're children of different <table>s!
        // 3) $('.selector') is already "an array", at least it's sortable right away.
        // there's no need for $.makeArray() here
        var elems = $.makeArray($('tr:has(.price)').remove())
        elems.sort(sortNum)
        // "#information" is a sufficient (and more efficient) selector, 
        $('table#information').append($(elems));
    });
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Sort Table Rows according to table data - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)