Jquery dataTables使用过滤器更新值

时间:2014-03-19 19:01:12

标签: javascript jquery html datatables

我有一个由表组成的jquery移动应用程序。 该表包含时间字段和一些数字字段。 他们的统计数据是静态的,因为不会改变,我可以按名称或数字过滤表格。检查这个Fiddle

然后我决定增加此更新的Fiddle中显示的表值。

更新值的代码

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);
}

但问题是现在我无法过滤更新的值。

有人可以就这是为什么以及如何解决这个问题提出建议吗?

1 个答案:

答案 0 :(得分:1)

您需要更新dataTable以及html

例如,修改你的函数来更新整数单元格:

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

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

在上面,fnUpdatesee docos)正在传递新的单元格值,父tr - 元素和单元索引。

你的第二个jsfiddle的{p> Here's a fork


但是现在您可能会注意到,一旦过滤内容,只有可见行会继续更新。您可能计划从ajax电话或其他内容获取动态数据;在这种情况下,您最好在更新时完全销毁旧的dataTable

尽管如此,根据您当前的示例,以下UpdateFunction()还应更新隐藏在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在jsfiddle中。