Custom Button filter Using Jquery DataTable problem

Question

Hi everyone!

I have a problem with some filter. I want to make a button, with allowing me filtering a DataTable. For example:

Bialy = White

I click the button 'Bialy' and DataTables showing me rows contains color 'Bialy'.

JQuery DataTables code

$(document).ready(function () {
var dataTableUrl = '@Url.Action("GetToDatatable", "KoloryTowarow")';
var removeUrl = '@Url.Action("Usun", "KoloryTowarow")';
var table = $("#towarKolorDataTable").dataTable({
"sAjaxSource": dataTableUrl,
"order": [[1, "desc"]],
"columnDefs": [
{
'data': -1,
'orderData': -1,
'defaultContent': '',
'className': 'control',
'orderable': false,
'targets': 0
},
{
"targets": 1,
"data": 1,
'orderData': 1,
"render": function (data, type, rowData) {
return data;
}
},
{
"targets": 2,
"data": 0,
'orderData': 0,
"sortable": false,
"width": "16%",
"render": function (data, type, rowData) {
var result = "";
var editLink = ' + rowData[0] + '" class="btn btn-primary btn-sm "> Edytuj';
var removeLink = ' Usun';
var infoLink = ' + rowData[3] + ' - ' + rowData[2] + '
Zmodyfikowal: ' + rowData[4] + ' - ' + rowData[5] + '
Usunal: ' + rowData[6] + ' - ' + rowData[7] + '">#" class="fa fa-info-circle fa-fw" style="font-size:24px; vertical-align: -5px">';
result += infoLink + editLink + removeLink;
return result;
}
}
],
"fnCreatedRow": function (row, data, dataIndex) {
bindActionsDataTable(row, data);
},
"pageLength": 50,
"lengthMenu": [[50, 100, -1], [50, 100, "Wszystkie"]],
"paginate": true,
"lengthChange": true,
"sortClasses": false,
"dom": "Bfrtip", //"lftipr",
"processing": true,
"responsive": true,
"serverSide": true,
"searching": true,
"serverData": function (url, data, callback) {
$.ajax({
"url": url,
"data": data,
"success": callback,
"contentType": "application/x-www-form-urlencoded; charset=utf-8",
"dataType": "json",
"type": "POST",
"cache": false,
"error": function () {
console.log("DataTables warning: JSON data from server failed to load or be parsed. " +
"This is most likely to be caused by a JSON formatting error.");
}
});
},
buttons: [
{
text: 'Bialy',
action: function (e, dt, node, config) {
$.fn.dataTable.ext.search.push(
function (settings, searchData, index, rowData, counter) {
return searchData[1] == "Bialy";
}
)
table.draw();
$.fn.dataTable.ext.search.pop();
}
}
],
"language": {
"lengthMenu": "Wyswietl _MENU_ wyników na stronie",
"zeroRecords": "Niestety, nic nie znaleziono",
"info": "Strona _PAGE_ z _PAGES_",
"loadingRecords": "Ladowanie ...",
"processing": "Ladowanie ...",
"infoEmpty": "Brak rekordów",
"infoFiltered": "(przefiltrowano _MAX_ rekordów)",
"search": "Szukaj:",
"paginate": {
"first": "Pierwsza",
"last": "Ostatnia",
"next": "Nastepna",
"previous": "Poprzednia"
},
}
});

I'm confused, why it's not working. Probably problem is with

buttons: [
{
text: 'Bialy',
action: function (e, dt, node, config) {
$.fn.dataTable.ext.search.push(
function (settings, searchData, index, rowData, counter) {
return searchData[1] == "Bialy";
}
)
table.draw();
$.fn.dataTable.ext.search.pop();
}
}
],

Someone can help me ?

Laxmidhar Sahoo · Answer

"text/javascript" >       $(document).ready( function (){           $( "#btnid" ).click( function  () {                            //code               });       });

Ramesh Palanivel · Answer

Hi Michal,   Try this code in your button clicke event and post the value in ajax server side data posting,   $('#yourdatatableid').DataTable().ajax.reload(null, false);