Datatables - окно поиска вне таблицы данных

Question

Я использую DataTables ( datatables.net ) и хотел бы, чтобы мое поле поиска находилось вне таблицы (например, в моем div заголовка).

Возможно ли это

Answer 1

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

Ознакомьтесь с документацией API Datatables по этому вопросу.

Пример:

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() ;
})

Answer 2

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

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

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

что является ответом @netbrain.

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

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

Answer 3

Для этого вы можете использовать опцию 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-код, который вы к нему добавляете.

Answer 4

Этот мне помог для DataTables версии 1.10.4, потому что его новый API

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

Answer 5

Более поздние версии имеют другой синтаксис:

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()

Answer 6

Это должно работать для вас: (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();
})

Answer 7

Я хочу добавить еще одну вещь к ответу @ netbrain , если вы используете обработку на стороне сервера (см. Параметр serverSide ).

Регулирование запросов, выполняемое по умолчанию таблицами данных (см. Параметр searchDelay ), не применяется к вызову API .search(). Вы можете получить его обратно, используя $. 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);
});

Answer 8

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

Я перепробовал все опубликованные альтернативы, но без работы, я использовал неправильный способ, но он работал отлично.

Пример поиска

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

код запроса

$('#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();
});

Answer 9

$('#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 .= ')';
}

Answer 10

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

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