1

ソート可能にしたいテーブルがあります。問題は、このテーブルが何らかの JS (filter-data.js) 関数を介して外部ファイル (inc.php) から読み込まれていることです。より正確に言うと、送信ボタンのある main.php ページがあります。それをクリックすると、inc.php ファイルを呼び出して MySQL ベースからオンデマンドでテーブルにデータを入力する JS コードがトリガーされ、両方 (テーブル + データ) がメイン ページに戻されます。

これは、メイン ページのテーブル プレースホルダーです。

<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 タグ内のものを外部ファイルに移動することをお勧めします)。

<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();コードを共有していただけますか?

悲しいことに、私は 1 週間町を出ようとしています... それまでにお手伝いできることを願っています。

クライアント側の並べ替えを無効にするオプションがあるため、tablesorterのフォークをダウンロードすることをお勧めしますserverSideSorting(参照)。

sortEnd次に、tablesorter の関数にバインドできます。

$("#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 に答える