DataTables基于带有图标的列进行搜索 [英] DataTables search based on column with icons

问题描述

我正在创建一个带有状态列的数据表。
而且我正在考虑搜索图标的可能性。
因此，如果有人在搜索框中输入open，它应该显示所有带有打开图标的行（时钟一）。

I'm making a datatable with a status column. And I'm looking into making the possibility to search on icons. So if someone types: "open" in the search box, it should show all the rows with the icon "open" (the clock one).

处理这个问题的最佳方法是什么？

What is the best way to deal with this "problem"?

我很乐意听到你们的消息！

I would love to hear from you guys!

使用带有引导主题的数据表。

Using datatables with the bootstrap theme.

状态栏截图

var table = $('.table').DataTable({
  "order": [
    [0, 'asc']
  ],
  "columnDefs": [{
    "visible": false,
    "targets": 0
  }],
  "language": {
    "lengthMenu": "_MENU_ Regels per pagina",
    "zeroRecords": "Niks gevonden",
    "info": "Pagina _PAGE_ van _PAGES_",
    "infoEmpty": "Geen data beschikbaar",
    "infoFiltered": "(gefilterd van _MAX_ totale records)",
    "search": "",
    "paginate": {
      "previous": "Vorige",
      "next": "Volgende"
    }
  },
  "lengthMenu": [
    [10, 25, 50, -1],
    [10, 25, 50, "All"]
  ]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<table class="table dataTable no-footer" style="height: 100px; width: 892px;" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
  <thead class="thead-light">
    <tr role="row">
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 47px;" aria-label="ID: activate to sort column ascending" width="10%">ID</th>
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 314px;" aria-label="Bedrijf: activate to sort column ascending" width="40%">Bedrijf</th>
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 314px;" aria-label="Datum: activate to sort column ascending" width="40%">Datum</th>
      <th scope="col" class="sorting" tabindex="0" aria-controls="DataTables_Table_0" rowspan="1" colspan="1" style="width: 49px;" aria-label="Status: activate to sort column ascending" width="10%">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr class="align-middle regist odd" id="148" role="row">

      <td>148</td>
      <td id="name">h</td>
      <td id="date">2019-01-28 09:42:23</td>
      <td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
    </tr>
    <tr class="align-middle regist even" id="149" role="row">

      <td>149</td>
      <td id="name">g</td>
      <td id="date">2019-01-28 09:46:04</td>
      <td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
    </tr>
    <tr class="align-middle regist odd" id="150" role="row">

      <td>150</td>
      <td id="name">h</td>
      <td id="date">2019-01-28 09:50:29</td>
      <td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
    </tr>
    <tr class="align-middle regist even" id="151" role="row">

      <td>151</td>
      <td id="name">h</td>
      <td id="date">2019-01-28 09:51:23</td>
      <td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
    </tr>
    <tr class="align-middle regist odd" id="152" role="row">

      <td>152</td>
      <td id="name">jk</td>
      <td id="date">2019-01-28 09:52:55</td>
      <td id="status"><i class="fas fa-star text-success" data-toggle="tooltip" data-placement="top" title="" data-original-title="Nieuwe inschrijving!"></i></td>
    </tr>
    <tr class="align-middle regist viewed even" id="139" role="row">

      <td>139</td>
      <td id="name">Kringloop Het Tweedekansje</td>
      <td id="date">2019-01-24 17:31:05</td>
      <td id="status"><i class="fas fa-lock text-warning" data-toggle="tooltip" data-placement="top" title="" data-original-title="Vergrendelde inschrijving"></i></td>
    </tr>
    <tr class="align-middle regist viewed odd" id="140" role="row">

      <td>140</td>
      <td id="name">Service ICT</td>
      <td id="date">2019-01-24 19:37:01</td>
      <td id="status"><i class="far fa-clock text-dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="Open inschrijving"> </i></td>
    </tr>
    <tr class="align-middle regist viewed even" id="146" role="row">

      <td>146</td>
      <td id="name">76</td>
      <td id="date">2019-01-25 09:58:58</td>
      <td id="status"><i class="fas fa-lock text-warning" data-toggle="tooltip" data-placement="top" title="" data-original-title="Vergrendelde inschrijving"></i></td>
    </tr>
    <tr class="align-middle regist viewed odd" id="147" role="row">

      <td>147</td>
      <td id="name">hj</td>
      <td id="date">2019-01-28 09:41:45</td>
      <td id="status"><i class="far fa-clock text-dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="Open inschrijving"> </i></td>
    </tr>
    <tr class="align-middle regist viewed even" id="153" role="row">

      <td>153</td>
      <td id="name">hgjgh</td>
      <td id="date">2019-01-28 09:54:37</td>
      <td id="status"><i class="far fa-clock text-dark" data-toggle="tooltip" data-placement="top" title="" data-original-title="Open inschrijving"> </i></td>
    </tr>
  </tbody>
</table>

推荐答案

td 上的数据过滤或数据搜索属性有助于搜索数据。 doc

data-filter or data-search attributes on td helps to search data. doc

这篇关于DataTables基于带有图标的列进行搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！