Two Search Bars and one Datatable

SPO29

Hello,

I have a question is it possible to set 2 Input Search bars with individual column searching?

    var oTable;


    $(document).ready(function () {

        oTable = $('#footnotelist').dataTable({

            "bJQueryUI": true,
            "bStateSave": true,
            "iDisplayStart": 50,
            "iDisplayLength": 50,
            "aoColumnDefs": [{
                "sType": "numeric",
                "aTargets": [3]
            }],
            "sPaginationType": "full_numbers",
            "sDom": '<"H"Tfr>t<"F"ip>',
            "oTableTools": {
                "sSwfPath": "/images/copy_csv_xls_pdf.swf",

                "aButtons": [
                    "copy", "csv", "xls", "pdf", {
                        "sExtends": "collection",
                        "sButtonText": "Save",
                        "aButtons": ["csv", "xls", "pdf"]
                    }


                ]
            }

        });


        $('#footnotelist thead  th').each(function () {
            var title = $('#footnotelist tfoot th').eq($(this).index()).text();
            $(this).html('');
        });

        $('#footnotelist tfoot  th').each(function () {
            var title = $('#footnotelist tfoot th').eq($(this).index()).text();
            $(this).html('');
        });



SaveState();

        // DataTable
        var table = $('#footnotelist').DataTable();


        table.columns().eq(0).each(function (colIdx) {
            $(this).on('keyup change', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
                    SaveState();
            });



        table.columns().eq(0).each(function (colIdx) {
            $(this).on('keyup change', function () {
                table
                    .column(colIdx)
                    .search(this.value)
                    .draw();
                SaveState();


            });


        });


        // Replace Input with an Button and removes 2 Elements

        $('#headerStart').replaceWith("löschen");
        $('#footerStart').replaceWith("löschen");
        $('#headerEnde').remove();
        $('#footerEnde').remove();
        $('#footnotelist thead input').last().remove();
        $('#footnotelist tfoot input').last().remove();


        // Save State
        function SaveState() {
            var arr = oTable.DataTable.settings[0].aoPreSearchCols;
            var thead = $('#footnotelist thead input');
            var tfoot = $('#footnotelist tfoot input');

                var i = 0;


                $.each(thead, function () {
                    // console.log('not if',value.val());
                    if ($(this).val() === "" || $(this).val() != arr[i].sSearch) {
                        // console.log(thead.val());
                        //  $(this).attr('value', arr[i].value.sSearch);
                        console.log(arr[i].sSearch);
                        $(this).attr('value', arr[i].sSearch);
                    }
                    i++
                });
                var j = 0;
                $.each(tfoot, function () {
                    // console.log('not if',value.val());
                    if ($(this).val() === "" || $(this).val() != arr[j].sSearch) {
                        // console.log(thead.val());
                        //  $(this).attr('value', arr[i].value.sSearch);
                        console.log(arr[j].sSearch);
                        $(this).attr('value', arr[j].sSearch);
                    }
                    j++;
                });
        }

    });

What i want is i want two search bars with input fields the data of both bars have to the same data in the value.