使用AngularJS的数据表插件_Angularjs_Angularjs Ng Repeat_Ngtable

使用AngularJS的数据表插件

angularjs

使用AngularJS的数据表插件,angularjs,angularjs-ng-repeat,ngtable,Angularjs,Angularjs Ng Repeat,Ngtable,我正在尝试创建一个datatable插件，该插件与带有单个搜索框的jQuery datatable插件相同。使用ngTable的我的数据表插件代码并没有显示任何数据，控制台上也并没有错误。请帮忙。这是我的密码： <html> <head> <title>Insert title here</title> <script src="js/angular.min.js"></script> <link rel="style

我正在尝试创建一个datatable插件，该插件与带有单个搜索框的jQuery datatable插件相同。使用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>

调查这件事

在此处插入标题 {{user.name} {{user.age} angular.modulemyApp[ngTable].controller'dataTable'，functionNgTableParams，$scope，$filter{ var self=这个； $scope.data=[{姓名：莫罗尼，年龄：50}， {姓名：西蒙，年龄：43}， {姓名：雅各布，年龄：27}， {姓名：尼菲，年龄：29}， {姓名：克里斯蒂安，年龄：34}， {姓名：Tiancum，年龄：43}， {姓名：雅各布，年龄：27} ]; self.tableParams=newngtableparams{count:5}，{counts:[5,10,25]，dataset:$scope.data}； var usersData=[]；//初始数据 self.tableParams=新的NgTableParams{ 页码：1，计数：5 }, { 计数：[5,10,25]， getData:函数$defer，参数{ var searchedData=搜索数据；如果参数{ 参数totalsearchedData.length； $scope.users=searchedData.sliceparams.page-1*params.count，params.page*params.count； $defer.resolve$scope.users； } }, $scope:{$data:{} }; $scope.$watchsearchUser，函数{ self.tableParams.reload； }; var searchData=函数{ 如果$scope.searchUser console.log$scope.searchUser；返回$filter'filter'usersData，$scope.searchUser；返回用户数据； }; };

下面的代码对我使用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>

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