数据消失在onfocus上以搜索输入

Question

我有一个表，我在其中应用了jquery datatables插件进行列式搜索。 Html代码： -

<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>

我的javascript代码：

  (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'
        };
    }
 })();

sample中的数据通过api通过服务器传出。当我添加临时数据时，我的问题是每列中的搜索输入效果很好。但是当添加服务器数据或Json时，在单击文本框时数据会消失，即，在获得焦点到列搜索输入时，我的数据会消失。不知道这是一个CSS问题还是javascipt问题。谁能告诉我为什么我要面对这个问题以及如何解决它？