如何实现含input的HTML表格排序？DataTables失效该选前端还是后端？

不用急着换后端，DataTables完全可以处理含输入框的表格排序，问题在于它默认读取的是单元格的文本内容，而不是输入框里的实际值。你只需要给它加个自定义排序规则就行：

1. 注册针对输入框的自定义排序类型
   这个函数会遍历目标列的单元格，提取里面输入框的value作为排序依据：

   $.fn.dataTable.ext.order['dom-text'] = function(settings, col) {
       return this.api().column(col, {order:'index'}).nodes().map(function(td) {
           return $('input', td).val();
       });
   };
   

2. 初始化表格时指定对应列的排序类型
   假设你的输入框在第2、3列（DataTables的列索引从0开始），初始化时通过columnDefs配置：

   $('#your-table-id').DataTable({
       columnDefs: [
           { targets: [1, 2], orderDataType: 'dom-text' }
       ]
   });
   

这样设置后，点击表头排序时，就会按照输入框里的实际内容排序了。

至于要不要改用后端实现，看你的实际场景：

• 如果表格数据量不大（几百条以内），前端处理完全够用，而且不用刷新页面，用户体验更好
• 如果数据量特别大（几千上万条），或者排序/筛选涉及复杂业务逻辑、敏感数据，那后端实现更合适——既能减少前端的数据传输量，也能保证逻辑的安全性和准确性

内容的提问来源于stack exchange，提问作者Shapperd