how to add filters to each columns for datatables

Question

I'm using jquery and used datatable library.

I created my datatable like this:

      $datatable = $('#datatable-buttons').DataTable({
            keys: true, searching: false, "paging": false, "info": false,
            buttons: [
                {
                    extend: 'copyHtml5',
                    text: '<i class="fa fa-files-o"></i>',
                    titleAttr: 'Copy'
                },
                {
                    extend: 'excelHtml5',
                    text: '<i class="fa fa-file-excel-o"></i>',
                    titleAttr: 'Excel'
                },
                {
                    extend: 'csvHtml5',
                    text: '<i class="fa fa-file-text-o"></i>',
                    titleAttr: 'CSV'
                }
            ],
            orderCellsTop: true,
            fixedHeader: true,
            initComplete: function () {
                var api = this.api();

                // For each column
                api
                    .columns()
                    .eq(0)
                    .each(function (colIdx) {
                        // Set the header cell to contain the input element
                        var cell = $('.filters th').eq(
                            $(api.column(colIdx).header()).index()
                        );
                        var title = $(cell).text();
                        $(cell).html('<input type="text" placeholder="' + title + '" />');

                        // On every keypress in this input
                        $(
                            'input',
                            $('.filters th').eq($(api.column(colIdx).header()).index())
                        )
                            .off('keyup change')
                            .on('keyup change', function (e) {
                                e.stopPropagation();

                                // Get the search value
                                $(this).attr('title', $(this).val());
                                var regexr = '({search})'; //$(this).parents('th').find('select').val();

                                var cursorPosition = this.selectionStart;
                                // Search the column for that value
                                api
                                    .column(colIdx)
                                    .search(
                                        this.value != ''
                                            ? regexr.replace('{search}', '(((' + this.value + ')))')
                                            : '',
                                        this.value != '',
                                        this.value == ''
                                    )
                                    .draw();

                                $(this)
                                    .focus()[0]
                                    .setSelectionRange(cursorPosition, cursorPosition);
                            });
                    });
            }
        });

I have a submit button to get data from my server and draw data to datatable:

    function refreshDataTable(result) {

        rowDataTable = PER_PAG * (CURRENT_PAGE - 1)
        var rows = []

        result.forEach((item => {

            ++rowDataTable

            var data = [rowDataTable, item.order_id, "item.shipping.mobile", item.shipping.first_name, item.shipping.last_name, item.shipping.state, item.shipping.city, item.shipping.address, item.shipping.title, item.shipping.cost, item.shipping.delivery_time]
            console.log("data",data)
            rows.push(data)
        }))

        $datatable.rows.add(rows).draw();

    }

it shows some inputs above each columns. but when I typing some texts it doesn't to filter my rows.