如何通过一些JS和inc.php文件使TableSorter.js在demad上使用表 [英] How to make TableSorter.js working with the table on demad via some JS and inc.php file

问题描述

我有一个要排序的表.问题在于此表已通过某些JS(filter-data.js)函数从外部文件(inc.php)加载.更准确地说，我有一个main.php页面，其中带有 Submit (提交)按钮.当我单击它时，这会触发一些JS代码，该代码调用inc.php文件以根据需要从MySQL数据库中填充其数据，然后将它们(表+数据)都放回主页:

I have a table that I want to make sortable. The problem is that this table has been loaded from the external file (inc.php) via some JS (filter-data.js) function. To be more precisely, I have a main.php page with the Submit button. When I click on it, that triggers some JS code which calls inc.php file to populate my table with its data on demand from MySQL base and then puts them both (table + data) back to the main page:

这是主页上的表占位符.

This is the table placeholder on the main page.

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

这是主页上的提交"按钮:

This is the submit button on the main page:

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

这是我从table.inc.php页面获得的信息:

This is what I am geting form the table.inc.php page:

<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页面上? 我几乎尝试了所有方法，但都没有成功.

I am not sure how and where to call TS function - should it be on the main.php page or table.inc.php page? I tried almost everything but with no success.

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

如果我跳过JS而只需要main.php页面中的table.inc.php文件，则它可以正常工作.

If I skip JS and just require my table.inc.php file from main.php page, it works properly.

谢谢！

推荐答案

更好的做法是将HTML与脚本分开，因此，请将其添加到页面中(甚至更好的是，将内容移动到script标记内)放入外部文件):

It is better practice to separate the HTML from scripting, so to do this, add this to your page (or even better, move the stuff inside the script tag into an external file):

<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属性来修改您的提交按钮代码:

Then modify your submit button code by removing the onclick attribute:

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

如果这不起作用，您可以与我们共享genTable();代码吗?

If that doesn't work, could you share the genTable(); code with us?

可悲的是，我要出城一周了...希望在那之前我能为您提供帮助.

Sadly, I'm about to go out of town for a week... hopefully I can help you before then.

我建议做的是下载我的表分类器的叉子，因为它可以选择禁用客户端排序:serverSideSorting(参考).

What I would recommend doing is download my fork of tablesorter because it has an option to disable client-side sorting: serverSideSorting (reference).

然后，您可以绑定到表排序器的sortEnd函数:

Then you can bind to tablesorter's sortEnd function:

$("#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
    });

});

这篇关于如何通过一些JS和inc.php文件使TableSorter.js在demad上使用表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！