Data Disappearing on onfocus to search input

Question

I have a table in which I applied jquery datatables plugin for columnwise searching. Html Code:-

<table id="example" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Validity</th>
            <th>Expiry</th>
            <th>Part Code</th>
            <th>Part Type</th>
            <th>Group</th>
        </tr>
        <tr id="filterrow">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Validity</th>
            <th>Expiry</th>
            <th>Part Code</th>
            <th>Part Type</th>
            <th>Group</th>
        </tr>
    </thead>
    <tbody>
        <tr dir-paginate="row in sample>
           <td>{{row.Name}}</td>
           <td>{{row.Position}}</td>
           <td>{{row.Office}}</td>
           <td>{{row.Age}}</td>
           <td>{{row.Start date}}</td>
           <td>{{row.Salary}}</td>
           <td>{{row.Validity}}</td>
           <td>{{row.Expiry}}</td>
           <td>{{row.Part Code}}</td>
           <td>{{row.Part Type}}</td>
           <td>{{row.Group}}</td>
        </tr>
    </tbody>
</table>

My javascript Code:

  (function() {
    angular.module('myApp.components')
        .directive('filter', filter);
    filter.$inject = ['$http', '$timeout'];

    function filter($http, $timeout) {
        return {
            restrict: 'E',
            scope: {
            },
            link: function(scope, el, attrs) {
                scope.sample = [];
                $('#example thead tr#filterrow th').each(function() {
                    var title = $('#example thead th').eq($(this).index()).text();
                    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
                });
                // DataTable
                var table = $('#example').DataTable({
                    "bPaginate": false,
                    "bInfo": false
                });
                table.columns().eq(0).each(function(colIdx) {
                    $('input', table.column(colIdx).header()).on('keyup change', function() {
                        table.column(colIdx)
                            .search(this.value)
                            .draw();
                    });
                });
            },
            templateUrl: 'js/components/folder/filter.html'
        };
    }
 })();

The data in sample is coming through server through api. What my problem is the search input in each column works well when I add temporary data.But when the server data or Json is added, on clicking the textboxes the data disappears i.e., on getting focus to the column search inputs my data disappears.I dont know if it is a css problem or javascipt problem. Can anyone tell me why I am facing this issue anh how to solve it?

You should try to aovid using jquery in angular, in the link function, you have access to "el" which is the html element, so selecting instead of selecting HTML element with jquery and attaching event to them, you should set up watch or using native Angular, for instance have a look at this question: http://stackoverflow.com/questions/11264188/how-can-i-detect-onkeyup-in-angularjs — Tonio, Feb 22 '17 at 11:16

Data Disappearing on onfocus to search input

0 Answers0