1

我有一张要排序的表。问题是这个表是通过一些 JS (filter-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 文件，它就可以正常工作。

谢谢！

4

1 回答 1

0

将 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 fork，因为它有一个禁用客户端排序的选项：（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
    });

});
于 2012-12-23T04:48:22.517 回答