Individual column searching (select inputs) AJAX
Individual column searching (select inputs) AJAX
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hi, i'd want to use dropdown input for sort my table. I used 'initComplete' like in example. But my table result doesn't reload. I fetch data from ajax post. Can you help me and show where is my mistake? Thanks
` $(document).ready(function() {
var val=''
var exampleDataTable = $('#example').DataTable({
responsive: true,
colReorder: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
'colvis'
],
language: {
buttons: {
colvis: 'Отображение столбцов'
},
"processing": "Подождите...",
"search": "Поиск:",
"lengthMenu": " MENU ",
"info": "Показано с START до END записей из TOTAL",
"infoEmpty": "Записи с 0 до 0 из 0 записей",
"infoFiltered": "(отфильтровано из MAX записей)",
"infoPostFix": "",
"loadingRecords": "Загрузка записей...",
"zeroRecords": "Записи отсутствуют.",
"emptyTable": "В таблице отсутствуют данные",
"paginate": {
"first": "Первая",
"previous": "<",
"next": ">",
"last": "Последняя"
},
"aria": {
"sortAscending": ": активировать для сортировки столбца по возрастанию",
"sortDescending": ": активировать для сортировки столбца по убыванию"
}
},
"iDisplayLength": 10,
"aLengthMenu": [[ 3, 10, 20, 50, 100 ,-1],[ 3, 10,20,50,100,"все"]],
stateSave: true,
"fnCreatedRow": function(nRow, aData, iDataIndex) {
$(nRow).attr('id', aData[0]);
},
'serverSide': 'true',
'processing': 'true',
'paging': 'true',
'order': [],
'ajax': {
'url': 'https://test.farvater.cloud/wp-content/plugins/wpdbfarvater-licenses/fetch_data.php',
'type': 'post',
'data': {
from_attr_1_l: from_attr_1_l,
from_attr_2_l: from_attr_2_l,
val: val
},
},
"columns": [
{ "data": "0"},
{ "data": "1"},
{ "data": "2"},
{ "data": "3"},
{ "data": "4"},
{ "data": "5"},
{ "data": "6"},
{ "data": "7"},
{ "data": "8"},
{ "data": "9"},
{ "data": "10" },
{ "data": "11" },
{ "data": "12" },
{ "data": "13" },
{ "data": "14" },
{ "data": "15" },
{ "data": "16" },
{ "data": "17" }
],
initComplete: function () {
this.api()
.columns()
.every(function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo($(column.footer()).empty())
.on('change', function () {
val = $.fn.dataTable.util.escapeRegex($(this).val());
console.log(val);
column.search(val ? '^' + val + '$' : '', true, false).draw();
});
column
.data()
.unique()
.sort()
.each(function (d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
});
},
});
});`
Answers
A link to a test case would be more helpful.
https://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read#latest