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 に答える