fixed column update- update footer values

fixed column update- update footer values

pierzpierz Posts: 9Questions: 4Answers: 1

thanks for datatable is awesome
i have a question, i have a table with a sum of columns values in the footer and fixed columns, so when the data changes the footer values should change but they don't. in the documentation of fixedColumns().update() state that we should update the new table which was created to deploy fixed column. example in the doc.

var table = $('#myTable').DataTable();

table.cell( 0, 0 ).data( 'New data' ).draw();
table.fixedColumns().update();

but i need to update the footer values of the new fixed table and the main table.
thanks in advanced

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,315Questions: 26Answers: 4,771

    Are you using code based off this example to sum the columns?
    https://datatables.net/examples/advanced_init/footer_callback.html

    Kevin

  • pierzpierz Posts: 9Questions: 4Answers: 1

    yes i do; however i have a total by every column, like this
    footerCallback: function () {
    count = count + 1;
    var api = this.api(),
    columns = [4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
    if(count>0) {
    for (var i = 0; i < columns.length; i++) {
    var total = api.column(columns[i], {filter: 'applied'}).data().sum().toFixed(2);
    var total_pagina = api.column(columns[i], { filter: 'applied', page: 'current' }).data().sum().toFixed(2);
    if (total<0 && total_pagina<0){
    $('tfoot th').eq(columns[i]).html('Total:<br><span style="color:red; font-weight: bold; font-size: 11px !important;">'+formatonumeros(total) +'<span><br>');
    }
    else{
    $('tfoot th').eq(columns[i]).html('Total:<br><span style="color:green; font-weight: bold; font-size: 11px !important;">'+formatonumeros(total) +'<span><br>');
    }
    }
    }
    }
    the problem that i have is the fixed column feature blocks the footer callback update.i hope i make myself understood. thanks in advanced

  • kthorngrenkthorngren Posts: 20,315Questions: 26Answers: 4,771
    edited November 2017

    Have you tried the footerCallback without fixedColumns?

    I think the first issue is this line:
    count = count + 1;

    Since this is the first line in the function the variable count is undefined and you probably have an error in your browser's console stating this.

    Kevin

  • pierzpierz Posts: 9Questions: 4Answers: 1
    edited December 2017

    thanks for answering,my new code is like this

              footerCallback: function () {
                var api = this.api(),
                columns = [4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]; 
                        for (var i = 0; i < columns.length; i++) {
                            var total =  api.column(columns[i], {filter: 'applied'}).data().sum().toFixed(2);
                            var total_pagina = api.column(columns[i], { filter: 'applied', page: 'current' }).data().sum().toFixed(2);
                                if (total<0 && total_pagina<0){
                                    $('tfoot th').eq(columns[i]).html('Total:<br><span style="color:red; font-weight: bold; font-size: 11px !important;">'+formatonumeros(total/2) +'<span><br>');
                                }
                                else{
                                    $('tfoot th').eq(columns[i]).html('Total:<br><span style="color:green; font-weight: bold; font-size: 11px !important;">'+formatonumeros(total/2) +'<span><br>');
                                }
                        }
              }, 
    

    howerver i have the same problem, i have to chose between fixed column o footercallback, my goal is have enable the fixed column,fixedheader and footercallback, but there are incompatibilities, i have used jquery.floatThead.js to have fixedheader and footerCallbak works, but not fixedColumn.Thank in advance

  • kthorngrenkthorngren Posts: 20,315Questions: 26Answers: 4,771

    I took your code and built a test case for you:
    http://live.datatables.net/terosali/1/edit

    var total = api.column(columns[i], {filter: 'applied'}).data().sum().toFixed(2);
    var total_pagina = api.column(columns[i], { filter: 'applied', page: 'current' }).data().sum().toFixed(2);

    I received this error:
    Uncaught TypeError: api.column(...).data(...).sum is not a function

    I changed your code to look more like the example and used the reduce() method:
    https://datatables.net/examples/advanced_init/footer_callback.html

    And moved .toFixed(2) to this formatonumeros(total/2). I don't have the formatonumeros function so I removed it my example looks like this: (total/2).toFixed(2).

    This works with FixedColumns. I have one of the FixedColumns with a sum and one without. Plus the remaining columns are summed.

    Maybe you can provide a test case showing the issue so it can be debugged.

    Kevin

  • pierzpierz Posts: 9Questions: 4Answers: 1
    edited December 2017


    i can't do it a test case because i need real data, i guess so; but ican explain better, i have two inputs date to choose a first date and final date and i have a button to send my requirement , so i have a jaax data to load my datatable.
    my datatable footer callback doesn't change when ia change the date i have consulted. but it only happen when i have enabled the FixedColumn or FixedHeader.

  • kthorngrenkthorngren Posts: 20,315Questions: 26Answers: 4,771

    Are you getting any errors in your browser's console?

    I've shown with your above example that FixedColumns does not affect the footer callback function. Without seeing the code you are working with its hard to troubleshoot.

    Maybe you can use one of the pre-built data sources listed here:
    https://datatables.net/manual/tech-notes/9

    Update to use your datepicker and code to show the issue with fixed headers or fixed columns.

    Kevin

  • pierzpierz Posts: 9Questions: 4Answers: 1
    edited December 2017


    i dont have any problems in my console, anyway i'm gonna a load tets.

  • pierzpierz Posts: 9Questions: 4Answers: 1
    Answer ✓

    i haved find a solution here: https://jsfiddle.net/azcmd76r/

This discussion has been closed.