如何在數據表中包含tfoot

Question

我正在使用jQuery數據表插件。如何在下面的代碼中添加個人專欄搜索tfoot：

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']],  

    }); 
} 

任何幫助表示讚賞。

Answer 1

從我所看到的沒有自動化的方式來打開列過濾器。即使在他們的示例代碼中，他也會手動將輸入框放入頁腳單元格中。

在我的示例中，我將輸入框放在頁腳html中，而不是通過代碼嘗試。請特別注意ajax部分中的data：部分，以瞭解我如何將數據從表格中提取出來，並將其放入由datatables提供的搜索對象中。

你可以看到它在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(); 

    }); 
    } 

Answer 2

工作，該代碼可以正常使用

// 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) 

    }); 
    }