Question

我使用数据表作为为我的网站创建表格的工具。您可以在行动 here 中看到它。

一切都按预期工作，但我希望多重过滤器不在桌面之内。我尝试制作另一张桌子并将其放在上面 - 尽管显示了输入框，但它们无法正常工作。

这是我目前的代码：

<script type="text/javascript">
// Setup - add a text input to each footer cell
jQuery(document).ready(function($) {
    $('#cq-datatables-<?php echo $datatable_id; ?> tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    var table = $('#cq-datatables-<?php echo $datatable_id; ?>').DataTable( 
    {
        "processing": true,
        "serverSide": true,
        "responsive": true,
        "ajax": {
            "url": "<?php echo plugins_url(); ?>/cq-datatables/datatables/scripts/post.php",
            "type": "POST",
            "data": function(dtParms){ 
                        dtParms.table_name = "<?php echo $retrieve_table_name; ?>";
                        dtParms.column_names = '<?php echo $column_names; ?>';
                        return dtParms;
                    }
        },
        initComplete: function() {
          var api = this.api();

          // Apply the search
          api.columns().every(function() {
            var that = this;

            $('input', this.footer()).on('keyup change', function() {
              if (that.search() !== this.value) {
                that
                  .search(this.value)
                  .draw();
              }
            });
          });
        },
        "columns": [<?php echo $test; ?>],
        "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false
            }
        ],
        "dom": '<"row"<"col-md-12"<"pull-right"B>l>><"custom-spacer"f>rtip',
        "buttons": [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print',
            'colvis'
        ]
    } 
    );
} );
</script>
    <table id="cq-datatables-<?php echo $datatable_id; ?>" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <?php
                    $table_counter = 0;
                    foreach ($cq_existing_columns as $table_columns) {
                        echo "<th>".ucwords(str_replace('_', ' ', $table_columns))."</th>";
                    }
                ?>
            </tr>
        </thead>
        <tfoot>
                <tr>
                    <?php
                        $table_counter = 0;
                        foreach ($cq_existing_columns as $table_columns) {
                            echo "<th>".ucwords(str_replace('_', ' ', $table_columns))."</th>";
                        }
                    ?>
                </tr>
            </tfoot>
    </table>

非常感谢任何帮助。谢谢！

更新

这是用户界面，但搜索功能未按预期运行。

利

Answer 1

I am doing the same thing in this way. Hope it helps you.

<input type="text" id="searchBox1" placeholder="Search Here.."></input>
<input type="text" id="searchBox2" placeholder="Search Here.."></input>
<input type="button" value="Search"  id="searchButton" name="search">

$('#searchButton').on('click', function () {
    table.draw();
});

And the data param of datatable ajax will be like this :
'data' :function (d){
      d.search_term1 = $("#searchBox1").val(),
      d.search_term2 = $("#searchBox2").val()
}

表外的多重过滤器

1 个答案: