Question

**如何在jquery Datatable插件中使用角度js添加分页。有一些外部插件可用像angular js数据表直接允许分页，但我想在jquery数据表内。 **

＆＃13;

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) {
	$scope.employees=response.data;
	console.log($scope.employees);
    
  });
   
 
});

＆＃13;

<!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>
	<div ng-app="myModule">
		
		<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>
	
  </div>	
	</div>

  

  
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
  <script src="custom.js"></script>
</body>
</html>

＆＃13;

＆＃13; 它不接受数据分页。是否可能角度js接受数据表jqyery分页。

Answer 1

分页：

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);
 };
});

Answer 2

将这个开源库基本上增强版的JQuery DataTables用于渲染表，其中包括分页，排序，搜索和过滤以及对可访问性的非常好的支持。 https://assets.cms.gov/resources/framework/2.0/Pages/datatables.html。

如何在数据表中使用角度js添加分页

2 个答案: