javascript - 数据表 - api.column().data() 调用呈现的列

Question

我的问题是我试图在数据表的底部获得一个“总计”行。我得到了这一行，但我总共得到 0 美元。如果我将 api.column(4) 更改为 api.column(3)，它会正确添加列，所以我知道它可以工作。

我认为我的问题是我如何获取列索引 4 的数据（项目总数）。我将 data: 设置为 null，因为我通过将成本和数量相乘来呈现数据。所以我不确定为什么 api.column(4).data() 没有得到渲染的信息。

$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
    processing: true,
    seriverSide: true,
    ajax: "DataTables-1.10.0/extensions/Editor-1.3.1/examples/php/test.php?PID=<? echo $PID ?>",
    table: "#pexpenses",
    fields: [  {
            label: "Type:",
            name: "tbl_pexpenses.type",
            type: "select"
        }, {
            label: "Cost:",
            name:  "tbl_pexpenses.cost"
        }, {
            label: "Quantity:",
            name:  "tbl_pexpenses.quantity"
        }, {
            label: "Description:",
            name:  "tbl_pexpenses.description"
        }, {

            label: "PEID:",
            name: "tbl_pexpenses.PEID",
            type: "hidden"
        }, {
            label: "PID:",
            name: "tbl_pexpenses.PID",
            def: '<? echo $PID; ?>',
            type: "hidden"
        }
    ]
} );


$('#pexpenses').DataTable( {
    dom: "Tfrtip",
    pageLength: -1,
    type: 'POST',
    paging: false,
    info: false,
    idSrc: "tbl_pexpenses.PEID",
    ajax: "DataTables-1.10.0/extensions/Editor-1.3.1/examples/php/test.php?PID=<? echo $PID ?>",
    columns: [
        { data: "tbl_types.type_desc" },
        { data: "tbl_pexpenses.description" },
        { data: "tbl_pexpenses.cost" },
        { data: "tbl_pexpenses.quantity" },
        { data: null,
                render: function ( data, type, row ) {
            return (data.tbl_pexpenses.cost*data.tbl_pexpenses.quantity);
             } }
    ],
        tableTools: {
        sRowSelect: "os",
        sSwfPath: "../DataTables-1.10.0/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
        aButtons: [
            { sExtends: "editor_create", editor: editor },
            { sExtends: "editor_edit",   editor: editor },
            { sExtends: "editor_remove", editor: editor },
            "print",
            {
                "sExtends":    "collection",
                "sButtonText": "Save",
                "aButtons":    [ "csv", "xls", "pdf" ]}
        ]
    },
    "order": [[ 0, 'asc' ]],
    "drawCallback": function ( settings ) {
        var api = this.api();
        var rows = api.rows( {page:'current'} ).nodes();
        var last=null;

        api.column(0, {page:'current'} ).data().each( function ( group, i ) {
            if ( last !== group ) {
                $(rows).eq( i ).before(
                    '<tr class="grouping" ><td colspan="5">'+group+'</td></tr>'
                );

                last = group;
            }
            } );
    },  
    initComplete: function ( settings, json ) {
        editor.field( 'tbl_pexpenses.type' ).update( json.tbl_types );
    },
    footerCallback: function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        data = api.column( 4 ).data();
        total = data.length ?
            data.reduce( function (a, b) {
                    return intVal(a) + intVal(b);
            } ) :
            0;

        // Update footer
        $( api.column( 4 ).footer() ).html(
            '$'+ total
        );
    }


} );



// Order by the grouping
    $('#example tbody').on( 'click', 'tr.group', function () {
        var currentOrder = table.order()[0];
        if ( currentOrder[0] === 0 && currentOrder[0] === 'asc' ) {
            table.order( [ 0, 'desc' ] ).draw();
        }
        else {
            table.order( [ 0, 'asc' ] ).draw();
        }
    } );





<table id="pexpenses" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Cost</th>
        <th>Quantity</th>
        <th>Item Total</th>
    </tr>
</thead>

<tfoot>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
            <th style="text-align:right">Total:</th>
            <th></th>
        </tr>
    <tr>
        <th>Type</th>
        <th>Description</th>
        <th>Cost</th>
        <th>Quantity</th>
        <th>Item Total</th>
    </tr>
</tfoot>

Answer 1

// Total over all pages
        data = api.column( 4 ).cache('search');
        total = data.length ?
            data.reduce( function (a, b) {
                    return intVal(a) + intVal(b);
            } ) :
            0;

        // Update footer
        $( api.column( 4 ).footer() ).html(
            '$'+ total
        );
    }


} );

});

我必须缓存该列以获取正确的数据。它现在计算正确。

Answer 2

谁需要：

var table = $('#abc').DataTable({
    "order": [[ 0, "desc" ]],
    "ajax": {
        "url": "",
        "dataSrc": "" 
    },
    "columns": [            
        { "data": "date" },
        { "data": "total1" },
        { "data": "total2" },
        {  data:  function(row, type, set){ return row.total1 - row.total2}}, 
        {  data:  function(row, type, set){ return row.total1*0.02}}
    ],
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data; 
        // Total over all pages
        total_column1 = api.column(1, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 1 );
        total_column2 = api.column(2, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 0 );
        total_column3 = api.column(3, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 0 );
        total_column4 = api.column(4, {page: 'current'}).data().reduce( function (a, b) {return a + b;}, 0 );
        $(api.column(1).footer()).html(total_column1);
        $(api.column(2).footer()).html(total_column2);
        $(api.column(3).footer()).html(total_column3);
        $(api.column(4).footer()).html(total_column4);
    },      
    "columnDefs": [
        {"className": "dt-center",  "targets": "_all" }
    ]
});