Can't view footer for nested editor table

rwearmouth

I'm trying to use a footerCallback to calculate total price in a nested table. I've found this link (https://datatables.net/forums/discussion/68135/cant-get-footer-for-datatable-as-input) which was helpful in getting a footer to manipulate at all, but it isn't displaying for some reason. The math isn't adding up at the moment, but that doesn't matter if I can't view a footer at all. What am I doing wrong?

Nested datatable field type

{
                        label: 'Parts',
                        name: 'dummy_parts',
                        type: 'datatable',
                        footer: ['My Footer'],
                        editor: partEditor,
                        config: {
                            ajax: {
                                url: './php/parts_nested.php',
                                type: 'POST',
                                //send post variable of form ID to DB query script
                                data: function (d) {
                                    d.form_id = form_id; //editor.field('mtrf_inbox.form_id').val();
                                }
                            },
                            buttons: [
                                { extend: 'create', editor: partEditor },
                                { extend: 'edit',   editor: partEditor },
                                <?php if($_SESSION['user']['access_level']>3) { echo "{ extend: 'remove', editor: partEditor }, "; } ?>
                                {
                                    extend: 'refresh',
                                    editor: partEditor,
                                    attr: {
                                        id: 'partsRefresh'
                                    }
                                }
                            ],
                            columns: [
                                {
                                    title: 'Order',
                                    data: 'mtrf_wo_parts.sort_code'
                                },
                                {
                                    title: 'Part Info',
                                    data: 'mtrf_parts.part_number'
                                },
                                {
                                    title: 'Quantity',
                                    data: 'mtrf_wo_parts.quantity'
                                },
                                {
                                    title: 'Notes',
                                    data: 'mtrf_wo_parts.notes'
                                }, {
                                    title: 'Price Ea',
                                    data: 'mtrf_parts.price',
                                    render: function(data, type, row, meta) {
                                        var price = data;
                                        if(row.mtrf_wo_parts.inventory_id==9714 || (row.mtrf_wo_parts.info_override==1 && row.mtrf_wo_parts.price!='')) {
                                            price = row.mtrf_wo_parts.price;
                                        }
                                        return $.fn.dataTable.render.number( ',', '.', 2, '$' ).display(price);
                                    }
                                }, {
                                    title: 'Price Ext',
                                    data: 'mtrf_wo_parts.price_ext',
                                    render: function(data, type, row, meta) {
                                        var price = row.mtrf_parts.price;
                                        if(row.mtrf_wo_parts.inventory_id==9714 || (row.mtrf_wo_parts.info_override==1 && row.mtrf_wo_parts.price!='')) {
                                            price = row.mtrf_wo_parts.price;
                                        }
                                        var total = Math.round(100*(price*row.mtrf_wo_parts.quantity))/100;
                                        return $.fn.dataTable.render.number(',', '.', 2, '$').display(total);
                                    }
                                }
                            ],
                            columnDefs: [
                                { targets: [1,2,3,4,5], orderable: false },
                                { targets: [0<?php if($_SESSION['user']['access_level']<4) { echo ",4,5";  } ?>], visible: false }
                            ],
                            footerCallback: function(tfoot, 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 = api
                                    .column(5)
                                    .data()
                                    .reduce(function(a,b){
                                        intVal(a) + intVal(b);
                                    }, 0);
                                console.log(total);
                                $(api.column().footer()).html(
                                       'Subtotal: $'+total
                                   );
                                console.log(api.column().footer());
                            }
                        }
                    }

rwearmouth

I've made a couple changes here and missed the edit window on the post.

I'm now using the sum() plugin, which is working on Price Ea (column 4), but not Price Ext (column 5), which is the goal.

sum() plugin

jQuery.fn.dataTable.Api.register( 'sum()', function ( ) {
                    return this.flatten().reduce( function ( a, b ) {
                        if ( typeof a === 'string' ) {
                            a = a.replace(/[^\d.-]/g, '') * 1;
                        }
                        if ( typeof b === 'string' ) {
                            b = b.replace(/[^\d.-]/g, '') * 1;
                        }
                 
                        return a + b;
                    }, 0 );
                } );

new footerCallback

footerCallback: function(tfoot, data, start, end, display) {
                                var api = this.api(), data;
                                sum = api.column(5).data().sum();
                                console.log('Sum: '+sum);
                                $(api.column().footer()).html(
                                       'Subtotal: $'+sum
                                   );
                                console.log(api.column().footer());
                            }

kthorngren

Without seeing a running test case with an example of your data its hard to say what the problem might be. Do you get errors in the browser's console?

Can you post a link to your page or create a test case showing an example of the data that is not working so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

rwearmouth

No errors at all. I think the best route will be to push the update I've got ready, since this isn't impacting performance or usability at all, and get a login set up. Is it ok if I message you credentials once it's live?

kthorngren

Please contact one of the developers, @allan or @colin with the credentials.

Kevin

rwearmouth

Credentials sent to @allan , but I do have updates. I realized I was only passing one footer <th> through, which was clearly a problem. So throwing more column data in fixed that.

Now I'm just struggling with the sum() not working properly on the Price Ext column. Maybe it's an issue with the field being a display rendered calculation and not database data?

allan

Hi,

Many thanks for the PM with the link.

Maybe it's an issue with the field being a display rendered calculation and not database data?

Spot on! You are using column().data() to get the data for the column, but the data is empty - the actual value we are interested in here is a calculated value - so we can use cells().render() to get the calculated information and then sum that - so rather than:

sum = api.column(5).data().sum();

use:

sum = api.cells(null, 5).render('sort').sum();

And that will do the job nicely .

Allan

rwearmouth

You're a champion! Thanks for all the great work you've done here.