table footer/sum

st4rbuck2013

Hi, fairly new, trying to sum a column. Script near the bottom I believe has searchpanes conflicting with the column adding. How do I fix this? Please and thanks for your time. I've looked at numerous examples I'm pretty theres something wrong there.

    <script>
        $(document).ready(function() {




            $('#example').DataTable( {



                searchPanes: {
                    collapse: false,
                    layout: 'columns-4',
                    dtOpts: {
                        scrollY: '50px',
                        scrollY: false,
                    }
                },




                dom: 'Ptri',
                pageLength: '82',

                columnDefs: [

            {
                searchPanes: {
                    show: true,
                    collapse: false,
                    header: 'Opponent',
                    dtOpts: {
                        scrollY: '100px',
                    }
                },
                targets: [11]
            },
            {
                searchPanes: {
                    show: false
                },
                targets: [2,3,4,5]
            },
            {
                searchPanes: {
                    controls: false
                },
                targets: [1,8,9,10]
            }



        ]


footerCallback: function (row, data, start, end, display) {
            let api = this.api();

            // Calculate total over all pages
            let total = api.column(3, { page: 'all' }).data().sum();

            // Calculate total over this page
            let pageTotal = api.column(3, { page: 'current' }).data().sum();

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


    });

        });

    </script>

allan

What you have there looks okay on a quick scan. Can you link to a page showing the issue so I can debug it? Use https://live.datatables.net to create a test case if you can't host it yourself.

Allan

kthorngren

I'm not sure why searchPanes would affect your footerCallback code as they are independent of each other. You don't state what exactly is happening so I'm not sure what needs fixed. However it does look like you are missing a comma on line 54 after the ].

If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

st4rbuck2013

Thanks for quick replies, here is the test case URL

https://live.datatables.net/xihodono/1/edit

kthorngren

Use the browser's console to debug the errors you are getting.

First error:

Uncaught SyntaxError: Unexpected identifier 'footerCallback'

Add the comma I mentioned.

The next error:

jquery-3.7.0.js:3783 Uncaught TypeError: api.column(...).data(...).sum is not a function

The .sum() is a plugin you need to add. It can be found here.

Although the browser seems to fix this you should define the -tag tfootoutside the-tag tbody`. I moved it and fixed the other to issues here:
https://live.datatables.net/xihodono/1/edit

Kevin

st4rbuck2013

Allan, Kevin, thank you guys for helping everyone here. Cheers

PS Kevin ty for console tip & solution