Jquery dataTables using filter on updated value

Question

I have a jquery mobile app that consist of a table. The table contains a time field and some numerical field. They stats are static as the do not change and i am able to filter the table by name or numbers.Check this Fiddle

Then i decided to increment the table values as displayed in this updated Fiddle.

Code for updating values

function UpdateFunction(){
    $(".updateMeInt").each(function(index){
       var cur = parseInt($(this).text(), 10);
       $(this).text(cur + 1);    
    });

    $(".updateMeTime").each(function(index){
        var cur = $(this).text().split(":");    
        var sec = parseInt(cur[1], 10);        
        var min = parseInt(cur[0], 10);

        sec = sec + 3;
        if (sec >= 60){
             sec = 0
             min = min + 1;
        }
        $(this).text(pad(min) + ":" + pad(sec)); 

    });
}  

function pad(num) {
    var s = "0" + num;
    return s.substr(s.length-2);
}

However the issue is now i can't filter for the updated values.

Can someone please advice as to why this is and how to fix this issue?

violet313 · Accepted Answer · 2014-03-20 02:39:32Z

1

You need to update the dataTable as well as the html.

for example, ammend your function to update the integer cells:

$(".updateMeInt").each(function(index)
{
    var cur = 1+ parseInt($(this).text(), 10);
    var oTable = $('#example').dataTable();       

    oTable.fnUpdate(cur, $(this).parent('tr')[0], $(this).index());
});

in the above, fnUpdate (see docos) is being passed the new cell value, the parent tr-element and the cell-index.

Here's a fork of your second jsfiddle.

But you will now probably notice that once you filter the content, only the visible rows continue to update. It may be that you are planning to get your dynamic data from an ajax call or something; in which case you might be better off totally destroying the old dataTable on an update.

Nevertheless, as per your current example, the following UpdateFunction() should also update filtered rows hiding in the dataTable:

function UpdateFunction()
{
    var oTable = $('#example').dataTable();
    var nNodes = oTable.fnGetNodes();

    $.each(nNodes, function(index,node)
    {
        $(node).children(".updateMeInt").each(function(index)
        {
           var cur = 1+ parseInt($(this).text(), 10);       
           oTable.fnUpdate(cur,node,$(this).index());
        });            

        $(node).children(".updateMeTime").each(function(index)
        {
            var cur = $(this).text().split(":");    
            var sec = 3+ parseInt(cur[1], 10);        
            var min = parseInt(cur[0], 10);

            if (sec >= 60)
            {
                min+=1;
                sec%=60;
            }

            var newval=pad(min) + ":" + pad(sec);
            oTable.fnUpdate(newval,node,$(this).index());
        });            
    });
}

Here it is in a jsfiddle.

edited Mar 20, 2014 at 2:39

answered Mar 19, 2014 at 22:54

violet313

1,9321 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user1010101 Over a year ago

Hi i have posted a new question i am very much stuck on this can u please help as ur good with datatables. stackoverflow.com/questions/22938579/…

Collectives™ on Stack Overflow

Jquery dataTables using filter on updated value

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related