データジェネレータで角度jを使用するページングを追加する方法

** jquery Datatableプラグインで角度jを使用してページ番号を追加する方法。いくつかの外部プラグインは、ページングを直接許可する角度jsデータテーブルのように使用できますが、私は内側のjqueryデータテーブルを作成したいと思います。 **データジェネレータで角度jを使用するページングを追加する方法

var app= angular.module("myModule",['ui-bootstrap']); 
 

 
app.controller("dataController",function($scope,$http){ 
 

 
$http({ 
 
    method: 'GET', 
 
    url: 'https://api.myjson.com/bins/833qv' 
 
}).then(function successCallback(response) { 
 
\t $scope.employees=response.data; 
 
\t console.log($scope.employees); 
 
    
 
    }); 
 
    
 
    
 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <title>Angula js | Home </title> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1" /> 
 
    
 
</head> 
 
<body> 
 
\t <div ng-app="myModule"> 
 
\t \t 
 
\t \t <input type="text" ng-model="searchFilter" /> 
 
    <div ng-controller="dataController"> 
 
    <table style="width:500px;border:2px solid black;"> 
 
     <thead> 
 
     <tr style="text-align:left;"> 
 
      <th>Id</th> 
 
      <th>Client name</th> 
 
      <th>Client code</th> 
 
      <th>Team id</th> 
 
     </tr> 
 
     </thead> 
 
     <tbody> 
 
     <tr ng-repeat="employee in employees"> 
 
      <td>{{employee.id}}</td> 
 
      <td>{{employee.client_name}}</td> 
 
      <td>{{employee.client_code}}</td> 
 
      <td>{{employee.team_id}}</td> 
 
     </tr> 
 

 
     </tbody> 
 
    </table> 
 
\t 
 
    </div> \t 
 
\t </div> 
 

 
    
 

 
    
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
    <script src="custom.js"></script> 
 
</body> 
 
</html>

そのデータテーブルは、ページネーションを受け付けません。角度jがデータ可能なjqyeryページ区切りを受け入れることが可能です。

出典

2017-07-18 VISHAL SINGH

response.dataで何ですか？ – Dixit

[dir-pagination]（https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination）を使用して改ページを適用することができます –

基本的に拡張されたJQuery DataTablesのオープンソースライブラリを使用して、ページ区切り、ソート、検索、フィルタリング、アクセシビリティのサポートを含むレンダリングされたテーブルを使用します。 https://assets.cms.gov/resources/framework/2.0/Pages/datatables.html。

出典

2017-07-18 12:46:00

応答に感謝しますが、このコードは自分のコードで機能しません。 jsfiddleを作成するか、実行中のコードを追加してください –

ページネーション：

HTML部分

 <ul> 
      <li class="paginationclass" style="font-weight:bold;"><span>Name</span><span>Age</span><span>Designation</span></li>    
<li class="paginationclass" ng-repeat="datalist in datalists | pagination: curPage * pageSize | limitTo: pageSize"> 
    <div><span>{{ datalist.name }} </span><span>{{ datalist.age }}</span><span>{{ datalist.designation }}</span></div> 
</li> 
</ul> 

    <div class="pagination pagination-centered" ng-show="datalists.length"> 
<ul class="pagination-controle pagination"> 
<li> 
    <button type="button" class="btn btn-primary" ng-disabled="curPage == 0" 
ng-click="curPage=curPage-1"> &lt; PREV</button> 
</li> 
<li> 
<span>Page {{curPage + 1}} of {{ numberOfPages() }}</span> 
</li> 
<li> 
<button type="button" class="btn btn-primary" 
ng-disabled="curPage >= datalists.length/pageSize - 1" 
ng-click="curPage = curPage+1">NEXT &gt;</button> 
</li> 
</ul> 
</div> 



    </div> 
</div>

JSの一部

var myapp = angular.module('sampleapp', [ ]); 

myapp.controller('samplecontoller', function ($scope) { 


$scope.showData = function(){ 

$scope.curPage = 0; 
$scope.pageSize = 3; 
    $scope.datalists = [ 
     { "name": "John","age":"16","designation":"Software Engineer1"}, 
    {"name": "John2","age":"21","designation":"Software Engineer2"}, 
    {"name": "John3","age":"19","designation":"Software Engineer3"}, 
    {"name": "John4","age":"17","designation":"Software Engineer4"}, 
    {"name": "John5","age":"21","designation":"Software Engineer5"}, 
    {"name": "John6","age":"31","designation":"Software Engineer6"}, 
    {"name": "John7","age":"41","designation":"Software Engineer7"}, 
    {"name": "John8","age":"16","designation":"Software Engineer8"}, 
    {"name": "John18","age":"16","designation":"Software Engineer9"}, 
    {"name": "John28","age":"16","designation":"Software Engineer10"}, 
    {"name": "John38","age":"16","designation":"Software Engineer11"}, 
    {"name": "John48","age":"16","designation":"Software Engineer12"}, 
    {"name": "John58","age":"16","designation":"Software Engineer13"}, 
    {"name": "John68","age":"16","designation":"Software Engineer14"}, 
    {"name": "John68","age":"16","designation":"Software Engineer15"} 
] 
    $scope.numberOfPages = function() { 
       return Math.ceil($scope.datalists.length/$scope.pageSize); 
      }; 

} 

}); 

angular.module('sampleapp').filter('pagination', function() 
{ 
return function(input, start) 
{ 
    start = +start; 
    return input.slice(start); 
}; 
});

出典

2017-07-18 12:51:46

応答してくれてありがとうございますが、このコードは自分のコードで動作していません。jsfiddleを作成するか、実行中のコードを追加してください。 –

@ VISHALSINGHあなたは何かエラーがありますか？ –

@VISHALSINGHここでは[dir-paginate]（http://plnkr.co/edit/Wtkv71LIqUR4OhzhgpqL?p=preview）の作業デモです。 –

データジェネレータで角度jを使用するページングを追加する方法

答えて

関連する問題