Я використовую DataTables ( datatables.net ), і я хотів би, щоб моє поле пошуку знаходилось поза таблицею (наприклад, у моєму заголовку div).
Чи можливо це?
Я використовую DataTables ( datatables.net ), і я хотів би, щоб моє поле пошуку знаходилось поза таблицею (наприклад, у моєму заголовку div).
Чи можливо це?
Відповіді:
Для фільтрації таблиці можна використовувати 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() ;
})
$(".dataTables_filter :input").focus().val(value).keypress();
щоб keyup
ввести свій вхід близько години, перш ніж це знайти. Ніколи не використовуючи API .. Елегантне рішення!
Відповідно до коментаря @lvkz:
якщо ви використовуєте дані з великим регістром d .DataTable()
(це поверне об’єкт API даних), використовуйте це:
oTable.search($(this).val()).draw() ;
що відповідає @netbrain.
якщо ви використовуєте дані з малими d .dataTable()
(це поверне об’єкт jquery), використовуйте це:
oTable.fnFilter($(this).val());
oTable.fnFilter($(this).val());
Працював і для мене,
.DataTable()
і цей: oTable.fnFilter($(this).val());
коли ви використовуєте .dataTable()
різницю знаходиться у столиці D. Сподіваюся, що це допомагає!
oTable.api().search($(this).val()).draw();
Це може бути корисно, особливо якщо ви також бажаєте керувати ручним керуванням сторінками length
:oTable.api().page.len($(this).val()).draw();
Ви можете використовувати sDom
для цього варіант.
За замовчуванням із пошуковим вводом у власному div:
sDom: '<"search-box"r>lftip'
Якщо ви користуєтесь інтерфейсом jQuery ( bjQueryUI
встановлено true
):
sDom: '<"search-box"r><"H"lf>t<"F"ip>'
Наведене вище покладе input
елемент пошуку / фільтрування у свій власний div
клас з іменем, search-box
який знаходиться поза фактичною таблицею.
Незважаючи на те, що він використовує свій спеціальний стенографічний синтаксис, він фактично може приймати будь-який HTML, який ви кинете на нього.
'<"search-box"r><"H"lf>t<"F"ip>'
не впевнений, чи існує щось гірше
language: { search: "example", searchPlaceholder: "example" }
Ця допомогла мені для DataTables версії 1.10.4, оскільки її новий API
var oTable = $('#myTable').DataTable();
$('#myInputTextField').keyup(function(){
oTable.search( $(this).val() ).draw();
})
Більш недавні версії мають інший синтаксис:
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
Це повинно працювати для вас: (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();
})
У мене була така ж проблема.
Я спробував розмістити всі альтернативи, але жодної роботи не було, я використав спосіб, який не є правильним, але він працював ідеально.
Приклад пошуку введення
<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();
});
Я хочу додати ще одну річ у відповідь @ 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);
});
Ви можете перемістити діл, коли таблиця складається за допомогою 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")); }); },
$('#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 .= ')';
}
Якщо ви використовуєте 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
});