代码之家 › 专栏 › 技术社区 › ÐÐ°ÑÐ¸Ñ

数据表。js:如何通过分页循环表中的行,访问单元格的自定义数据属性并在其中设置自定义html

datatables-1.10 custom-data-attribute pagination jquery

ÐÐ°ÑÐ¸Ñ · 技术社区 · 7 年前

我的表格(为了简单起见,只有一行):

<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>

//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>')

我的问题是:如何修复代码,使我可以对具有分页的表执行相同的操作(访问分页“后面”的信息)

我在第一部分中尝试了这个,但被卡住了。我不知道如何访问自定义数据属性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);
    }
})

1 回复 | 直到 7 年前

davidkonrad 7 年前

使用 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/

目前尚不清楚您希望如何更新该表。如果希望它在循环中完成,可以直接处理元素并使用 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.$('.js_table_object_status[data-object-id="objectId1"]')
  .attr('data-sort', 27)
  .addClass('someClass')

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