数据表 - 我应该在哪里更新数据

DataTables - where should I update aData?

本文关键字:更新 数据 在哪里 我应该 数据表      更新时间:2023-09-26

在我的表格中,我有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/