数据表基于带有图标的列进行搜索

时间:2019-01-28 09:16:44

标签: javascript php jquery html datatables

我正在用状态列制作数据表。 而且我正在寻找可能搜索图标的可能性。 因此,如果有人在搜索框中键入:“打开”,则应显示带有“打开”图标(时钟为一号)的所有行。

处理此“问题”的最佳方法是什么?

我希望收到你们的来信!

使用具有bootstrap主题的数据表。

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

1 个答案:

答案 0 :(得分:5)

data-filter or data-search上的

td属性有助于搜索数据。 doc