0

特定の列の INPUT の値に基づいてテーブルを並べ替えるにはどうすればよいですか。指定された列のいずれかの入力の値を変更するとすぐに発生するようにします。tablesort プラグインを試してみましたが、うまく動作しません。

<table id="myDummyTable" class="tablesorter"><thead>
<tr>
    <th>...</th>
    <th id="orderthis">something</th>
    <th id="orderthis">order by value automatically</th>
    <th id="orderthis2">...</th>
    </tr>
</thead>
<tbody>
<tr>
    <td>td1-1</td><td><input type="text" class="stockprodvariantorder" value="abc"/></td>
    <td><input type="text" name="order1" class="order" value="10"/></td>
    <td>td1-3</td>
    </tr>
<tr>
    <td>td2-1</td><td><input type="text" class="stockprodvariantorder" value="def"/></td>
    <td><input type="text" name="order2" class="order" value="20"/></td>
    <td>td4-3</td>
    </tr>
<tr>
    <td>td6-1</td><td><input type="text" class="stockprodvariantorder" value="ghi"/></td>
    <td><input type="text" name="order3" class="order" value="30"/></td>
    <td>td3-3</td>
    </tr>

<tr>
    <td>td4-1</td><td><input type="text" class="someOther" value="jkl"/></td>
    <td><input type="text" name="order4" class="order" value="40"/></td>
    <td>td4-3</td>
    </tr>
</tbody>
4

1 に答える 1

0

アプリケーションをこのように動作させたいと本当に思っていますか? 基本的に、ユーザーがタイプミスをしないように強制します。タイプミスをすると、テーブルの行がどこかにある可能性があるためです。テーブルがビューポートよりも大きい場合、彼女が入力を続けると、ウィンドウもスクロールします。少なくとも、フォーカスが変化したとき (つまり、ぼかしたとき) にのみ再ソートを検討してください。

質問に答えるには: 以下のようなカスタム テキスト抽出関数を作成する必要があります。

var myTextExtraction = function(node) {
  // return value of input field (must be a direct child of <td>)
  return node.childNodes[0].value; 
} 

$(document).ready(function() {
  // init table sorter
  $("#myDummyTable").tableSorter({textExtraction: myTextExtraction});

  // listen to keyup events on each input and resort each time
  $("#myDummyTable input").keyup(function() {
    // sort by 2nd column
    $("#myDummyTable").trigger("sorton", [[1,0]]); 
  });
});

上記のコードはテストしていません。問題があれば報告してください。しかし、Nitesh Verma がほのめかしたように、何が機能しないかについての詳細を含めてください。

ドキュメント リンク:

于 2013-08-04T17:00:17.643 に答える