基于带有图标的列的 DataTables 搜索 [关闭]

Posted 2023-02-24

【中文标题】基于带有图标的列的 DataTables 搜索 [关闭]

【英文标题】：DataTables search based on column with icons [closed]

【发布时间】：2019-06-21 06:17:39

【问题描述】：

我正在制作一个带有状态列的数据表。 我正在研究是否可以搜索图标。 因此，如果有人在搜索框中键入：“open”，它应该显示所有带有“open”图标的行（时钟之一）。

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

我很想听听你们的意见！

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

Status Column Screenshot

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" >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" >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" >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" >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>

【问题讨论】：

请贴出代码

@SunilGehlot 添加

【参考方案1】：

td 上的data-filter or data-search 属性有助于搜索数据。 doc