时间戳

首页 > 解决方案 > 无法按 DataTable 中的列显示过滤器

javascript - 无法按 DataTable 中的列显示过滤器

问题描述

我正在使用数据表，并且需要具有基于单个列的搜索功能以及全局搜索我正在使用 2D 数组。

它确实放置了搜索框，但它没有进行正确的搜索，它没有进行良好的全局搜索

我试过了

<!DOCTYPE html>
<html>

<head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js" type="text/javascript"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">

</head>

<body>

    <div id="example">
        <!-->dynamic initialisation where first row of array will be headers<-->
    </div>

    <script>
        $(document).ready(function() {
            // Setup - add a text input to each footer cell
            var dataHere = [
                ["Name", "Role", "Place", "ID", "Date"],
                [
                    "Tiger Nixon",
                    "System Architect",
                    "Edinburgh",
                    "5421",
                    "2011/04/25",
                    "$3,120"
                ],
                [
                    "Garrett Winters",
                    "Director",
                    "Edinburgh",
                    "8422",
                    "2011/07/25",
                    "$5,300"
                ]
            ]
            $(document).ready(function() {
                var html = ''
                for (var j = 0; j < dataHere[0].length; j++) {
                    html = html + '<td><input type="' + dataHere[0][j] + '" placeholder="Search ' + dataHere[0][j] + '" /></td>'
                }
                $("#example thead tr").html(html);
                // DataTable
                var table = $('#example').DataTable({
                    "data": dataHere,
                    initComplete: function() {
                        $('#example thead th').each(function() {
                            var title = $(this).text();
                            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                        });
                        this.api().columns().every(function() {
                            var that = this;
                            $('input', this.footer()).on('keyup change clear', function() {
                                if (that.search() !== this.value) {
                                    that
                                        .search(this.value)
                                        .draw();
                                }
                            });
                        });
                    }
                });
            });
        });
    </script>

</body>

</html>

我需要像这样实现，但搜索框需要在顶部

https://datatables.net/examples/api/multi_filter.html

标签： javascriptjquerydatatables

解决方案

我以你的出发点做了一些修改。最终结果：

var dataHere = [
  ["Name", "Role", "Place", "Extn.", "Date"],
  [
    "Tiger Nixon",
    "System Architect",
    "Edinburgh",
    "5421",
    "2011/04/25",
  ],
  [
    "Garrett Winters",
    "Director",
    "London",
    "8422",
    "2011/07/25",
  ]
];
 
$(document).ready(function() {

  // build 2 headers - the 1st for sorting, the 2nd for filtering:
  var head1 = '<tr>';
  var head2 = '<tr>';
  for (var j = 0; j < dataHere[0].length; j++) {
    head1 = head1 + '<th>' + dataHere[0][j] + '</th>';
    head2 = head2 + '<th><input type="' 
        + dataHere[0][j] 
        + '" placeholder="Search ' 
        + dataHere[0][j] + '" /></th>';
  }
  head1 = head1 + '</tr>';
  head2 = head2 + '</tr>';
  $("#example thead").html(head1 + head2);
  
  var table = $('#example').DataTable({
    data: dataHere.slice(1),
    orderCellsTop: true,
    initComplete: function() {
      // add event handlers to each of our column filters:
      $('#example thead tr:eq(1) th').each( function (i) {
        $( 'input', this ).on( 'keyup change', function () {
          if ( table.column(i).search() !== this.value ) {
            table.column(i).search( this.value ).draw();
          }
        } );
      } );
    }
  });

} );
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.11.0/js/jquery.dataTables.min.js" type="text/javascript"></script>
  <script src="https://cdn.datatables.net/1.11.0/js/dataTables.bootstrap5.min.js" type="text/javascript"></script>

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.datatables.net/1.11.0/css/dataTables.bootstrap5.min.css">

</head>

<body>

<div style="margin: 20px;">
    
    <table id="example" class="display dataTable cell-border" style="width:100%">
        <thead></thead>
        <tbody></tbody>
    </table>

</div>

</body>
</html>

我所做的主要更改：

  1. 确保dataHere行数据在值的数量和数据类型方面与标题数据匹配。

  2. 为方便起见，提供带有空<thead>和<tbody>标记的起始 HTML 结构（使 JavaScript 代码更容易一些）。

  3. 在 JavaScript 中，构建 2 个标题行。这是为了确保排序事件与过滤事件完全分开。否则，如果 DataTable 中只有一个标题行，则每次尝试过滤时都会进行排序。

  4. 包含orderCellsTop: true在 DataTable 定义中。从第 (3) 点开始，这告诉 DataTables 只有表中的第一个标题行用于排序。

  5. 删除了不需要的代码。因为您正在预先构建 HTML 表，所以您已经拥有了所需的过滤器 - 您无需在 DataTable 初始化代码中重复该逻辑。

推荐阅读