如何使用具有可水平滚动引导数据表的自定义过滤器？

时间：2016-12-07 21:43:25

标签： jquery twitter-bootstrap datatables

我正在使用水平可滚动引导数据表并创建了一个自定义过滤器。

当我选择我的选择框的特定值时，我想只显示具有该特定类的列。这一切都运作良好，我唯一的问题是：

所选列在视觉上不适合我的窗口，这意味着它们的宽度与包含所有列的表格相同，即使结果只有一列。它们也有点偏移..我在这里创建了一个例子：

$('.data-table').DataTable({
  "scrollX": true,
  initComplete: function () {
    $('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>').appendTo($("#DataTables_Table_0_filter"));
    $("select").on("change", function () {
      var product = $(this).val();
      $(".all").hide();
      $("." + product).show();
    });
  }
});
div.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">

<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>
<table class="data-table table table-bordered table-striped">
  <thead>
    <tr>
      <th class="all name">Name</th>
      <th class="all position">Position 1</th>
      <th class="all position">Position 2</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Something else</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="all name">Tiger Nixon</td>
      <td class="all position">System Architect</td>
      <td class="all position">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Garrett Winters</td>
      <td class="all position">Accountant</td>
      <td class="all position">Tokyo</td>
      <td class="all">63</td>
      <td class="all">2011/07/25</td>
      <td class="all">$170,750</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Ashton Cox</td>
      <td class="all position">Junior Technical Author</td>
      <td class="all position">San Francisco</td>
      <td class="all">66</td>
      <td class="all">2009/01/12</td>
      <td class="all">$86,000</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
    </tr>
  </tbody>
</table>

1 个答案:

答案 0 :(得分：1)

您可以使用columns.adjust()虽然我不确定这是否是所需的结果，但它会相应地调整列。

$('.data-table').DataTable({
  "scrollX": true,
  initComplete: function(settings) {
    $('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>').appendTo($("#DataTables_Table_0_filter"));
    $("select").on("change", function() {
      var product = $(this).val();
      $(".all").hide();
      $("." + product).show();
      var api = new $.fn.dataTable.Api(settings);
      api.columns.adjust().draw();
    });

  }
});
div.dataTables_wrapper {
  width: 100%;
  margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">

<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>

<table class="data-table table table-bordered table-striped">
  <thead>
    <tr>
      <th class="all name">Name</th>
      <th class="all position">Position 1</th>
      <th class="all position">Position 2</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Name</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
      <th class="all">Something</th>
      <th class="all">Something</th>
      <th class="all">Something else</th>
      <th class="all">Age</th>
      <th class="all">Start date</th>
      <th class="all">Salary</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="all name">Tiger Nixon</td>
      <td class="all position">System Architect</td>
      <td class="all position">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Garrett Winters</td>
      <td class="all position">Accountant</td>
      <td class="all position">Tokyo</td>
      <td class="all">63</td>
      <td class="all">2011/07/25</td>
      <td class="all">$170,750</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
    </tr>
    <tr>
      <td class="all name">Ashton Cox</td>
      <td class="all position">Junior Technical Author</td>
      <td class="all position">San Francisco</td>
      <td class="all">66</td>
      <td class="all">2009/01/12</td>
      <td class="all">$86,000</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
      <td class="all">2011/04/25</td>
      <td class="all">$320,800</td>
      <td class="all">Tiger Nixon</td>
      <td class="all">System Architect</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">Edinburgh</td>
      <td class="all">61</td>
    </tr>
  </tbody>
</table>

相关问题
最新问题