how to combine combine footer_callback with multi_filter in datatables

问题

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?

回答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.

来源：https://stackoverflow.com/questions/40011700/how-to-combine-combine-footer-callback-with-multi-filter-in-datatables

标签

datatables