TransWikia.com

Как реализовать поиск по колонке таблицы DataTables

Stack Overflow на русском Asked on November 20, 2020

Есть таблица, построенная на DataTables, и в ней нужно сделать поиск по колонке что-то наподобие этого введите сюда описание изображения

One Answer

Мне стало интересно что это за "DataTables" и погуглил, нашел вот это:

$("#example").dataTable({	
		
  "aaData":[
    ["htmlhook.ru","https://htmlhook.ru/","Блог","2013-10-15 10:30:00"],
    ["Новый путь","http://www.phppath.ru/","Блог","2013-09-15 09:20:00"],
    ["Портал UA","http://pixelcom.at.ua/","Интернет магазин","null"],
  ],
  "aoColumnDefs":[{
        "sTitle":"Название сайта"
      , "aTargets": [ "site_name" ]
  },{
        "aTargets": [ 1 ]
      , "bSortable": false
      , "mRender": function ( url, type, full )  {
          return  '<a href="'+url+'">' + url + '</a>';
      }
  },{
        "aTargets":[ 3 ]
      , "sType": "date"
      , "mRender": function(date, type, full) {
          return (full[2] == "Блог")
                    ? new Date(date).toDateString()
                    : "N/A" ;
      }
  }],
  
   language: {
      "processing": "Подождите...",
      "search": "Поиск:",
      "lengthMenu": "Показать _MENU_ записей",
      "info": "Записи с _START_ до _END_ из _TOTAL_ записей",
      "infoEmpty": "Записи с 0 до 0 из 0 записей",
      "infoFiltered": "(отфильтровано из _MAX_ записей)",
      "infoPostFix": "",
      "loadingRecords": "Загрузка записей...",
      "zeroRecords": "Записи отсутствуют.",
      "emptyTable": "В таблице отсутствуют данные",
      "paginate": {
        "first": "Первая",
        "previous": "Предыдущая",
        "next": "Следующая",
        "last": "Последняя"
      },
      "aria": {
        "sortAscending": ": активировать для сортировки столбца по возрастанию",
        "sortDescending": ": активировать для сортировки столбца по убыванию"
      }
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<table id="example">
  <thead>
    <tr>
        <th class="site_name">Название</th>
        <th>Адрес</th>
        <th>Тип</th>
        <th>Последние изменения</th>
    </tr>
  </thead>
</table>

Нашел вот тут

Answered by Boroda95 on November 20, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP