Question

如何根据特定列中INPUT中的值对表进行排序。一旦我更改了spcified列中任何输入的值，我希望它发生。我尝试过使用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>

Answer 1

您确定您真的希望您的应用程序以这种方式运行吗？你基本上强迫用户不要拼写错误，因为如果她这样做，表行可能在某个地方。如果您的表格大于视口，如果她继续输入，它也会在窗口周围滚动。至少考虑只在焦点改变时重新排序（即模糊）。

回答你的问题：你需要编写一个自定义文本提取器函数，如下所示：

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暗示的那样，包括更多关于什么不起作用的细节。

文档链接：

Jquery：更改值后自动按输入值对表进行排序

1 个答案: