How to loop thru rows in a table with pagination, accessing cell's custom data-attributes and ...

yairam

Hi! My full question is: how to loop thru rows in a table with pagination, accessing cell's custom data-attributes and setting custom html inside

My table (for simplicity with 1 row):

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

My js (that works for table without pagination):

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

My question: how to fix my code so I could do the same things with a table with pagination (accessing information that is "behind" the pagination)

I tried this for part 1 and got stuck. I don't know how to access the custom data-attribute 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);
        }
    })

For the second part i don't know even more: how to empty the cell from inner html, how to change DataTables data-attributes' values and how to insert inner html inside.

Would really appreciate your help.

allan

That actually looks like it should work (almost). It will find all cells with a class of .js_table_object_status and loop over them. The one issue I think you have is that there isn't a this.attr method. Use $(this.node()).attr( ... ).

Keep in mind that this is a DataTables API instance inside the every() callback function. It doesn't have an attr method.

Allan