使用 Angular JS 的数据表插件答案

【问题标题】：Data Table plugin using Angular JS使用 Angular JS 的数据表插件
【发布时间】：2017-01-30 13:18:39
【问题描述】：

我正在尝试创建一个与带有单个搜索框的 jQuery 数据表插件相同的数据表插件。我使用 ngTable 的数据表插件代码没有显示任何数据，控制台上也没有错误。请帮忙。这是我的代码：

<html>
<head>
<title>Insert title here</title>
<script src="js/angular.min.js"></script>
<link rel="stylesheet" href="js/ng-table.min.css">
<script src="js/ng-table.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="dataTable">
<input type="text" ng-model="searchUser">
<table ng-table="vm.tableParams" class="table">
<tr ng-repeat="user in $data">
    <td title="'Name'"  sortable="'name'">
        {{user.name}}</td>
    <td title="'Age'" sortable="'age'">
        {{user.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
angular.module("myApp",["ngTable"])   .controller('dataTable',function(NgTableParams,$scope,$filter){
 var self = this;
 var data = [{name: "Moroni", age: 50},
     {name: "Simon", age: 43},
     {name: "Jacob", age: 27},
     {name: "Nephi", age: 29},
     {name: "Christian", age: 34},
     {name: "Tiancum", age: 43},
     {name: "Jacob", age: 27}
 ];
 self.tableParams = new NgTableParams({ count: 5}, { counts: [5, 10, 25],dataset: data});
 var usersData =  []; // initial data

 self.tableParams = new NgTableParams({
     page: 1,           
     count: 5
 }, {
 counts : [5, 10, 25],          
 getData: function($defer, params) {
     var searchedData = searchData();
     params.total(searchedData.length);
     $scope.users = searchedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
     $defer.resolve($scope.users);                           
 },
 $scope: { $data: {} }
});


    $scope.$watch("searchUser", function () {
     self.tableParams.reload();
    });

    var searchData = function(){
     if($scope.searchUser)
        return $filter('filter')(usersData,$scope.searchUser);
     return usersData;
    }; 
});
</script>
</body>
</html>

【问题讨论】：

标签： angularjs angularjs-ng-repeat ngtable

【解决方案1】：

看看这个

<html>
<head>
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="dataTable">
<input type="text" ng-model="searchUser">
<table ng-table="vm.tableParams" class="table">
<tr ng-repeat="user in data">
    <td title="'Name'"  sortable="'name'">
        {{user.name}}</td>
    <td title="'Age'" sortable="'age'">
        {{user.age}}</td>
</tr>
</table>
</div>
<script type="text/javascript">
angular.module("myApp",["ngTable"])   .controller('dataTable',function(NgTableParams,$scope,$filter){
 var self = this;
    $scope.data = [{name: "Moroni", age: 50},
     {name: "Simon", age: 43},
     {name: "Jacob", age: 27},
     {name: "Nephi", age: 29},
     {name: "Christian", age: 34},
     {name: "Tiancum", age: 43},
     {name: "Jacob", age: 27}
 ];
 self.tableParams = new NgTableParams({ count: 5}, { counts: [5, 10, 25],dataset: $scope.data});
 var usersData =  []; // initial data

 self.tableParams = new NgTableParams({
     page: 1,           
     count: 5
 }, {
 counts : [5, 10, 25],          
 getData: function($defer, params) {
     var searchedData = searchData();

     if (params) {
        params.total(searchedData.length);
        $scope.users = searchedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
        $defer.resolve($scope.users);
    }
                                
 },
 $scope: { $data: {} }
});


    $scope.$watch("searchUser", function () {
     self.tableParams.reload();
    });

    var searchData = function(){
     if($scope.searchUser)
        console.log($scope.searchUser);
        return $filter('filter')(usersData,$scope.searchUser);
     return usersData;
    }; 
});
</script>
</body>
</html>

【讨论】：

它正在加载数据，但如果我向数据中添加超过 10 条记录，则分页不起作用

【解决方案2】：

以下代码使用 init() 对我来说效果很好。

<html>
<head>
<title>Insert title here</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/1.0.0/ng-table.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="introController">
<br>
Search: <input type="text" ng-model="searchUser"/>
<table ng-table="tableParams" class="table table-striped">
<tr ng-repeat="user in $data">
    <td title="'Name'"  sortable="'name'">
        {{user.name}}</td>
    <td title="'Age'"  sortable="'age'">
        {{user.age}}</td>
     <td title="'Company'"  sortable="'company'">
        {{user.company}}</td>
</tr>
</table>
</div>
</div>
<script type="text/javascript">
var app=angular.module("myApp", ["ngTable"]);
app.controller('introController',function(NgTableParams,$scope,$filter){
 $scope.data = [{name: "Moroni", age: 50,company:"ABC"},
     {name: "Simon", age: 43,company:"ABC"},
     {name: "Jacob", age: 27,company:"ABC"},
     {name: "Nephi", age: 29,company:"ABC"},
     {name: "Christian", age: 34,company:"ABC"},
     {name: "Tiancum", age: 43,company:"ABC"},
     {name: "Jacob", age: 27,company:"ABC"}];

 var tempData=$scope.data;

 init();
 function init() {
        $scope.flag=false;
         $scope.tableParams = new NgTableParams({
             page: 1,
             count: 10,
             filter: {
                 message: ''
             },
             sorting: {
                 timestamp: 'asc'
             }
         },{
             getData: function ($defer, params) {

                 if(params)
                     {
                        var orderedData = params.sorting() ?
                        $filter('orderBy')($scope.data, params.orderBy()) : $scope.data;
                        params.total(orderedData.length);
                        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                     }             
             }
        });
  };
 $scope.tableParams = new NgTableParams({ count: 5}, { counts: [5, 10, 25], dataset: $scope.data});

 //search filter code
var searchData = function(){
    if($scope.searchUser)
        return $filter('filter')(tempData,$scope.searchUser);
    return tempData;
 };      
 $scope.$watch("searchUser", function (newValue,oldValue) { 
    if (oldValue !== undefined) {  
            var filterData=searchData();
            $scope.tableParams = new NgTableParams({ count: 10}, { counts: [5, 10, 25,100,1000], dataset:filterData}); 
        } 
 });
 });
</script>
</body>
</html>

【讨论】：