Why summary (FooterCollback) not work on my page?

woolfik

Hello,

I have try to add such function:
https://datatables.net/examples/advanced_init/footer_callback.html
to my dt but it is not working. In chrome - console - show nothing, no errors from js. Footer looks like this:

<tfoot><th colspan="5">HAKUNAMATATA<div id="paging"></div></th></tfoot>

HAKUNAMATATA is showing but this script:

<script>
  $(document).ready(function() {
   'use strict'
    $('#tfv').dataTable(
     {
        "bJQueryUI": false,
        "bStateSave": true,
        "sPaginationType": "full_numbers",   
        "bLengthChange": true,
        "sDom": 'Rfrtlip', 
        "iDisplayLength": 100,
        "oLanguage": {"sLengthMenu": "Wyświetlanie:  _MENU_ rekordów na stronie",
                      "sZeroRecords": "Nic nie znaleziono",
                      "sInfo": "Wyświetlone od _START_ do _END_ z _TOTAL_ rekordów",
                      "sInfoEmpty": "Wyświetlone od 0 do 0 z 0 rekordów",
                      "sInfoFiltered": "(filtered from _MAX_ total records)",
                      "oPaginate": {"sFirst": "Pierwsza",          
                                    "sLast": "Ostatnia",
                                    "sNext": "Następna",
                                    "sPrevious": "Poprzednia"}
                     },
        "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
            total = api.column(4)
                .data()
                .reduce(function (total, b) {
                b = $(b.replace('$', '')).text();
                return total + parseInt(b);
            },0);
            // Total over this page
            pageTotal = api.column(4, {
                page: 'current'
            })
                .data()
                .reduce(function (total, b) {
                b = $(b.replace('$', '')).text();
                return total + parseInt(b);
            }, 0);
 
            // Update footer
            $(api.column(4).footer()).html(
                '$' + pageTotal + ' ( $' + total + ' total)');
        }
     } 
    ).yadcf
    (
      [
        {
          column_number:1,
          filter_type: "multi_select",
          select_type: 'select2'
        }
      ]
    )
    SyntaxHighlighter.all();
    });</script>

does nothing ... can someone help with this?

colin

Hi @woolfik ,

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

woolfik

Sorry,

I have create test account on ma page:

https://woolflan.pl/modus/public.home

login tysia
password t

Can You can help now?

kthorngren

Looks like the problem is with the colspan="5" you have in the footer. Effectively you have only one footer column, which would be 0 not 4 in your `//update footer code.

You would need to change the code to this:

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

Kevin

woolfik

I have change it and still not working

allan

You are using a very old version of DataTables (1.9.4). Can you update to the current release please?

Allan

woolfik

I have try it on the first place but on newest version few other plugins not working. There will be lot of work to make it works on newes version so before I will start doing this I try to do it on this (1.9.4) version.

woolfik

And ... can someone help?

allan

We don't provide support for 1.9.x any more. However, what I can say is that you are using footerCallback which was introduced in 1.10. The 1.9 equivalent is fnFooterCallback .

You'll also need to update the code inside the function to use the legacy API since you are using the 1.10 API there.

Have a look at this legacy example.

But I've very much encourage you to update :-)

Allan