DataTables.js：如何通过分页遍历 table 中的行，访问单元格的自定义数据属性并在其中设置自定义 html

Question

我的table（为简单起见，只有 1 行）：

<table id="js_objects_functional_table" class="functional_table">
    <thead>
        <th>Object Name<span class="smallquestionsign" style="top: 3px" rel="tooltip" title="Header text"></span></th>
        <th>Source<span class="smallquestionsign" style="top: 3px" rel="tooltip" title="Header text"></span></th>
        <th>Status<span class="smallquestionsign" style="top: 3px" rel="tooltip" title="Header text"></span></th>
        <th>Progress<span class="smallquestionsign" style="top: 3px" rel="tooltip" title="Header text"></span></th>
    </thead>
    <tbody id="js_objects_functional_table_tbody">
        <tr class="js_table_object_row" data-object-id="objectId1">

            <td data-filter="Object Name" data-sort="Object Name" data-order="Object Name" data-search="Object Name"><span data-object-id="objectId1" class="js_goto_object_page paragraph_textstyle__link">Object Name<span class="smallquestionsign" style="top: 3px" rel="tooltip" title="Object definition"></span></span></td>

            <td data-filter="Custom" data-sort="Custom" data-order="Custom" data-search="Custom"><span data-object-id="objectId1" class="object_custom_source">Custom</span></td>

            <td data-filter="calculating" data-sort="calculating" data-order="calculating" data-search="calculating" class="js_table_object_status" data-object-id="objectId1">Calculating...</td>

            <td data-sort="-1" data-order="-1" class="js_table_object_progress" data-object-id="objectId1">Calculating...</td>
        </tr>
    </tbody>
</table>

我的 js（适用于 table，无需分页）：

//Part 1:

var ajaxObject = {objects: []}; // ajaxObject.objects - array of data-object-ids of cells with class="js_table_object_status" that have text "Calculating..." inside
$("#js_objects_functional_table").children("tbody").children("tr").children(".js_table_object_status").each(function(){  //Looping thru cells with class="js_table_object_status"
    var textInside = $(this).text()
    if (textInside.indexOf("Calculating") >= 0){
        var objectId = $(this).attr("data-object-id")
        var teamId = "none"
        var element = {};
        element.objectId = objectId
        element.teamId = teamId
        ajaxObject.objects.push(element);
    }
})

//Part 2. As result of AJAX call for 1 cell with class="js_table_object_status" :

var objectId = result.objectId;
var objectStatus = result.objectStatus;
var className = result.className;

var element = $("#js_objects_functional_table").children("tbody").children("tr").children(".js_table_object_status[data-object-id='" + objectId + "']") //Finding cell with data-object-id = given objectId and with class="js_table_object_status" 
element.empty()
element.attr("data-filter", objectStatus).attr("data-sort", objectStatus).attr("data-order", objectStatus).attr("data-search", objectStatus) //Assigning new datatTable data-attributes' values

element.append('<span class="'+className+'">'+ objectStatus +'</span>')

我的问题：如何修复我的代码，以便我可以用带分页的 table 做同样的事情（访问 "behind" 分页的信息）

我在第 1 部分尝试了这个，但卡住了。我不知道如何访问自定义数据属性 data-object-id。:

$("#js_objects_functional_table").DataTable().cells('.js_table_object_status').every(function(){ 
    var data = this.data();
    console.log(data)
    var textInside = data
    if (textInside.indexOf("Calculating") >= 0){
        var objectId = this.attr("data-object-id") 
        var teamId = "none"
        var element = {};
        element.objectId = objectId
        element.teamId = teamId
        ajaxObject.objects.push(element);
    }
})

对于第二部分，我不知道更多：如何从内部 html 清空单元格，如何更改 DataTables 数据属性的值以及如何插入内部 html .

非常感谢您的帮助。

Answer 1

使用 rows.every() 遍历所有行，使用 to$() 将行作为 jQuery 实例处理：

table.rows().every(function() {
  var cells = this.nodes().to$().children('.js_table_object_status');
  cells.each(function() {
    if (~$(this).text().indexOf("Calculating")) {
      var objectId = $(this).attr("data-object-id")
      var teamId = "none"
      var element = {};
      element.objectId = objectId
      element.teamId = teamId
      ajaxObject.objects.push(element);
    }
  })
})

http://jsfiddle.net/qq09bp6m/

目前还不清楚您要如何更新table。如果您希望它在循环中执行，您可以直接处理元素并使用 invalidate() 更新：

table.rows().every(function() {
  var row = this;
  var cells = row.nodes().to$().children('.js_table_object_status');
  cells.each(function() {
    var e = $(this); 
    if (~e.text().indexOf("Calculating")) {
      var objectId = e.attr("data-object-id")
      var teamId = "none"
      var element = {};
      element.objectId = objectId
      element.teamId = teamId
      ajaxObject.objects.push(element);

      e.html('<span>test</span>');
      e.attr('data-sort', 'someValue');
      row.invalidate().draw();
    }
  })
})

http://jsfiddle.net/qq09bp6m/1/

或者在其他地方可以使用 table.$() 完成 table 广泛搜索：

table.$('.js_table_object_status[data-object-id="objectId1"]')
  .attr('data-sort', 27)
  .addClass('someClass')

http://jsfiddle.net/qq09bp6m/2/

DataTables.js：如何通过分页遍历 table 中的行，访问单元格的自定义数据属性并在其中设置自定义 html

DataTables.js: how to loop thru rows in a table with pagination, accessing cell's custom data-attributes and setting custom html inside

jquery

pagination

custom-data-attribute

datatables-1.10