DCJS Datatable Footer with two rows: 1/Sum 2/Columns filters

xad

Hi all,

I got a dcjs dashboard set up with Datatables and working perfectly. At the moment my footer has only one row that gives the individual sum of two of the columns.

window.dataTableJUI = $("#dc-data-table").DataTable({  
    "dom": "<'row'<'span6'><'span6'f>r>t<'row'<'span6'il><'span6'p>>",  
    "lengthChange": true,  
    "info": false,  
    "autoWidth": false,  
    "deferRender": true,  
    "data": alldata,
    "destroy": true,
    "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 for "Avails" column over all pages
                dataAvails = api.column( 6, {search:'applied'} ).data();
                totalAvails = dataAvails.length ?
                    dataAvails.reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                } ) :
                0;

                // Total for "Forecast" column over all pages
                dataForecast = api.column( 7, {search:'applied'} ).data();
                totalForecast = dataForecast.length ?
                    dataForecast.reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                } ) : 0;

                // Update footer
                $( api.column( 1 ).footer() ).html(
                    'Avails total: ' + totalAvails.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " // Forecast total: " + totalForecast.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
                )},
            "columnDefs": [
                { "targets": [ 0 ], "data": "col1", "defaultContent": ""},
                { "targets": [ 1 ], "data": "col2", "defaultContent": ""},
                { "targets": [ 2 ], "data": "col3", "defaultContent": ""},
                { "targets": [ 3 ], "data": "col4", "defaultContent": ""},
                { "targets": [ 4 ], "data": "col5", "defaultContent": ""},
                { "targets": [ 5 ], "data": "col6", "defaultContent": ""},
                { "targets": [ 6 ], "data": "avails", "defaultContent": ""},
                { "targets": [ 7 ], "data": "forecast", "defaultContent": ""}
            ]
        });

I would like to add a second footer row with column-wise search boxes, like shown here

Although it is fairly easy to create the boxes with jquery, I cannot get them to be linked to rest of the table. This makes me think that I should maybe define them in the "footerCallback" but I don't have any idea where to start.

Thanks a lot