Datatables - поле пошуку за межами даних


Відповіді:


240

Для фільтрації таблиці можна використовувати api DataTables. Отже, все, що вам потрібно, це ваше власне поле введення з подією клавіші, яка запускає функцію фільтра в DataTables. За допомогою css або jquery можна приховати / видалити наявне поле для введення пошуку. А може бути, DataTables має налаштування видалити / не включити його.

Ознайомтеся з цим документацією API API даних.

Приклад:

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})

8
Ви обов'язково повинні використовувати .keyup замість .keypress, інакше у вас виникне затримка результатів
Sævar

1
Я поспілкувався із тим, $(".dataTables_filter :input").focus().val(value).keypress();щоб keyupввести свій вхід близько години, перш ніж це знайти. Ніколи не використовуючи API .. Елегантне рішення!
MattSizzle

3
JS потрібно змінити на використання .search ($ (this) .val ()) .draw () замість fnFilter. Дивіться: datatables.net/manual/api#Chaining Я змінив цю відповідь, щоб виправити її, але, здається, її потрібно попередньо перевірити.
Шейн Грант

13
Зауваження: Вам все одно знадобиться опція "search: true", і тоді ви, ймовірно, хочете приховати поле пошуку за замовчуванням, тому просто встановіть параметр sDOM на нуль.
удар

8
Миттєве активування $ (). DataTable () з малим "d" поверне об'єкт jQuery, а не екземпляр API DataTables. Останнього можна досягти, викликавши "oTable = $ ('# myTable'). DataTable ();" з великою літерою "D". Це потрібно, щоб мати можливість викликати на нього .search (якщо в іншому випадку буде виведена помилка "невизначена функція"). Дивіться: datatables.net/faqs/#api
Ліонель

34

Відповідно до коментаря @lvkz:

якщо ви використовуєте дані з великим регістром d .DataTable()(це поверне об’єкт API даних), використовуйте це:

 oTable.search($(this).val()).draw() ;

що відповідає @netbrain.

якщо ви використовуєте дані з малими d .dataTable()(це поверне об’єкт jquery), використовуйте це:

 oTable.fnFilter($(this).val());

4
oTable.fnFilter($(this).val());Працював і для мене,
shabeer90

10
Обидва способи дійсні, залежно від того, як ви викликаєте таблицю даних: `oTable.search ($ (this) .val ()). Draw ();` ви використовуєте, коли ви її викликаєте: .DataTable()і цей: oTable.fnFilter($(this).val());коли ви використовуєте .dataTable() різницю знаходиться у столиці D. Сподіваюся, що це допомагає!
Lvkz

Дає помилку "oTable.fnFilter - це не функція" для даних, версія 1.10.5
Еге Байрак

Щойно зрозуміло, що за допомогою jQuery ви також можете отримати доступ до API баз даних таким чином: oTable.api().search($(this).val()).draw();Це може бути корисно, особливо якщо ви також бажаєте керувати ручним керуванням сторінками length:oTable.api().page.len($(this).val()).draw();
Ghis

15

Ви можете використовувати sDomдля цього варіант.

За замовчуванням із пошуковим вводом у власному div:

sDom: '<"search-box"r>lftip'

Якщо ви користуєтесь інтерфейсом jQuery ( bjQueryUIвстановлено true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

Наведене вище покладе inputелемент пошуку / фільтрування у свій власний divклас з іменем, search-boxякий знаходиться поза фактичною таблицею.

Незважаючи на те, що він використовує свій спеціальний стенографічний синтаксис, він фактично може приймати будь-який HTML, який ви кинете на нього.


@Marcus: насправді я вважаю, що sDom не дуже елегантний у використанні, відкладіть факт, що ми не можемо повністю налаштувати поле пошуку (у цьому полі є текст жорсткого коду "Пошук").
Hoàng Long

але все-таки всередині div.datatables_Wrapper, будь-який спосіб перенести його і поза ним?
Artur79

@ Artur79 На жаль, ні. Принаймні, не зламавши джерело даних.
mekwall

2
<333 цей синтаксис '<"search-box"r><"H"lf>t<"F"ip>'не впевнений, чи існує щось гірше
Крістіан Е.

@ HoàngLong ви фактично можете налаштувати поле пошуку за допомогою таких опцій:language: { search: "example", searchPlaceholder: "example" }
Flimm

8

Ця допомогла мені для DataTables версії 1.10.4, оскільки її новий API

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})

Зверніть увагу на велику "D" "var oTable = $ ('# myTable'). DataTable ();" ( datatables.net/faqs/#api )
Ліонель

6

Більш недавні версії мають інший синтаксис:

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

Зауважте, що цей приклад використовує змінну, tableпризначену під час першої ініціалізації даних. Якщо у вас немає цієї змінної, просто використовуйте:

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

З моменту: Таблиці даних 1.10

- Джерело: https://datatables.net/reference/api/search ()


4

Це повинно працювати для вас: (DataTables 1.10.7)

oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

або

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})

4

У мене була така ж проблема.

Я спробував розмістити всі альтернативи, але жодної роботи не було, я використав спосіб, який не є правильним, але він працював ідеально.

Приклад пошуку введення

<input id="serachInput" type="text"> 

код jquery

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#serachInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});

4

Я хочу додати ще одну річ у відповідь @ netbrain, що стосується випадку, якщо ви використовуєте обробку на стороні сервера (див. ServerSide ).

Запит дросселирование за замовчуванням виконується з допомогою DataTables (див searchDelay варіанту) не застосовується до .search()виклику API. Ви можете отримати його назад, використовуючи $ .fn.dataTable.util.throttle () наступним чином:

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});

1

Ви можете перемістити діл, коли таблиця складається за допомогою fnDrawCallbackфункції.

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});

Або якщо ви використовуєте більш нову версію даних, у вас буде:"drawCallback": function (settings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); },
Даніель Дудас

1
$('#example').DataTable({
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "../admin/ajax/loadtransajax.php",
   "fnServerParams": function (aoData) {
        // Initialize your variables here
        // I have assign the textbox value for "text_min_val"
        var min_val = $("#min").val();  //push to the aoData
        aoData.push({name: "text_min_val", value:min_val});
   },
   "fnCreatedRow": function (nRow, aData, iDataIndex) {
       $(nRow).attr('id', 'tr_' + aData[0]);
       $(nRow).attr('name', 'tr_' + aData[0]);
       $(nRow).attr('min', 'tr_' + aData[0]); 
       $(nRow).attr('max', 'tr_' + aData[0]); 
   }
});

У loadtransajax.phpвас може отримати значення набувають:

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}

0

Якщо ви використовуєте JQuery dataTable, тому вам потрібно просто додати "bFilter":true. Це покаже вікно пошуку за замовчуванням поза таблицею, і воно працює динамічно

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });    

Питання полягало у зміні позиції динамічно створеного. Поклавши її поза столом
MC
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.