0

如何根据特定列中 INPUTs 中的值对表进行排序。我希望它在我更改指定列中任何输入的值后立即发生。我已经尝试使用 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 回答