Question

Hi I am using a table manipulation (sorting) script taken directly from Learning jQuery 1.3 and I have my own script running which initally limits the table rows displayed to 10 :

JavaScript

$(document).ready(function () {
$('#table_wrapper').removeClass('top_noround');
var numShown = 10; // Initial rows shown & index
var numRows = $('tbody').find('tr').length; // 7
var numLeft = numRows - numShown;

// Hide rows and add clickable div
$('#table_wrapper tbody').find('tr:gt(' + (numShown - 1) + ')').hide().end()
$('#table_wrapper').after('<div id="more"><a>Show all free bet offers <span>(' + numLeft + ' more)</span></a></div>');


$('#more').toggle(

function () {
    numShown = numShown + numRows;
    $('tbody').find('tr:lt(' + numShown + ')').show();
    $("#more a").html("Show top 10 offers");
}, function () {
    numShown = 10;
    $('tbody').find('tr:gt(' + (numShown - 1) + ')').hide();
    $('#more a').html('Show all free bet offers <span>(' + numLeft + ' more)</span>');
    $(window).scrollTop($('th').offset().top);
});

})

HTML

<div id="table_wrapper" class="top_noround">
    <table class="sortable jquery-thead">
        <thead>
            <tr>
                <th>
<!--Empty, no sort on this column-->
                </th>
                <th>
<!--Empty, no sort on this column-->
                </th>
                <th class="sort-numeric ">
                    <a class="button blue small">
                        Column 3 
                    </a>
                </th>
                <th class="sort-numeric">
                    <a class="button green small">
                        Column 4 
                    </a>
                </th>
                <th class="sort-numeric">
                    <a class="button magneta small">
                        Column 5 
                    </a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Row 1 Column 1 Data
                </td>
                <td>
                    Row 1 Column 2 Data
                </td>
                <td>
                    Row 1 Column 3 Data
                </td>
                <td>
                    Row 1 Column 4 Data
                </td>
                <td>
                    Row 1 Column 5 Data
                </td>
            </tr>
            <!--MORE ROWS HERE (OVER 10) -->
        </tbody>
    </table>
</div>

The problem I am having is that if I click on the thead on the column I want to sort it will only resort the 10 rows displayed, it does not take into account the other rows that extend below 10 rows which are currently hidden as a result of my script. If I click to show all rows of the table and then sort that is working fine.

Thanks

Answer 1

I would recommend that you use jQuery tablesorter and the pages plugin. There is a good example on there webpage. You can show X many rows but when you sort the data you will sort all of it not just whats visible.

I only show the pager if there are more then 10 rows of data, to do this I use a helper function in my main JavaScript file that I run on document ready.

function pager ($table, $pager) {
    if ($table.find('tbody tr').length > 10) {
        $table.tablesorterPager({ container: $pager });
        $pager.show();
    } else {
        $pager.hide();
    }
}

$(document).ready(function () {
    $("table.tablesorter").tablesorter();
    pager($("table.tablesorter"), $("#pagerId"));
});