how to include tfoot in datatable

Question

I am using jQuery datatable plugin. How to add tfoot with individual column search in below code:

if ($('#myTable').length > 0)
{
    var oTable = $('#myTable').dataTable({

        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "processing": true,
        "serverSide": true,
        "aoColumnDefs": [
            {"sClass": "dt_col_hide", "aTargets": [0]}
        ],
        aaSorting : [[0, 'desc']],      

    });
}

Any help is appreciated.

Answer 1

This code working perfectly

// clone tfoot like thead
$("#myTable").append(
        $('<tfoot/>').append($("#myTable thead tr").clone())
);

// append tfoot after thead
$('#myTable tfoot').insertAfter($('#myTable thead'))

// Mytable Search script in tfoot

    var table = $('#myTable').dataTable();
    $('#myTable tfoot th').each(function (i)
    {
        var title = $('#myTable thead th').eq($(this).index()).text();
        var serach = '<input type="text" placeholder="Search ' + title + '" />';
        $(this).html('');
        $(serach).appendTo(this).keyup(function () {
            table.fnFilter($(this).val(), i)

    });
   }

Answer 2

From what I have seen there is no automated way to turn on a column filter. Even in their sample code, he manually puts in the input boxes in the footer cells.

In my sample, I put the input boxes in the footer html instead of trying to it through code. Pay particular attention to the data: section in the ajax section to see how I put the data out of the table and put it in the search object provided by datatables for me.

you can see it work at http://live.datatables.net/tayelawu/2/edit

    $(document).ready(function () {
               $("#example").on("preInit.dt", function(){

                 $("#example_wrapper input[type='search']").after("<button type='button' id='btnexample_search'></button>");
               });


            $('#example').DataTable({

                "processing": false,
                "serverSide": true,
              "initComplete":function(){onint();},
                "ajax":{
                    url: "/examples/server_side/scripts/objects.php",
                    type:"GET",
                  data:function(dtp){
                     // Get the column search values and stuff them in the  datatable provided parameters.
                     var $search = $("#example tfoot input");
                     $search.each(function(i, item){
                          dtp.columns[i].search.value = $(item).val();
                     });

                    // change the return value to what your server is expecting
                    // here is the path to the search value in the textbox
                    var searchValue = dtp.search.value;
                    return dtp;}
                },
                "columns": [
                { "data": "first_name" },
                { "data": "last_name" },
                { "data": "position" },
                { "data": "office" },
                { "data": "start_date" },
                { "data": "salary" }
                ]
            });

        });

   // this function is used to intialize the event handlers
   function onint(){
     // take off all events from the searchfield
     $("#example_wrapper input[type='search']").off();
     // Use return key to trigger search
     $("#example_wrapper input[type='search']").on("keydown", function(evt){
          if(evt.keyCode == 13){
            $("#example").DataTable().search($("input[type='search']").val()).draw();
          }
     });
     $("#btnexample_search").button().on("click", function(){
           $("#example").DataTable().search($("input[type='search']").val()).draw();

     });
   }