在搜索输入框上获取焦点时，数据会消失。

我有一个表格，我在其中使用了jquery datatables插件进行列搜索。

HTML代码：

    

        

            
Name
            
Position
            
Office
            
Age
            
Start date
            
Salary
            
Validity
            
Expiry
            
Part Code
            
Part Type
            
Group
        
        

            
Name
            
Position
            
Office
            
Age
            
Start date
            
Salary
            
Validity
            
Expiry
            
Part Code
            
Part Type
            
Group
        
    
    

        

           
{{row.Name}}
           
{{row.Position}}
           
{{row.Office}}
           
{{row.Age}}
           
{{row.Start date}}
           
{{row.Salary}}
           
{{row.Validity}}
           
{{row.Expiry}}
           
{{row.Part Code}}
           
{{row.Part Type}}
           
{{row.Group}}
        
    

我的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('');
                });
                // 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问题还是JavaScript问题。有人可以告诉我为什么我遇到这个问题以及如何解决吗？