如何使TableSorter.js通过一些JS和inc.php文件与表格工作demad(How to

我有我想要做一个排序表。问题是，该表是由经由一些JS（过滤data.js）功能的外部文件（inc.php）加载。为了更准确，我与提交按钮main.php页。当我点击它，会触发一些JS代码调用inc.php文件来填充我的表，其对从MySQL的基础需求数据，然后把他们两个（表+数据）回到主页：

这是主页的表格占位符。

<div id="tableData"></div>

这是提交主页按钮：

 <input type="submit" onclick="genTable()" value="Populate users data">

这是我在歌厅形式table.inc.php页：

<table id="my-table">
   <thead>
       <tr>
           <th>Column 1</th>
           <th>Column 2</th>
       </tr>
    </thead>
   <tbody>
       <tr>
           <td>45</td>
           <td>34</td>
       </tr>
       <tr>
           <td>23</td>
           <td>17</td>
       </tr>
   </tbody>
</table>

我不知道如何以及在哪里调用函数TS - 它应该是main.php页或table.inc.php页面上？我试图几乎一切，但没有成功。

$("#my-table").tablesorter();

如果我跳过JS，只是需要从main.php页我table.inc.php文件，它工作正常。

谢谢！

这是更好的做法是从脚本的HTML代码中分离，所以要做到这一点，它添加到您的网页（甚至更好，将脚本标签中的东西到一个外部文件）：

<script>
// dom ready
$(function(){
    // do something when the submit button is clicked
    $('input[type=submit]').click(function(){
        // generate table
        genTable();
        // add sorting
        $("#my-table").tablesorter();
    });
});
</script>

然后修改通过删除提交按钮代码onclick属性：

<input type="submit" value="Populate users data">

如果不工作，你可以分享genTable(); 与我们的代码？

可悲的是，我要出城去了一个星期......希望我能在那之前帮助你。

我建议做的就是下载我的tablesorter的叉，因为它有一个选项来禁用客户端排序： serverSideSorting （参考）。

然后，你可以绑定到的tablesorter的sortEnd功能：

$("#my-table").on("sortEnd", function(e, table) {

    // get sorting information
    // [[0,0]] means sort the first column (zero-based index) in ascending direction
    // [[0,1]] means sort the first column in a descending direction
    // [[0,0], [2,0]] means sort the first and third columns, both in the ascending direction
    var sortList = table.config.sortList,
        // set the sort direction
        // this is why I need to know what is stored in the #sort element,
        // or how the server knows how to sort the data
        d = 'something';

    $('#sort').val( d );
    genTable();
    // initialize tablesorter again, because the entire table is being replaced
    // Otherwise if you only update the tbody, use:
    // $("#my-table").trigger('update');
    $("#my-table").tablesorter({
        theme : 'blue', // required theme option (tablesorter fork)
        serverSideSorting : true
    });

});