jquery tablesorter 加 javascript / jquery 偏移量冲突

Question

我似乎与 jquery tablesorter 插件以及 javascript scrollTo 和一些 jQuery 更高级的等效插件发生冲突。在每种情况下，在我动态添加内容后，"scroll to location" 似乎都没有考虑动态添加内容所占用的 space。我尝试了几种不同的方法，但结果相同。以下代码可直接复制测试

    <link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
    <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>

<script>
 $( document ).ready(function() {       

         var tableCode =                                                                                          
            "<tr>" +                                                                                      
            "<th>" + 'Seq' + "</th>" +                                                                    
            "<th>" + 'Column 1' + "</th>" +
            "<th>" + 'Column 2' + "</th>" +
            "<th>" + 'Column 3' + "</th>" +
            "<th>" + 'Column 4' + "</th>" +
            "<th>" + 'Column 5' + "</th>" +
            "<th>" + 'Column 6' + "</th>" +
            "<th>" + 'Column 7' + "</th>" +
            "<th>" + 'Column 8' + "</th>" +
            "</tr>";

        var tableDetail = 
            "<tr>" +                               
            "<td>" + "some text " + "</td>" +   
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "</tr>";  

        // append headers
        $('table thead').append(tableCode);                

        // apply tablesort magic
        $("table").tablesorter();               

        // apply tablesort logic to first line of table    
        $('table').trigger("update");          


    // Listeners
    $('#mybutton').click(function() {
        // append each new line
        $('table tbody').append(tableDetail);                
        $('#spacer').append("<br/>");

        // apply tablesort magic to each line
        $('table').trigger("update");                               
    });

    $("a").click(function() {       
        scrollToAnchor(this.name);

    });


    function scrollToAnchor(location){
        var aTag = $("a[name='"+ location +"']");                          
        $('html,body').animate({scrollTop: aTag.offset().top},'slow');     
        console.log(aTag);
        console.log(aTag.offset().top);
  }                                                                    



}); // end document ready

</script>
<a ref='#home'></a>

<!-- <p>This cute jQuery add-in, called <a href='http://tablesorter.com/docs/index.html' target='_blank'>tablesort.js</a> permits formated tables with sortable columns.</p> -->

<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#" name='tag1'>Goto Tag 1</a><br/>
<a href="#" name='tag2'>Goto Tag 2</a><br/><br/>

<div id='spacer'></div>

<a ref='#tag1'></a>TAG 1
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>


<a ref='#tag2'></a>TAG 2
<a href="#" name='home'>Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>

Answer 1

首先，需要更改锚点。我更喜欢使用 id 而不是 name； ref 也不是有效属性 (demo)

<a id="home"></a>
...
<a href="#tag1">Goto Tag 1</a>
<br/>
<a href="#tag2">Goto Tag 2</a>
...
<a id="tag1"></a>TAG 1
<a href="#home">Go to top</a>
...
<a id="tag2"></a>TAG 2
<a href="#home">Go to top</a>

然后修改代码如下：

$("a").click(function () {
    scrollToAnchor(this.hash);
    // prevent jump to anchor
    return false;
});

function scrollToAnchor(location) {
    var aTag = $(location);
    $('html,body').animate({
        scrollTop: aTag.offset().top
    }, 'slow');
}

最后，tablesorter初始化后不需要立即更新：

// append headers
$('table thead').append(tableCode);

// apply tablesort magic
$("table").tablesorter();

// apply tablesort logic to first line of table    
// $('table').trigger("update"); <--- ***** REMOVE THIS *****

Answer 2

所有极好的建议...这是修改后的代码，工作 100%！对 tablesorter 文档、修复和增强方面的一些出色工作大声疾呼。 http://wowmotty.blogspot.ca/2011/06/jquery-tablesorter-missing-docs.html

    <script src="js/jquery.js"></script>
    <link href="http://tablesorter.com/themes/blue/style.css" rel="stylesheet">
    <script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
    <script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>

<script>
 $( document ).ready(function() {       

         var tableCode =                                                                                          
            "<tr>" +                                                                                      
            "<th>" + 'Seq' + "</th>" +                                                                    
            "<th>" + 'Column 1' + "</th>" +
            "<th>" + 'Column 2' + "</th>" +
            "<th>" + 'Column 3' + "</th>" +
            "<th>" + 'Column 4' + "</th>" +
            "<th>" + 'Column 5' + "</th>" +
            "<th>" + 'Column 6' + "</th>" +
            "<th>" + 'Column 7' + "</th>" +
            "<th>" + 'Column 8' + "</th>" +
            "</tr>";

        var tableDetail = 
            "<tr>" +                               
            "<td>" + "some text " + "</td>" +   
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "<td>" + "some text " + "</td>" +  
            "</tr>";  

        // append headers
        $('table thead').append(tableCode);                

        // apply tablesort magic
        $("table").tablesorter();               

        // apply tablesort logic to first line of table    
        // $('table').trigger("update");          


    // Listeners
    $('#mybutton').click(function() {
        // append each new line
        $('table tbody').append(tableDetail);                
        $('#spacer').append("<br/>");

        // apply tablesort magic to each line
        $('table').trigger("update");                               
    });

    $("a").click(function() {       
        scrollToAnchor(this.hash);
        return false;
    });


    function scrollToAnchor(location){      
        var aTag = $(location);
        console.log(aTag.offset().top);
        console.log(location);
        $('html,body').animate({
            scrollTop: aTag.offset().top
        }, 'slow');
    }                                                                        

}); // end document ready

</script>
<a id='home'></a>

<button id='mybutton'>Click me to add rows to tables</button>
<br/><br/>
<a href="#tag1">Goto Tag 1</a><br/>
<a href="#tag2">Goto Tag 2</a><br/><br/>

<div id='spacer'></div>

<a id='tag1'/>TAG 1
<a href="#home">Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>


<a id='tag2'/>TAG 2
<a href="#home" >Go to top</a><br/>
<table style='display: table;' class='analysisTable tablesorter' cellspacing='1'>
<thead>
</thead>
<tbody>
</tbody>
</table>

jquery tablesorter 加 javascript / jquery 偏移量冲突

jquery tablesorter plus javascript / jquery offset conflict

javascript

jquery

scroll

tablesorter