Question

我正在使用jQuery datatable插件。如何在下面的代码中使用单个列搜索添加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

此代码完美运行

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

据我所知，没有自动启用列过滤器的方法。即使在他们的示例代码中，他也会手动输入页脚单元格中的输入框。

在我的示例中，我将输入框放在页脚html中，而不是通过代码尝试它。请特别注意数据：ajax部分中的部分，以了解我如何将数据放出表格并将其放入数据表为我提供的搜索对象中。

你可以在__attribute__((aligned(N)))

看到它有效

    $(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();

     });
   }

如何在数据表中包含tfoot

2 个答案: