数据表 - 我应该在哪里更新数据
DataTables - where should I update aData?
在我的表格中,我有4列:姓名,年龄,百分比,复选框列
http://live.datatables.net/umezez/51/edit
我正在尝试做的是根据最后一列中的复选框设置百分比列的值。想法是根据该复选框(我已完成的这一部分)对页脚中的年龄列求和,并根据该页脚计算百分比值。
当我尝试调试并将更新的数据放入控制台时,我看到百分比值已正确更新,但表未更新。
我的想法是更新fnRowCallback
行,但我认为当我修改fnPreDrawCallback
中的数据时应该更新表格
我正在使用数据表 1.9.4。
这是我的代码:
$(document).ready(function () {
$(document).on('click', "input.updateFooter", function () {
var rowIndex = oTable1.fnGetPosition($(this).closest('tr')[0]);
var ok = this.checked ? 1 : 0;
oTable1.fnSettings().aoData[rowIndex]._aData.use = ok;
oTable1.fnDraw();
});
var iTotal = 0,
rowsInUse = 0;
var oTable1 = $('#example1').dataTable({
"table-layout": "fixed",
"oLanguage": {
"sZeroRecords": "No data"
},
"fnPreDrawCallback": function (oSettings) {
iTotal = 0;
rowsInUse = 0;
for (var i = 0; i < oSettings.aoData.length; i++) {
if (oSettings.aoData[i]._aData.use == 1) {
iTotal += oSettings.aoData[i]._aData.age;
rowsInUse++;
}
}
for (var j = 0; j < oSettings.aoData.length; j++) {
if (oSettings.aoData[j]._aData.use == 1) {
oSettings.aoData[j]._aData.percent = (parseInt(oSettings.aoData[j]._aData.age) / iTotal * 100).toFixed(2) + "%";
} else {
oSettings.aoData[j]._aData.percent = "";
}
}
//console.log(oSettings.aoData);
},
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
console.log(aData);
},
"fnDrawCallback": function (oSettings) {
//oSettings.aoData[0]._aData.percent = "24%";
},
"fnFooterCallback": function (nRow, aaData, iStart, iEnd, aiDisplay) {
if (rowsInUse > 0) {
$('#sum .c0').html(iTotal);
$('#avg .c0').html(rowsInUse > 0 ? (iTotal / rowsInUse).toFixed(2) : 0);
}
},
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": false,
"bAutoWidth": false,
"aaSorting": [
[0, "asc"]
],
"aaData": [{
name: "Tomek",
age: 20,
percent: "20%",
use: 1
}, {
name: "John",
age: 30,
percent: "80%",
use: 1
}],
"aoColumns": [{
"sTitle": "Name",
"bVisible": true,
"sType": "string",
"sWidth": "100px",
"mData": "name"
}, {
"sTitle": "Age",
"bVisible": true,
"sType": "",
"sWidth": "50px",
"sClass": "center percent",
"mData": "age"
}, {
"sTitle": "%",
"bVisible": true,
"sType": "",
"sWidth": "50px",
"sClass": "center percent",
"mData": "percent"
}, {
"sTitle": "",
"bVisible": true,
"bSortable": false,
"sType": "string",
"sWidth": "20px",
"sClass": "center",
"mData": "use",
mRender: function (data) {
return '<input type="checkbox" class="updateFooter" name="d" ' + (data == 1 ? 'checked="checked"' : '') + ' />';
}
}]
});
});
你的代码很好,只需把它放到 fnRawCallBack
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
$(nRow).children(':eq(2)').text(aData.percent);
return nRow;
},
dataTables 在每次抽奖时回收 html,解决方案是编辑该 html。 链接到实时示例 http://live.datatables.net/epulak/
相关文章:
- 更新数据,而不是用javascript和jquery将其添加到我的表中
- JQGrid使用服务器编辑后的更新数据刷新数据
- 使用odata 4的jaydata 1.5和保存/更新数据时的错误
- 使用引导时间选取器时,没有更新数据ng模型值
- AngularJS中超时后没有更新数据
- jQuery动态更新数据键和值
- 在简单的可重用 D3 图表中更新数据
- Node/Express 无法正确更新数据模型
- 如何在jQuery中的单个保存按钮上更新数据和添加数据
- 如何使用Jquery更新数据确认属性中的消息
- 更新数据后保留D3图的位置
- 使用$watch更新数据,ng重复不反映更改
- 在OpenCart中,我们如何实时更新数据
- 表单在每个页面中 - 仅在特定页面上处理它 - 如果当前不在页面上 - 重定向 - 否则 - 使用 AJAX 更新数据
- 调整窗口大小时更新数据属性
- Firebase赢得't更新数据
- Rails和jQuery-尝试使用setTimeout主动更新数据
- Lawnchair.js未更新数据
- 更新数据时的React.js生命周期
- enter() 和 exit() 如何检测 D3 中的更新数据