how to combine combine footer_callback with multi_filter in datatables

Question

I am trying to combine footer_callback with multi_filter

this is my fiddle attempt but I cannot get the footer_callback code to work. I am not sure if I need to do major changes.

I have 2 footers, 1 I use for the search per column(multi_filter) and the 2nd I use for the sumation of a colum(footer_callback). I have slightly modified the code for the multi_filter to work (html and js). I am just not sure what to do for the footer_call_back to work. Can anyone advise how I can get the footer_callback code to work(currenly commented out)?

html code for footer_call_back:

<tfoot>
    <tr>
      <th colspan="4" style="text-align:right">Total:</th>
      <th></th>
    </tr>
  </tfoot>

js code for footer_callback:

"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 (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Total over this page
        pageTotal = api
            .column( 4, { page: 'current'} )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

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

html code for multi_filter:

  <tfoot id="search">
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Age</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>

jscoder for multifilter:

// Setup - add a text input to each footer cell
  $('#example tfoot#search th').each(function() {
    var title = $(this).text();
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
  });

  // DataTable
  var table = $('#example').DataTable();

  // Apply the search
  table.columns().every(function() {
    var that = this;

$('input', this.footer()).on('keyup change', function() {
  if (that.search() !== this.value) {
    that
      .search(this.value)
      .draw();
  }
});

EDIT1

That does not work or that fixes the footer_callback but breaks the multi_filter

I have tidied up the so the columns line up here FIDDLE:

and then done the changes recommended here FIDDLE which looks like this:

$(document).ready(function() {

 $('#example').DataTable( {

        // footer_callback code goes here...

    } );  // end $('#example').DataTable( {

//multi_filter code goes here...

} );

and that gets the footer_callback to work but then the multi_filter does not work. Anyway I can get both of them to work together?

Dipak Thoke · Accepted Answer · 2016-10-17T07:24:00.970

1

You need put this footerCallback in data table initialization function.like this

$('#example').DataTable( {


            "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 (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Total over this page
            pageTotal = api
                .column( 4, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

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

        });

Working demo refer this.

https://jsfiddle.net/dipakthoke07/7bh7w2tu/8/ OR http://jsfiddle.net/dipakthoke07/s8F9V/569/

Thank you hope this will help you.

edited Oct 17 '16 at 07:24

answered Oct 13 '16 at 05:18

Dipak Thoke

1,963
11
18

tks but that breaks `multi_filter` see my edit1 in my question. Anyway I can get both of them to work together? – HattrickNZ Oct 13 '16 at 22:24
https://jsfiddle.net/Prakash_Thete/ehhfsrfq/ please refer this fiddle inorder to work with multi search functionality. – Dipak Thoke Oct 14 '16 at 08:24
sorry my comment may have been unclear, my question was to get the multi search working with the footer_callback together. does this makes sense? – HattrickNZ Oct 16 '16 at 19:42
Hey man @HattrickNZ finally i solve your problem please check updated js fiddle link. – Dipak Thoke Oct 17 '16 at 06:59
Is this working for you i'm w8 for your responace thanks – Dipak Thoke Oct 17 '16 at 11:44
tks @Dipak you got me thinking in the right way, which helped me get it answered [my way](http://stackoverflow.com/questions/40096755/datatables-2-footers-control-which-one-is-manipulated-in-the-footer-callback/40098015?noredirect=1#comment67473926_40098015). yours works [this](http://jsfiddle.net/dipakthoke07/s8F9V/569/) is the better of the 2 fiddles you provided, just my link here is slightly different. – HattrickNZ Oct 25 '16 at 02:57

how to combine combine footer_callback with multi_filter in datatables

EDIT1

1 Answers1

Linked