DataTables

Question

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

按照正在做的方法，只有"Country"被抓取过滤成功

我想为 "Country, City"

创建两个过滤器选项

Answer 1

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

您可以通过单击“运行代码片段”按钮来运行演示。您还可以阅读我在演示中添加到 HTML 和 JavaScript 的评论。

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

它没有与 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": "0,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "2,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    },
    {
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "3,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "2,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "2,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>

DataTables - PHP/AJAX 多搜索下拉列表

DataTables - PHP/AJAX Multisearch dropdown

php

ajax

dropdown