Datatables - поле поиска вне datatable


Ответы:


240

Вы можете использовать API DataTables для фильтрации таблицы. Итак, все, что вам нужно, это ваше собственное поле ввода с событием keyup, которое запускает функцию фильтрации для DataTables. С помощью css или jquery вы можете скрыть / удалить существующее поле ввода поиска. Или, может быть, в DataTables есть параметр, чтобы удалить / не включать его.

Ознакомьтесь с документацией Datatables 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, иначе вы столкнетесь с задержкой в ​​результатах
Svar

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 значение null.
Bang

8
Создание экземпляра $ (). DataTable () с маленькой буквой «d» вернет объект jQuery, а не экземпляр DataTables API. Последнее может быть достигнуто путем вызова «oTable = $ ('# myTable'). DataTable ();» с большой буквы "Д". Это необходимо для того, чтобы иметь возможность вызывать .search на нем (в противном случае будет выдана ошибка "function undefined"). См .: datatables.net/faqs/#api
Лайонел,

34

Согласно комментарию @lvkz:

если вы используете datatable с заглавной буквой d .DataTable()(это вернет объект API Datatable), используйте это:

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

это ответ @netbrain.

если вы используете datatable с нижним регистром d .dataTable()(это вернет объект jquery), используйте это:

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

4
oTable.fnFilter($(this).val());
Сработал и

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

Выдает ошибку «oTable.fnFilter is not a function» для datatables версии 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 UI ( 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 К сожалению, нет. По крайней мере, не без взлома источника Datatables.
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();
});

Начиная с: DataTables 1.10

- Источник: https://datatables.net/reference/api/search ()


4

Это должно сработать для вас: (Таблицы данных 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

Вы можете перемещать div, когда таблица рисуется с помощью fnDrawCallbackфункции.

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

Или, если вы используете более новую версию datatable, у вас будет:"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вы можете получить значение get:

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.