0

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

Michael
  • 575
  • 1
  • 8
  • 19
  • 1
    jQuery 1.3? You're a bit behind the times, mate. The latest version is 1.5.1. jQuery 1.3 came out over two years ago. Also, are you trying to learn jQuery, or just get some code working? If it's the latter, there are tons of already-written jQuery grid plugins. See [this question](http://stackoverflow.com/questions/2402953/javascript-data-grid-for-millions-of-rows) for ones that can handle many rows. – Matt Ball Mar 12 '11 at 16:49
  • @Matt Ball, I know the latest version is 1.5.1, I am referencing the book which is version 1.3. – Michael Mar 12 '11 at 16:51
  • 1
    The book came out in February 2009, right around when jQuery 1.3 did. The "1.3" in the title isn't referring to version of the book. – Matt Ball Mar 12 '11 at 16:57
  • I don't see anything in your javascript that seems to be for doing any sorting - am I missing something? – duncan Mar 12 '11 at 17:07
  • I can't include the sorting script, I think thay would be breaching copyright of the book. – Michael Mar 12 '11 at 17:13

1 Answers1

0

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"));
});
Bjarki Heiðar
  • 3,117
  • 6
  • 27
  • 40
  • Hi, yes I have used tablesorter in the past, I think from memory I abandoned it because it was sorting the that were empty and I could't stop it sorting in both directions. – Michael Mar 12 '11 at 17:15
  • You can add your own sorting rules if needed. with a parser http://stackoverflow.com/questions/4893505/jquery-tablesorter-addparser-for-26-jul-date-format – Bjarki Heiðar Mar 12 '11 at 17:24