javascript - 如何在数据表中显示多个筛选下拉列表？

Question

我正在使用数据表来显示正在运行的列表。现在默认过滤器我得到显示条目和搜索。

我必须为过滤器添加一个名为role 的下拉列表。如果用户选择“Leader”，则会填充记录并显示在列表中。并且

如何在顶部和底部显示两个以上的下拉菜单？

你能帮我解决这个问题吗？

var Table = $('#list').DataTable();

.e_list {
  width: 80%;
  margin: auto;
  text-align: center;
}

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<div class="body_wrapper">
  <div class="pad0 m_b_20">
    <div class="e_list">
      <table cellspacing="0" id="list">
        <thead>
          <tr>
            <th>Sr.no</th>
            <th> Employee Name </th>
            <th> Mobile No. </th>
            <th> Designation </th>
            <th> Role </th>
            <th> Status </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>mnbv vfgds</td>
            <td>asdf</td>
            <td>789654120</td>
            <td>Leader</td>
            <td>Admin</td>
          </tr>

          <tr>
            <td>2</td>
            <td>poijh</td>
            <td>asdfasd</td>
            <td>789145220</td>
            <td>Employee</td>
            <td>CSR</td>
          </tr>
        </tbody>
      </table>

    </div>
  </div>
  <div class="btn_container  "> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

Answer 1

HTML

$(document).ready(function() {
    $('#list').DataTable( {
        initComplete: function () {
            this.api().columns("4").every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $("#role_menu_placeholder").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>' )
                } );
            } );
			
			            this.api().columns("5").every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $("#status_menu_placeholder").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>' )
                } );
            } );
        }
    } );
} );

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<div class="body_wrapper">
  <div class="pad0 m_b_20">
  <div>
  <label>Role: </label>
  <span id="role_menu_placeholder"></span>
  </div>
  <div>
  <label>Status: </label>
    <span id="status_menu_placeholder"></span>
  </div>
    <div class="e_list">
      <table cellspacing="0" id="list">
        <thead>
          <tr>
            <th>Sr.no</th>
            <th> Employee Name </th>
            <th> Mobile No. </th>
            <th> Designation </th>
            <th> Role </th>
            <th> Status </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>1</td>
            <td>mnbv vfgds</td>
            <td>asdf</td>
            <td>789654120</td>
            <td>Leader</td>
            <td>Admin</td>
          </tr>

          <tr>
            <td>2</td>
            <td>poijh</td>
            <td>asdfasd</td>
            <td>789145220</td>
            <td>Employee</td>
            <td>CSR</td>
          </tr>
        </tbody>
           <tfoot>
      <tr>
        <th></th>

        <th></th>

        <th></th>

        <th></th>

        <th></th>

        <th></th>
      </tr>
    </tfoot>
      </table>

    </div>
  </div>
  <div class="btn_container  "> </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

我用数据表官方文档中的代码想出了这个