DataTable—为什么我不能让单个列搜索(选择输入)工作?

DataTable - Why can't I get individual column searching (select inputs) working?

本文关键字：选择输入工作搜索单个列为什么不能 DataTable 更新时间：2023-09-26

我使用的是来自DataTables.net的JavaScript表功能包，我遇到了一个非常适合我需要的功能，即单个列搜索(选择输入)，在这里找到。

这个特性允许向下钻取列数据，过滤它。

我已经尝试了标准实现，但没有运气。我发现在实现上没有特定的字段，并尝试删除所有其他属性。

我的代码是:

<script type="text/javascript">
    $(document).ready(function() {
        $('#alertLogTable').DataTable( {
            language: {
                url: '//cdn.datatables.net/plug-ins/1.10.11/i18n/Portuguese-Brasil.json'
            },
            responsive: true,
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
                column.data().unique().sort().each( function ( d, j ) {
                   select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
                } );
            }
        });
    });
</script>

datatable .net页面上的演示显示了每个列下面的按钮来过滤它。我没有得到这些和过滤功能。我遗漏了什么?

您的代码工作良好。我百分之百确定你只是忘了包括<tfoot>部分。脚注不是通过魔法添加的，如果<tfoot>不存在，则<select>插入到无。记住:

<table>
  <thead>
    <tr><th></th></tr>
  </thead>
  <tbody>
    <tr><td></td></tr>
  </tbody>
  <tfoot>
    <tr><th></th></tr>
  </tfoot>
</table>

这是我的ajax侧代码，我有一个问题，当我选择下拉选项记录不过滤它只显示我的处理。当我移除serverside: true时，它工作得很好，但我的记录显示我很慢。任何一个都有解决方案在这个下拉搜索过滤器。

$("#ajaxTable").DataTable({
  bPaginate: true,
  bProcessing: true,
  bDestroy: true,
  serverSide: true,
  searching: true,
  order: [],
  //"ordering": true,
  //"columnDefs": [{ orderable: false, targets: [5] }],
  pageLength: 25,
  //"deferRender":    true,
  ajax: {
    url: "",
    type: "POST",
    data: {},
    error: function (html) {},
    beforeSend: function () {
      //$('#image').show();
    },
    complete: function (data) {
      //let obj = JSON.parse(data);
      //console.log(data['responseJSON'].recordsTotal);
    },
  },
  columns: [
    { data: "srno" },
    { data: "id" },
    { data: "date" },
    { data: "ref" },
    { data: "pname" },
    { data: "regional_manager" },
    { data: "al_backend" },
    { data: "area_manager" },
    { data: "territory_manager" },
    { data: "customer_name" },
    { data: "mobile_no" },
    { data: "modified_date" },
    { data: "status" },
    { data: "action" },
    { data: "edit" },
    { data: "remark" },
    { data: "lead_remark" },
    { data: "gender" },
    { data: "currentlocation" },
    { data: "employ_type" },
    { data: "damount" },
    { data: "nooldcard" },
    { data: "rcbook" },
    { data: "model" },
    { data: "disbursed_amount" },
    { data: "disbursed_date" },
    { data: "disbursed_bank" },
    { data: "sanction_amount" },
    { data: "sanction_date" },
    { data: "sanction_bank" },
    { data: "pan_card" },
    { data: "aadhar_card" },
    { data: "bank_state" },
    { data: "salary_slip" },
    { data: "rc_card" },
    { data: "zip" },
  ],
  language: {
    searchPlaceholder: "Search...",
    search: "",
    lengthMenu: "_MENU_ items/page",
    infoFiltered: "",
    processing:
      "<img src='' style='position: absolute;top: 50%;left: 50%;margin: -100px 0px 0px -50px;' />",
  },
  dom: "Blfrtip",
  buttons: [
    {
      extend: "excel",
    },
  ],
  initComplete: function () {
    this.api()
      .columns([4])
      .every(function () {
        var column = this;
        var select = $('<br><select><option value="">ALL</option></select>')
          .appendTo($(column.header()))
          .on("change", function () {
            var val = $.fn.dataTable.util.escapeRegex($(this).val());
            column.search(val ? "^" + val + "$" : "", true, false).draw();
          });
        column
          .data()
          .unique()
          .sort()
          .each(function (d, j) {
            select.append('<option value="' + d + '">' + d + "</option>");
          });
      });
  },
});