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 = '<a href="@Url.Action("Popraw", "KoloryTowarow")/' + rowData[0] + '" class="btn btn-primary btn-sm "><i class="fa fa-pencil" aria-hidden="true"></i> Edytuj</a>';
                            var removeLink = '<a href="#" class="btn btn-danger btn-sm removeRow margin-top-right-5"><i class="fa fa-trash" aria-hidden="true"></i>  Usun</a>';
                            var infoLink = '<span clas="data-toggle="popover" title="Utworzyl: ' + rowData[3] + ' - ' + rowData[2] + '
Zmodyfikowal: ' + rowData[4] + ' - ' + rowData[5] + '
Usunal: ' + rowData[6] + ' - ' + rowData[7] + '"><a href="#" class="fa fa-info-circle fa-fw" style="font-size:24px; vertical-align: -5px"></a></span>';
                            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 ?