tablesorter problems with 2 table in a page

StackOverflow https://stackoverflow.com/questions/21602017

سؤال

I try to put 2 tables in a same page using jquery plugin tablesorter .. But if do it, my second table does not work correctly..

In my second table, i have not the header name of my second table,

You can see it here :http://jsfiddle.net/9hHx5/



<html>
<head>

    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.min.js"></script>
    <script type="text/javascript" src="jquery.tablesorter.scroller.js"></script>


    <script type="text/javascript">

        $(document).ready(function() {
            $('table.tablesorter').tablesorter({
                scrollHeight: 150,
                widgets: ['zebra','scroller']
             });

            //Setup window.resizeEnd event
            $(window).bind('resize', window_resize);
            $(window).bind('resizeEnd', function (e) {
                /*
                    IE calls resize when you modify content, so we have to unbind the resize event
                    so we don't end up with an infinite loop. we can rebind after we're done.
                */
                $(window).unbind('resize', window_resize);
                $('table.tablesorter').each(function(n, t) {
                    if (typeof t.resizeWidth === 'function') t.resizeWidth();
                });
                $(window).bind('resize', window_resize);
            });
        });

        function window_resize() {
            if (this.resize_timer) clearTimeout(this.resize_timer);
            this.resize_timer = setTimeout(function () {
                    $(this).trigger('resizeEnd');
                }
                , 250
            );
        }

    </script>

    <link rel="stylesheet" href="style.css" type="text/css" />

    </head>
    <body>


        <div class="inner-header">Demo</div>
            <table id="table1" cellspacing="0" cellpadding="0" class="tablesorter">
                <thead>
                <tr>
                    <th class="yr">Year</th>
                    <th>Artist</th>
                    <th>Single</th>
                    <th>Album</th></tr>
                </thead>
                <tbody>
                <tr><td class="yr">1979</td><td>Specials</td><td>Gangsters</td><td>Non-album single</td></tr>
                <tr><td class="yr">1979</td><td>Specials</td><td>A Message to You, Rudy</td><td>Specials </td></tr>
                <tr><td class="yr">1980</td><td>Specials</td><td>Too Much Too Young</td><td>Specials</td></tr>
                <tr><td class="yr">1980</td><td>Specials</td><td>Rat Race</td><td>Non-album single</td></tr>
                <tr><td class="yr">1980</td><td>Specials</td><td>Stereotype</td><td>More Specials</td></tr>
                <tr><td class="yr">1980</td><td>Specials</td><td>Do Nothing</td><td>More Specials</td></tr>
            </tbody>
            </table>


            <table id="table2" cellspacing="0" cellpadding="0" class="tablesorter">
                <thead>
                <tr>
                    <th>People</th><th>Age</th><th>Birthday</th>
                </thead>
                <tbody>
                <tr>
                    <td class="yr">XYZ</td><td>12</td><td>12/15/2012</td></tr>
                <tr>
                    <td class="yr">RZE</td><td>36</td><td>12/12/1985</td></tr>
                <tr>
                    <td class="yr">HFF</td> <td>36</td><td>01/02/1985</td>
                </tr>           
                </tbody>
            </table>


    </body>
    </html>

Please if someone can help me

هل كانت مفيدة؟

المحلول

The problem appears to be a bug in the scroller widget code:

Change this line:

var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', table[0]).html() + '<thead></table>');

to this (it's just this part $('thead', $tbl).html() that changed)

var $hdr = $('<table class="' + $tbl.attr('class') + '" cellpadding=0 cellspacing=0><thead>' + $('thead', $tbl).html() + '<thead></table>');

and it fixes the problem.

I've included that correction in this updated demo.

I would also like to suggest you try out my fork of tablesorter which includes lots of improvements, as well as this updated scroller widget (which still has some problems that needs fixing).

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top