如何将过滤器和订单数据设置到 DataTables 单元格

Posted 2023-03-05

【中文标题】如何将过滤器和订单数据设置到 DataTables 单元格

【英文标题】：How to set fiter and order data to a DataTables cell

【发布时间】：2017-09-24 22:15:21

【问题描述】：

我有一个 DataTable，我 set a cells value through its object。

我不想直接通过 jQuery 设置单元格值，因为 other problems found here

如何为该单元格的过滤和排序设置不同的值，就像加载 orthogonal data 或使用 html5 data-... attributes 时可以实现的一样

这里有一段代码 sn-p 以便更好地理解问题 - 运行后点击按速度排序

$(document).ready(function() 
  var dt = $('#example').DataTable();
  
  //this is not enough as the change doesn't reflect on sorting and filtering
  dt.cell( $("#obj2_speed") ).data(9 + 'km/h') ;
  
  //this doesn't work like I would like to
  /*dt.cell( $("#obj1_speed") ).data(
    "_": 7 + 'km/h',
    "sort": 7,
    "filter": 'seven'
  );*/
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="example" class="display"  cellspacing="0">
  <thead>
    <tr>
      <th>Object</th>
      <th>Speed</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>object 1</td>
      <td id="obj1_speed" data-sort="80" data-filter="eighty">80km/h</td>
    </tr>
    <tr>
      <td>object 2</td>
      <td id="obj2_speed" data-sort="8" data-filter="eight">8km/h</td>
    </tr>
    <tr>
      <td>object 3</td>
      <td id="obj3_speed" data-sort="90" data-filter="ninety">90km/h</th>
    </tr>
  </tbody>
</table>

我的上述用例听起来是这样的：

我最初从数据库加载 DataTable，但随后我必须重复执行 ajax 请求，这些请求需要更新 DataTable 的不同部分，并且这些更新需要反映在其中。

假设我在页面上保持浏览器打开，该页面显示按速度排序的 DataTable。 5 秒后，一个 ajax 请求/响应进来并更新单元格的速度。我希望更新该行并且该行向上或向下移动，因为我正在查看它按速度排序。我已经实现了这一点，但是由于“8km/h”是一个字符串，并且不能用“80km/h”和“90km/h”正确排序这一事实给出了一些小缺点

【问题讨论】：

@davidkonrad 是的，感谢您的关注 - 将立即编辑

【参考方案1】：

使用服务器端脚本语言，如 php 或 Rails。

的确，您可以在 JSON 中存储无限量的数据，但事实仍然是，将大量数据解析为 JSON 仍然很困难。

这就是数据库的用武之地。

如果您愿意，可以将所有这些信息输入到表中，但使用 Ruby on Rails 之类的东西创建新对象然后从服务器加载它们会更容易。

将对象/记录的速度放在数据库中它自己的列中，并在查询中使用ORDER_BY 'speed' 条件语句。在表中隐藏一个 ID 列 (How to hide columns in HTML table?)，然后当您执行 AJAX 请求时，按 ID 列对表进行排序（我以前从未使用过 javascript 数据表，但这适用于常规 HTML5 表：Sorting HTML table with JavaScript )。

【讨论】：

您似乎不了解我的用例。我已经使用了一个数据库，这是我的 javascript DataTable 的实际来源，但我试图减少细节的数量，以便可以理解所暴露的问题。

哦。那么在这种情况下，我只会使用 AJAX 请求。我从未使用过 JavaScript 的数据表。

我编辑了我的答案，使其适合您的用例。很抱歉，我不能帮助你更多。我喜欢你的主意！你在正确的轨道上。

【参考方案2】：

通过动态更新data-order 等属性，我遇到了真正的困难。它似乎并没有真正起作用。我原以为直接node() 访问与invalidate() 结合使用可以解决问题，但我想您根本无法动态更改HTML5 属性并强制dataTables 重新索引。在这里查看我的尝试 -> http://jsfiddle.net/m9ymz187/

---

但是，您对问题的更新表明您可以通过使用自定义排序插件采取更简单的方法：

jQuery.extend( jQuery.fn.dataTableExt.oSort, 
  "speed-pre": function ( a ) 
     return parseFloat( a.match(/[+-]?\d+(\.\d+)?/) )
  
);

var table = $('#example').DataTable(
  columnDefs : [
     targets: 0, type: 'speed' 
  ]
) 

现在您可以即时更改cell() 内容，draw() 他们仍然可以得到正确的顺序。查看演示 -> http://jsfiddle.net/wmxz20ae/

该演示以 2 秒的间隔插入随机 speed+km/h，并且表格排序更新得很好。所以使用“插件”，你的dt.cell( <selector> ).data( newData )，然后是draw()。