Individual column searching (select inputs) AJAX

Individual column searching (select inputs) AJAX

IraWIraW Posts: 1Questions: 1Answers: 0

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

Sign In or Register to comment.