api.column().data() call on rendered column

api.column().data() call on rendered column

mRendermRender Posts: 151Questions: 26Answers: 13

So I'm pretty sure my issue is that I'm using the column().data() function on a column that the data is set to null. But when I set it to anything else and then render it, I get data that I don't want.

 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);
            } }
        ],
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
            );
        }

Is there any way to make the column data: data.tbl_pexpenses.cost*data.tbl_pexpenses.quantity <<< this?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 56,888Questions: 1Answers: 9,042 Site admin

    Good question - the column().data() method will get the raw data for that column. In this case, null as you point out. What you could do is use the column().cache() method to get the data that DataTables has stored internally for ordering or filtering, which from your function will contain the result you want.

    Regards,
    Allan

  • mRendermRender Posts: 151Questions: 26Answers: 13

    Thanks for the reply, cache did not work I'm afraid. Here is my full code in case you see something that could possibly help in this case.


    $(document).ready(function() { editor = new $.fn.dataTable.Editor( { processing: true, seriverSide: true, ajax: "DataTables-1.10.0/extensions/Editor-1.3.1/examples/php/pexpenses.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/pexpenses.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 ).cache('order'); total = data.length ? data.reduce( function (a, b) { return intVal(a) + intVal(b); } ) : 0; // Update footer $( api.column( 4 ).footer() ).html( '$'+ total ); } } ); } );
  • mRendermRender Posts: 151Questions: 26Answers: 13

    http://108.160.144.86/pexpenses.php?PID=1 in case you need the webpage to look at it.

  • allanallan Posts: 56,888Questions: 1Answers: 9,042 Site admin
    Answer ✓

    Try using search rather than order - the order information isn't populated until it is needed for a sort (sorry - I forgot about that in my previous post).

    If I run the following on the console on your page it returns the expected data: $('#pexpenses').DataTable().column( 4 ).cache('search');

    Allan

  • mRendermRender Posts: 151Questions: 26Answers: 13

    Amazing. Remind me to send you a present on your birthday :)

This discussion has been closed.