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
how to update a row in datatables without table redraw?
提问by Homam
I have dataTables v1.9.4 populated from a javascript array and i have checkbox column, which if it is :checked
then the whole row should update every 5 seconds, the problem is that i have a large fnRowCallback
function 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 fnRowCallback
without 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.
我认为它会触发行回调,但我不确定。