Объекты DataTable - окно поиска за пределами объекта DataTable

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

это возможно ?

11 89
jquery search filtering datatables

11 ответов:

вы можете использовать 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() ;
})
182

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

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

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

который является @ netbrain ответ.

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

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

можно использовать 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, который вы бросаете на нее.

14

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

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

более поздние версии имеют различный синтаксис:

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

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

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

регулирование запросов выполняется по умолчанию с помощью таблиц данных (см. searchDelay) не относится к .search() вызов API. Вы можете получить его обратно с помощью $.сноска.объект DataTable.утиль.дроссель() следующим образом:

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

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

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 .= ')';
}
1

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

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

пример ввода поиска

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

Если вы используете jQuery dataTable, поэтому вам нужно просто добавить "bFilter":true. Это отобразит поле поиска по умолчанию вне таблицы и его работы dynamically..as за ожидаемое 

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