listening for table rows count change

Question

I was using the html table. My requirement is, i want to listen for the changes of rows count. Is there anyway to achieve this?

Note: I don't have the adding/deleting a row functions here to achieve.

Moreover that, i have tried this,

$("#myTable>tbody>tr").watch("length", function () {
    alert("row count changed..")
});

But, the above code doesn't work for me. Could any of you know how to do this?

Thanks in advance,

-Raja.

Solution 1

The only cross-browser way to do this at the moment would be with a setInterval and possibly a custom event.

setInterval(function() {
    var $t = $("#myTable"),
        rowCount = $t.data("rowCount"),
        rowLength = $t.find("tbody").children().length;
    if (rowCount && rowCount !== rowLength) {
        $t.trigger("rowcountchanged").data("rowCount", rowLength);
    }
    else if (!rowCount) {
        $t.data("rowCount", rowLength);
    }

}, 50);​
$("#myTable").on("rowcountchanged",function(){
    alert($(this).data("rowCount"));
});

I would suggest triggering the event manually when you change the number of rows rather than using an interval if possible.

UPDATE:
Use the jqGrid refresh event.

var rowCount = $("#gridid>tbody>tr").length;
jQuery("#gridid").jqGrid({
...
   refresh: function(){ 
      var currCount = $("#gridid>tbody>tr").length;
      if (currCount !== rowCount) {
          alert("Number of rows changed!");
          rowCount = currCount;
      }
   },
...
});

If you are manually deleting any rows on click, you will need to run your code there too unless it is also reloading the grid.

Solution 2

You could monitor the DOM event DOMSubtreeModified (note that the event is deprecated, so if someone has a suggestion of a better event to monitor, please change this) which fires on a change to the DOM tree. We can use jQuery's bind function to fire a function when the event is fired on the table. That function can check if the row count has changed.

var numberOfRows = $("#myTable>tbody>tr").length;
$("#myTable").bind("DOMSubtreeModified", function() {
    if($("#myTable>tbody>tr").length !== numberOfRows){
        numberOfRows = $("#myTable>tbody>tr").length;
        alert("row count changed..");
    }
});

Try It!

See: Is there a JavaScript/jQuery DOM change listener?

Comments

[Rajagopal 웃]

Thanks for your response. Yes, this brings the solution. But, DOMSubtreeModified event is triggers even i add the element to td. Which is not a good at and all. I will use more number of rows(more than 10000rows). So, it doesn't sound right for these situtions.

[Rajagopal 웃]

Thanks for your response. Set interval doesnt bring the solution for my case.

[Kevin B]

If you can't use setInterval and you want a cross-browser solution, the only other option is to use whatever code is changing the contents of the table to trigger the event. What is updating the table?

[Rajagopal 웃]

jq grid is updating the table

[Rajagopal 웃]

loadComplete is not executing, anyhow thanks @Kevin. Instead of that i used refresh which works fine now.

[Sam]

wow, I didn't know about DOM change listener. This is the best solution for me.

[Admin]

Btw, sometimes it is also useful to check the visible rows (see stackoverflow.com/questions/5767334/… and github.com/chestercharles/excel-bootstrap-table-filter/issue‌​s/…)

[Kevin B]

@Giulio this is from 2012, feel free to post an answer of your own.

[Admin]

ok, here it is stackoverflow.com/a/64555455/11323942, thank you again