1

在我的表中，我有 4 列：姓名、年龄、百分比、复选框列
http://live.datatables.net/umezez/51/edit

我要做的是根据最后一列中的复选框设置百分比列的值。想法是根据该复选框对页脚中的年龄列求和（这部分我已经完成）并根据该页脚计算百分比值。

当我尝试调试并将更新的数据放到控制台时，我看到百分比值已正确更新，但表未更新。

我的想法是更新行，fnRowCallback但我认为当我修改数据时应该更新表fnPreDrawCallback

我正在使用 DataTables 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"' : '') + ' />';
            }
        }]
    });
});
4

1 回答 1

1

您的代码很好，只需将其放入 fnRawCallBack

"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
    $(nRow).children(':eq(2)').text(aData.percent);
    return nRow;
},

dataTables 在每次绘制时回收 html，解决方案是编辑该 html。链接到实时示例http://live.datatables.net/epulak/

于 2013-11-01T12:06:51.670 回答