Filter by select and sum one column

massi013

Hi guys,

I have integrate this javascript to have SUM at the end of 4 column. I use the demo in example folder, but now i want to integrate the filter select, but i am not able

This my actually script javascript that works fine.

---

$(document).ready(function() {

$('#example').dataTable( {
    "oLanguage": {
     "sLengthMenu": 'Mostra <select>'+
  '<option value="-1">Tutti</option>'+
  '<option value="100">100</option>'+
  '<option value="200">200</option>'+
  '<option value="300">300</option>'+
  '<option value="400">400</option>'+
  '<option value="500">500</option>'+
  '</select> records'
   },
    "filter": "applied",
    "iDisplayLength": 50000,
    "order": [[ 1, "desc" ]],
    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api();
        // 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
        var total = api
            .column( 4 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );

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

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

} );

---

how can I add the filter at column?
Thank you guys..

This Plugin is awesome!!!;)

allan

What have you tried? Perhaps you can link to the page so we can see what stage you are at.

Allan

massi013

i haven't tried, i add only this part of script but it doesn't works.

This is tha script part that i have insert into

---

$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
$("#example tfoot input").on( 'keyup change', function () {
table
.column( $(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );

---

and this appears only a input text in the bottom of column, and not work it.

I want an input text for each column, mantaining the total