DataTables - PHP/AJAX 多搜索下拉菜单答案

【问题标题】：DataTables - PHP/AJAX Multisearch dropdownDataTables - PHP/AJAX 多搜索下拉菜单
【发布时间】：2021-12-09 23:17:49
【问题描述】：

我有我的数据表，我想用下拉列表过滤它们：

使用正在执行的方法，只有"Country" 被成功获取和过滤。

我想为"Country, City"创建两个过滤器选项

【问题讨论】：

"我想创建两个过滤器选项" - 是什么阻止您添加这两个其他过滤器？您面临的实际问题是什么？此外，您能否在问题本身中显示相关（最低要求）代码和数据，而不仅仅是提供链接？如果这是DataTables 问题，您可以删除不明确的datatable 标签并改用datatables。
如果它可能有帮助：您是否看过诸如 this one 之类的示例，它显示了两个过滤器输入一起工作？
你好@andrewJames，我正在学习 PHP 的基础知识。花一些时间使用其他过滤器来完成这项工作，但无法做到。我上传了完整的源代码，因为我想按原样查看解决方案。老实说，我不太确定如何完全分离（由于 fetch.php）我认为这会占用太多空间，谢谢您的回答，他们非常有帮助
我还看到两个输入过滤了一个范围，但这并不是我想要做的。我要做的就是在下拉菜单中从数据库中获取记录，因此用户可以选择和过滤多个记录，这将导致数据表的实时 ajax
好的 - 明白了，谢谢。如果您的具体问题是如何创建多个 JavaScript/DataTables 列过滤器，那么 PHP 端很可能无关紧要。您可以为此使用hard-coded HTML table data。这可以帮助解决minimal reproducible example 的“最小”部分。

标签： php ajax datatables dropdown

【解决方案1】：

这是一个最小的方法，它使用一些嵌入在演示中的硬编码测试数据，并使用两个下拉列表来控制过滤。

您可以通过单击“运行代码 sn-p”按钮来运行演示。您也可以阅读我在演示中添加到 HTML 和 JavaScript 中的 cmets。

演示不是一个完整的解决方案。

它没有与 PHP 集成 - 它只关注如何在 DataTable 中执行过滤。
这两个下拉菜单之间没有关系。当您为第一个下拉列表选择一个值时，第二个下拉列表中的可用值列表不会改变。构建该功能将是一个更高级的主题。我相信在 Stack Overflow 上存在其他问题。

// This is hard-coded test data. Normally, this would 
// be provided by your PHP code. But using this here
// helps us to create a minimal self-contained demo:
var dataSet = [
    {
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "$112,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    },
    {
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "$433,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "$162,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "$372,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    }
  ];

$(document).ready(function() {

var table = $('#example').DataTable( {
  data: dataSet,
  columns: [
    { title: "Name", data: "name" },
    { title: "Office", data: "office" },
    { title: "Position", data: "position" },
    { title: "Start date", data: "start_date" },
    { title: "Extn.", data: "extn" },
    { title: "Salary", data: "salary" }
  ],
  initComplete: function () {
    // This demo uses two columns: index 1 (office) and index 2 (position):
    this.api().columns( [1, 2] ).every( function () {

      var column = this;

      // this locates the drop-down for the relevant column using the 
      // 'data-col-idx' attribute defined in each drop-down:
      var select = $("select[data-col-idx='" + column.index() + "']");

      // this builds a sorted list of column values for each drop-down, 
      // and then adds that data to each drop-down:
      column.data().unique().sort().each( function ( val ) {
        select.append( '<option value="' + val + '">' + val + '</option>' )
      } );

      // this adds "change" events to each drop-down, and when the events fire,
      // there is logic to filter each affected column:
      select.on( 'change', function () {
        // get the selected value from the drop-down:
        var val = $.fn.dataTable.util.escapeRegex( $(this).val() );
        // use that value to filter the column data in the table:
        column.search( val ? '^' + val + '$' : '', true, false ).draw();
      } );

    });
  }

} ); 

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

</head>

<body>

<div style="margin: 20px;">

    <!-- each drop-down starts with one drop-down option (an empty value) needed to 
         reset the filter back to "all values". It also uses data-col-idx attributes 
         to allow each drop-down to be matched to a column in the DataTable            -->
    <select data-col-idx="1" style="margin: 10px; width:150px;"><option value=""></option></select>
    <select data-col-idx="2" style="margin: 10px; width:250px;"><option value=""></option></select>

    <table id="example" class="display dataTable cell-border" style="width:100%">
    </table>

</div>



</body>
</html>

【讨论】：