Search is not working as expected in jQuery DataTables

aatish

I am getting unexpected search results when querying my database with JQuery. I have a user details mini popup in the first column. That column search is not working.

If I enter a first character, for example y, then the data-tables is not giving back a result.
When I enter a second character after the y, for instance yo, then the data-tables return a result.

I do not understand why this problem is arising. Here is the code:
``` $(document)
.ready(
function() {
$('#table_id').DataTable({
"order" : [ [ 0, "desc" ] ],
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ 3, 4, 6,7 ]
} ]
});

                $('#table_id tfoot th')
                        .each(
                                function() {
                                    var title = $('#table_id thead th')
                                            .eq($(this).index()).text();
                                    if (title == 'First Name'
                                            || title == 'Last Name'
                                            || title == 'Pending Positions'
                                            || title == 'Approved Positions'
                                            || title == 'Email Address'
                                            || title == 'Company'){
                                        $(this)
                                                .html(
                                                        '<input type="text" id="text'+$(this).index()+'" placeholder="Search '+title+'" />');
                                    }
                                });
                // DataTable
                var table = $('#table_id').DataTable();
                // Apply the search
                table
                        .columns()
                        .eq(0)
                        .each(
                                function(colIdx) {
                                    $(
                                            'input',
                                            table.column(colIdx)
                                                    .footer())
                                            .on(
                                                    'keyup',
                                                    function() {
                                                        table
                                                                .column(colIdx)
                                                                .search(this.value)
                                                                .draw();

                                                    });
                                });

            });```

And the "i" icon is coming from here` 13 May 2011

                                                  ```<div style="position:absolute; left: 15px;   top: 50%;  margin-top: -10px;">

                                        <a th:attr="id='hoverId'+${allTechnicians.userId}"
                                            class="glyphicon glyphicon-info-sign display"
                                            data-toggle="popover" rel="popover">
                                        </a>
                                        <script>
                                            $('.glyphicon-info-sign').popover({"trigger": "toggle", "html":"true"});

                                        </script>```