javascript 如何在没有表重绘的情况下更新数据表中的一行?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14411828/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 21:34:15  来源:igfitidea点击:

how to update a row in datatables without table redraw?

javascriptjqueryarraysjquery-datatables

提问by Homam

I have dataTables v1.9.4 populated from a javascript array and i have checkbox column, which if it is :checkedthen the whole row should update every 5 seconds, the problem is that i have a large fnRowCallbackfunction which is not execute after row update thus all my row structure colapses. here is my update code:

我有从 javascript 数组填充的 dataTables v1.9.4 并且我有复选框列,如果是,:checked那么整行应该每 5 秒更新一次,问题是我有一个大fnRowCallback函数在行更新后不执行,因此我所有的行结构崩溃。这是我的更新代码:

function updateRow(){
    newRowData = $.data(document.body, 'updatedData');
    var newRow = [];
    newRow.push(1, 1);
    for (var title in newRowData[0]){
        newRow.push(newRowData[0][title]);
    }
    oTable.fnUpdate( newRow, updateIndex, false, true);
};  

and this my fnRowCallback:

这是我的fnRowCallback

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
                //make 3state button and indicator for relay mask & status
                $('td.relay', nRow).each(function(){
                    relayStatus = $(this).text();
                    $(this).html('<div class="hidden-value">' + relayStatus + '</div><div></div>');
                    if(relayStatus == 1){
                        $(this).children('div:last').addClass('relmas1');
                    }
                    if(relayStatus == 0){
                        $(this).children('div:last').addClass('relmas0');
                    }
                    if(relayStatus == -1){
                        $(this).children('div:last').addClass('relmas-1');
                    }
                });
                //makes update checkboxes
                var clientID = $('td.clientid', nRow).text();
                $('td.update', nRow).html('<input type="checkbox" data-clientid="' + clientID + '" />');
                //makes volumes
                var cuVol = parseInt($('td.volume', nRow).text(), 10)
                $('td.volume', nRow).html('<div class="volume-container"><div class="volume-tmp">' + cuVol + '</div><div class="volume-slider"></div></div>')
                $('td.volume div.volume-slider', nRow).slider({
                    value: cuVol,
                    range: "min",
                    orientation: "horizontal",
                    slide: function( event, ui ) {
                        cuVol = ui.value;
                        $(this).siblings('div.volume-tmp').text(ui.value);
                    }
                });
            },

the problem is :how to redraw a single selected row with fnRowCallbackwithout redraw the whole table and keep its checked state after redraw
EDIT :
I double checked my code and see that my code in being updated corectly but the problem is that my code is load in table in the way it is recieved via ajax not in the way i reorderd my table columns

问题是:如何重绘与单一选择的行fnRowCallback不重绘整个表,并保持它的选中状态重绘后
编辑:
我双重检查我的代码,看看我的代码被corectly更新,但问题是,我的代码是负载通过ajax接收表格的方式而不是我重新排序表格列的方式

采纳答案by Ori Refael

You can use fnUpdate. Basically it works by row index and all values of the row must be inserted (can't enter 2 values when you have 4 columns for example)

您可以使用 fnUpdate。基本上它通过行索引工作,并且必须插入行的所有值(例如,当您有 4 列时,不能输入 2 个值)

Here is a link to the API of the method : jQuery DataTable fnUpdate

这是该方法的 API 的链接:jQuery DataTable fnUpdate

i think it triggers the row callback, but im not sure for it.

我认为它会触发行回调,但我不确定。