Плагин таблицы данных с использованием Angular JS

Я пытаюсь создать плагин с данными, который отражает то же, что и плагин jQuery datatable с единственным полем поиска. Код плагина My Data table с помощью ngTable не отображает никаких данных, и там также нет ошибок на консоли. Пожалуйста помоги. Вот мой код:Плагин таблицы данных с использованием Angular JS

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

источник

2017-01-30 codewriter

После код отлично работает для меня с помощью 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>

источник

2017-02-10 11:42:00 codewriter

Посмотрите на этот

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

источник

2017-01-30 14:01:32

Его данные по загрузке, но разбиение на страницы не работает, если я добавляю более 10 записей к данным – codewriter

Плагин таблицы данных с использованием Angular JS

ответ

Смежные вопросы