ฉันมีชุดข้อมูลในหน่วยความจำประมาณ 1,000 รายการและกำลังพยายามสร้างเพจเจอร์สำหรับชุดข้อมูลนี้ แต่ฉันไม่แน่ใจว่าจะทำอย่างไร
ฉันใช้ฟังก์ชันตัวกรองที่กำหนดเองเพื่อกรองผลลัพธ์และใช้งานได้ดี แต่อย่างใดฉันก็ต้องใช้จำนวนหน้าออกมา
เบาะแสใด ๆ
ฉันมีชุดข้อมูลในหน่วยความจำประมาณ 1,000 รายการและกำลังพยายามสร้างเพจเจอร์สำหรับชุดข้อมูลนี้ แต่ฉันไม่แน่ใจว่าจะทำอย่างไร
ฉันใช้ฟังก์ชันตัวกรองที่กำหนดเองเพื่อกรองผลลัพธ์และใช้งานได้ดี แต่อย่างใดฉันก็ต้องใช้จำนวนหน้าออกมา
เบาะแสใด ๆ
คำตอบ:
ตรวจสอบUI Bootstrap 's เลขสั่ง ฉันลงเอยด้วยการใช้มันมากกว่าสิ่งที่โพสต์ที่นี่เนื่องจากมันมีคุณสมบัติเพียงพอสำหรับการใช้งานในปัจจุบันของฉันและมีข้อกำหนดการทดสอบอย่างละเอียดเพื่อติดตาม
<!-- table here -->
<pagination
ng-model="currentPage"
total-items="todos.length"
max-size="maxSize"
boundary-links="true">
</pagination>
<!-- items/page select here if you like -->
todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});
ฉันได้สร้างพลั่วเกอร์ที่ทำงานได้เพื่อการอ้างอิง
<!-- table here -->
<div data-pagination="" data-num-pages="numPages()"
data-current-page="currentPage" data-max-size="maxSize"
data-boundary-links="true"></div>
<!-- items/page select here if you like -->
todos.controller("TodoController", function($scope) {
$scope.filteredTodos = []
,$scope.currentPage = 1
,$scope.numPerPage = 10
,$scope.maxSize = 5;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:"todo "+i, done:false});
}
};
$scope.makeTodos();
$scope.numPages = function () {
return Math.ceil($scope.todos.length / $scope.numPerPage);
};
$scope.$watch("currentPage + numPerPage", function() {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
});
});
ฉันได้สร้างพลั่วเกอร์ที่ทำงานได้เพื่อการอ้างอิง
pagination
องค์ประกอบ
ฉันเพิ่งใช้การเพจสำหรับไซต์สร้างด้วยเชิงมุม คุณเช็คเอาต์แหล่งที่มา: https://github.com/angular/builtwith.angularjs.org
ฉันจะหลีกเลี่ยงการใช้ตัวกรองเพื่อแยกหน้า คุณควรแยกรายการออกเป็นหน้าต่างๆภายในคอนโทรลเลอร์
Use your downvotes whenever you encounter an egregiously sloppy, no-effort-expended post, or an answer that is clearly and perhaps dangerously incorrect.
ฉันต้องใช้เลขหน้าสองสามครั้งกับ Angular และมันก็เป็นความเจ็บปวดเล็กน้อยสำหรับบางสิ่งที่ฉันรู้สึกว่าสามารถทำให้ง่ายขึ้นได้ ฉันใช้ความคิดบางอย่างที่นำเสนอที่นี่และที่อื่น ๆ เพื่อสร้างโมดูลการให้เลขหน้าซึ่งทำให้การแบ่งหน้าง่ายเหมือน:
<ul>
<li dir-paginate="item in items | itemsPerPage: 10">{{ item }}</li>
</ul>
// then somewhere else on the page ....
<dir-pagination-controls></dir-pagination-controls>
แค่นั้นแหละ. มันมีคุณสมบัติดังต่อไปนี้:
items
กับลิงค์เลขหน้าng-repeat
ให้คุณสามารถใช้นิพจน์ใด ๆ ที่สามารถใช้ได้อย่างถูกต้องในการng-repeat
รวมถึงการกรองการสั่งซื้อ ฯลฯpagination-controls
คำสั่งไม่จำเป็นต้องรู้อะไรเกี่ยวกับบริบทที่paginate
เรียกว่าคำสั่งสำหรับผู้ที่กำลังมองหาโซลูชัน "พลักแอนด์เพลย์" ฉันคิดว่าคุณจะพบว่ามีประโยชน์
รหัสนี้มีให้ที่ GitHub และมีชุดการทดสอบที่ดีพอสมควร:
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
หากคุณมีความสนใจฉันยังเขียนชิ้นสั้น ๆ ที่มีความเข้าใจเพิ่มเติมเล็กน้อยเกี่ยวกับการออกแบบโมดูล: http://www.michaelbromley.co.uk/blog/108/paginate-almost-anything-in-angularjs/
ฉันเพิ่งสร้าง JSFiddle ที่แสดงเลขหน้า + ค้นหา + เรียงลำดับในแต่ละคอลัมน์โดยใช้รหัส btford: http://jsfiddle.net/SAWsA/11/
new_sorting_order
newSortingOrder
แก้ไขนั้นเพิ่ม@scope.search();
และคุณจะเห็นสิ่งต่าง ๆ เรียงตามที่คาดไว้และไอคอนเรียงลำดับก็จะอัพเดตเช่นกัน (เรียกใช้ซอโดยเปิดคอนโซลการดีบักของเบราว์เซอร์ของคุณ (ใน chrome, F12, แท็บคอนโซล) และเห็นได้ชัด)
ฉันอัปเดตplunkr ของ Scotty.NET http://plnkr.co/edit/FUeWwDu0XzO51lyLAEIA?p=previewเพื่อให้ใช้รุ่น angular, angular-ui และ bootstrap รุ่นใหม่กว่า
ตัวควบคุม
var todos = angular.module('todos', ['ui.bootstrap']);
todos.controller('TodoController', function($scope) {
$scope.filteredTodos = [];
$scope.itemsPerPage = 30;
$scope.currentPage = 4;
$scope.makeTodos = function() {
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:'todo '+i, done:false});
}
};
$scope.figureOutTodosToDisplay = function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
var end = begin + $scope.itemsPerPage;
$scope.filteredTodos = $scope.todos.slice(begin, end);
};
$scope.makeTodos();
$scope.figureOutTodosToDisplay();
$scope.pageChanged = function() {
$scope.figureOutTodosToDisplay();
};
});
องค์ประกอบ Bootstrap UI
<pagination boundary-links="true"
max-size="3"
items-per-page="itemsPerPage"
total-items="todos.length"
ng-model="currentPage"
ng-change="pageChanged()"></pagination>
นี่เป็นวิธีแก้ปัญหาจาวาสคริปต์ที่ฉันได้ใช้เป็นบริการเชิงมุมเพื่อใช้ตรรกะการแบ่งหน้าเช่นเดียวกับในผลการค้นหาของ Google
สาธิตการทำงานกับ CodePen ที่http://codepen.io/cornflourblue/pen/KVeaQL/
รายละเอียดและคำอธิบายที่โพสต์บล็อกนี้
function PagerService() {
// service definition
var service = {};
service.GetPager = GetPager;
return service;
// service implementation
function GetPager(totalItems, currentPage, pageSize) {
// default to first page
currentPage = currentPage || 1;
// default page size is 10
pageSize = pageSize || 10;
// calculate total pages
var totalPages = Math.ceil(totalItems / pageSize);
var startPage, endPage;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
// create an array of pages to ng-repeat in the pager control
var pages = _.range(startPage, endPage + 1);
// return object with all pager properties required by the view
return {
totalItems: totalItems,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}
ฉันได้แยกบิตที่เกี่ยวข้องที่นี่ นี่คือเพจเจอร์แบบตาราง 'ไม่จีบ' ดังนั้นการเรียงลำดับหรือการกรองจึงไม่รวม คุณสามารถเปลี่ยน / เพิ่มได้ตามต้องการ:
//your data source may be different. the following line is
//just for demonstration purposes only
var modelData = [{
text: 'Test1'
}, {
text: 'Test2'
}, {
text: 'Test3'
}];
(function(util) {
util.PAGE_SIZE = 10;
util.range = function(start, end) {
var rng = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++)
rng.push(i);
return rng;
};
util.Pager = function(data) {
var self = this,
_size = util.PAGE_SIZE;;
self.current = 0;
self.content = function(index) {
var start = index * self.size,
end = (index * self.size + self.size) > data.length ? data.length : (index * self.size + self.size);
return data.slice(start, end);
};
self.next = function() {
if (!self.canPage('Next')) return;
self.current++;
};
self.prev = function() {
if (!self.canPage('Prev')) return;
self.current--;
};
self.canPage = function(dir) {
if (dir === 'Next') return self.current < self.count - 1;
if (dir === 'Prev') return self.current > 0;
return false;
};
self.list = function() {
var start, end;
start = self.current < 5 ? 0 : self.current - 5;
end = self.count - self.current < 5 ? self.count : self.current + 5;
return Util.range(start, end);
};
Object.defineProperty(self, 'size', {
configurable: false,
enumerable: false,
get: function() {
return _size;
},
set: function(val) {
_size = val || _size;
}
});
Object.defineProperty(self, 'count', {
configurable: false,
enumerable: false,
get: function() {
return Math.ceil(data.length / self.size);
}
});
};
})(window.Util = window.Util || {});
(function(ns) {
ns.SampleController = function($scope, $window) {
$scope.ModelData = modelData;
//instantiate pager with array (i.e. our model)
$scope.pages = new $window.Util.Pager($scope.ModelData);
};
})(window.Controllers = window.Controllers || {});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-controller="Controllers.SampleController">
<thead>
<tr>
<th>
Col1
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in pages.content(pages.current)" title="{{item.text}}">
<td ng-bind-template="{{item.text}}"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
<a href="#" ng-click="pages.prev()">«</a>
<a href="#" ng-repeat="n in pages.list()" ng-click="pages.current = n" style="margin: 0 2px;">{{n + 1}}</a>
<a href="#" ng-click="pages.next()">»</a>
</td>
</tr>
</tfoot>
</table>
วิธีการแก้ปัญหาด้านล่างค่อนข้างง่าย
<pagination
total-items="totalItems"
items-per-page= "itemsPerPage"
ng-model="currentPage"
class="pagination-sm">
</pagination>
<tr ng-repeat="country in countries.slice((currentPage -1) * itemsPerPage, currentPage * itemsPerPage) ">
อะแดปเตอร์เชิงมุม jQuery Mobile มีตัวกรองเพจที่คุณสามารถทำได้
นี่คือซอฟลอกเดอร์ที่ใช้งาน (เพิ่มมากกว่า 5 รายการและกลายเป็นเพจจิ้ง): http://jsfiddle.net/tigbro/Du2DY/
นี่คือแหล่งที่มา: https://github.com/tigbro/jquery-mobile-angular-adapter/blob/master/src/main/webapp/utils/paging.js
สำหรับทุกคนที่พบว่ามันยากเหมือนฉันในการสร้างผู้จัดตารางให้ฉันโพสต์สิ่งนี้ ดังนั้นในมุมมองของคุณ:
<pagination total-items="total" items-per-page="itemPerPage" ng-model="currentPage" ng-change="pageChanged()"></pagination>
<!-- To specify your choice of items Per Pages-->
<div class="btn-group">
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'" data-ng-click="setItems(5)">5</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'" data-ng-click="setItems(10)">10</label>
<label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'" data-ng-click="setItems(15)">15</label>
</div>
//And don't forget in your table:
<tr data-ng-repeat="p in profiles | offset: (currentPage-1)*itemPerPage | limitTo: itemPerPage" >
ใน angularJs ของคุณ:
var module = angular.module('myapp',['ui.bootstrap','dialogs']);
module.controller('myController',function($scope,$http){
$scope.total = $scope.mylist.length;
$scope.currentPage = 1;
$scope.itemPerPage = 2;
$scope.start = 0;
$scope.setItems = function(n){
$scope.itemPerPage = n;
};
// In case you can replace ($scope.currentPage - 1) * $scope.itemPerPage in <tr> by "start"
$scope.pageChanged = function() {
$scope.start = ($scope.currentPage - 1) * $scope.itemPerPage;
};
});
//and our filter
module.filter('offset', function() {
return function(input, start) {
start = parseInt(start, 10);
return input.slice(start);
};
});
ฉันใช้ห้องสมุดเลขหน้าของบุคคลที่สามและใช้งานได้ดี มันสามารถทำแหล่งข้อมูลท้องถิ่น / ระยะไกลและมันสามารถกำหนดค่าได้มาก
https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]
[auto-hide=""]>
</dir-pagination-controls>
ตั้งแต่ Angular 1.4 limitTo
ตัวกรองยังยอมรับอาร์กิวเมนต์ตัวเลือกที่สองbegin
จากเอกสาร :
{{limitTo_expression | จำกัด ถึง: จำกัด : เริ่มต้น}}
start (เป็นทางเลือก) string | number
ดัชนีที่จะเริ่มต้นข้อ จำกัด ในฐานะที่เป็นดัชนีเชิงลบเริ่มต้นบ่งบอกถึงการชดเชยจากจุดสิ้นสุดของการป้อนข้อมูล ค่าเริ่มต้นเป็น 0
ดังนั้นคุณไม่จำเป็นต้องสร้างคำสั่งใหม่อาร์กิวเมนต์นี้สามารถใช้เพื่อตั้งค่าออฟเซ็ตของการแบ่งหน้า
ng-repeat="item in vm.items| limitTo: vm.itemsPerPage: (vm.currentPage-1)*vm.itemsPerPage"
คุณสามารถทำได้โดยใช้คำสั่ง Bootstrap UI
คำตอบนี้เป็นการแก้ไขคำตอบที่ได้รับจาก @ Scotty.NET ฉันได้เปลี่ยนรหัสเพราะ<pagination>
คำสั่งเลิกใช้แล้ว
รหัสต่อไปนี้สร้างเลขหน้า:
<ul uib-pagination
boundary-links="true"
total-items="totalItems"
items-per-page="itemsPerPage"
ng-model="currentPage"
ng-change="pageChanged()"
class="pagination"
previous-text="‹"
next-text="›"
first-text="«"
last-text="»">
</ul>
เพื่อให้ใช้งานได้ให้ใช้สิ่งนี้ในคอนโทรลเลอร์ของคุณ:
$scope.filteredData = []
$scope.totalItems = $scope.data.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage)
, end = begin + $scope.itemsPerPage;
$scope.filteredData = $scope.data.slice(begin, end);
};
$scope.pageChanged();
อ้างถึงสิ่งนี้สำหรับตัวเลือกเพิ่มเติมของการแบ่งหน้า: Bootstrap UI Pagination Directive
การแบ่งหน้าซ้ำซ้ำ
<div ng-app="myApp" ng-controller="MyCtrl">
<input ng-model="q" id="search" class="form-control" placeholder="Filter text">
<select ng-model="pageSize" id="pageSize" class="form-control">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
<option value="20">20</option>
</select>
<ul>
<li ng-repeat="item in data | filter:q | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item}}
</li>
</ul>
<button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
Previous
</button>
{{currentPage+1}}/{{numberOfPages()}}
<button ng-disabled="currentPage >= getData().length/pageSize - 1" ng- click="currentPage=currentPage+1">
Next
</button>
</div>
<script>
var app=angular.module('myApp', []);
app.controller('MyCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.currentPage = 0;
$scope.pageSize = 10;
$scope.data = [];
$scope.q = '';
$scope.getData = function () {
return $filter('filter')($scope.data, $scope.q)
}
$scope.numberOfPages=function(){
return Math.ceil($scope.getData().length/$scope.pageSize);
}
for (var i=0; i<65; i++) {
$scope.data.push("Item "+i);
}
}]);
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
</script>
ข้อความก่อนหน้านี้แนะนำวิธีสร้างเพจด้วยตัวเอง หากคุณเป็นเช่นฉันและต้องการสั่งเสร็จแล้วฉันเพิ่งพบหนึ่งที่ดีเรียกว่าngTable รองรับการเรียงลำดับการกรองและการแบ่งหน้า
มันเป็นทางออกที่สะอาดมากทุกสิ่งที่คุณต้องการในมุมมองของคุณ:
<table ng-table="tableParams" class="table">
<tr ng-repeat="user in $data">
<td data-title="'Name'" sortable="'name'">
{{user.name}}
</td>
<td data-title="'Age'" sortable="'age'">
{{user.age}}
</td>
</tr>
</table>
และในตัวควบคุม:
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
}
}, {
total: data.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
var start = (params.page() - 1) * params.count();
var end = params.page() * params.count();
$defer.resolve(orderedData.slice( start, end));
}
});
ลิงก์ไปที่ GitHub: https://github.com/esvit/ng-table/
เป็นทางเลือกที่ยอดเยี่ยม
คำสั่งเพื่อช่วยในการเพจชุดข้อมูลขนาดใหญ่ในขณะที่ต้องการข้อมูลเพจจิ้งน้อยที่สุด เราขึ้นอยู่กับเซิร์ฟเวอร์เป็นอย่างมากสำหรับผลลัพธ์ "การกรอง" ในโครงร่างการเพจนี้ แนวคิดหลักคือการที่เราต้องการเก็บ "หน้า" ของไอเท็มที่ใช้งานอยู่เท่านั้นแทนที่จะเก็บรายการทั้งหมดในหน่วยความจำและเพจจิ้งบนฝั่งไคลเอ็นต์
คำถามเก่า แต่เนื่องจากฉันคิดว่าแนวทางของฉันแตกต่างกันเล็กน้อยและซับซ้อนน้อยกว่าฉันจะแบ่งปันสิ่งนี้และหวังว่าคนที่อยู่ข้างฉันจะพบว่ามีประโยชน์
สิ่งที่ฉันพบว่าเป็นวิธีแก้ปัญหาที่ง่ายและเล็กสำหรับการแบ่งหน้าคือการรวมคำสั่งกับตัวกรองที่ใช้ตัวแปรขอบเขตเดียวกัน
ในการดำเนินการนี้คุณเพิ่มตัวกรองในอาร์เรย์และเพิ่ม directiv เช่นนี้
<div class="row">
<table class="table table-hover">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in items | cust_pagination:p_Size:p_Step">
<td>{{item.Name}}</td>
<td>{{item.Price}}</td>
<td>{{item.Quantity}}</td>
</tr>
</tbody>
</table>
<div cust-pagination p-items="items" p-boundarylinks="true" p-size="p_Size" p-step="p_Step"></div>
</div>
p_Size และ p_Step เป็นตัวแปรขอบเขตที่สามารถปรับแต่งในขอบเขตอื่นค่าเริ่มต้นของ p_Size คือ 5 และ p_Step คือ 1
เมื่อมีการเปลี่ยนแปลงขั้นตอนในการแบ่งหน้า p_Step จะได้รับการอัปเดตและจะทริกเกอร์การกรองใหม่โดยตัวกรอง cust_pagination ตัวกรอง cust_pagination แล้วแบ่งอาร์เรย์ขึ้นอยู่กับค่า p_Step เช่นด้านล่างและส่งกลับเฉพาะระเบียนที่ใช้งานอยู่ที่เลือกในส่วนการแบ่งหน้า
var startIndex = nStep * nPageSize;
var endIndex = startIndex + nPageSize;
var arr = items.slice(startIndex, endIndex);
return arr;
มีตัวอย่างของฉัน ปุ่มที่เลือกตรงกลางของตัวควบคุมรายการ ปรับแต่ง >>>
$scope.pagination = {total: null, pages: [], config: {count: 10, page: 1, size: 7}};
ตรรกะสำหรับการแบ่งหน้า:
/*
Pagination
*/
$scope.$watch('pagination.total', function (total) {
if(!total || total <= $scope.pagination.config.count) return;
_setPaginationPages(total);
});
function _setPaginationPages(total) {
var totalPages = Math.ceil(total / $scope.pagination.config.count);
var pages = [];
var start = $scope.pagination.config.page - Math.floor($scope.pagination.config.size/2);
var finish = null;
if((start + $scope.pagination.config.size - 1) > totalPages){
start = totalPages - $scope.pagination.config.size;
}
if(start <= 0) {
start = 1;
}
finish = start + $scope.pagination.config.size - 1;
if(finish > totalPages){
finish = totalPages;
}
for (var i = start; i <= finish; i++) {
pages.push(i);
}
$scope.pagination.pages = pages;
}
$scope.$watch("pagination.config.page", function(page){
_setPaginationPages($scope.pagination.total);
_getRespondents($scope.pagination.config);
});
และมุมมองของฉันใน bootstap
<ul ng-class="{hidden: pagination.total == 0}" class="pagination">
<li ng-click="pagination.config.page = pagination.config.page - 1"
ng-class="{disabled: pagination.config.page == 1}" ><a href="#">«</a></li>
<li ng-repeat="p in pagination.pages"
ng-click="pagination.config.page = p"
ng-class="{active: p == pagination.config.page}"><a href="#">{{p}}</a></li>
<li ng-click="pagination.config.page = pagination.config.page + 1"
ng-class="{disabled: pagination.config.page == pagination.pages.length}"><a href="#">»</a></li>
</ul >
มันมีประโยชน์
ฉันหวังว่าฉันจะแสดงความคิดเห็น แต่ฉันจะต้องออกจากที่นี่:
คำตอบของ Scotty.NET และการทำซ้ำของ user2176745 สำหรับรุ่นที่ใหม่กว่านั้นยอดเยี่ยม แต่พวกเขาทั้งคู่พลาดอะไรบางอย่างที่ AngularJS (v1.3.15) เวอร์ชันของฉันหยุดลง:
ฉันไม่ได้กำหนดไว้ใน $ scope.makeTodos
ดังนั้นการแทนที่ด้วยฟังก์ชั่นนี้จะสามารถแก้ไขได้สำหรับเวอร์ชั่นเชิงมุมล่าสุด
$scope.makeTodos = function() {
var i;
$scope.todos = [];
for (i=1;i<=1000;i++) {
$scope.todos.push({ text:'todo '+i, done:false});
}
};
ภาพรวม: การแบ่งหน้าโดยใช้
- ng-repeat
- uib-pagination
ดู:
<div class="row">
<div class="col-lg-12">
<table class="table">
<thead style="background-color: #eee">
<tr>
<td>Dispature</td>
<td>Service</td>
<td>Host</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in app.metricsList">
<td>{{x.dispature}}</td>
<td>{{x.service}}</td>
<td>{{x.host}}</td>
<td>{{x.value}}</td>
</tr>
</tbody>
</table>
<div align="center">
<uib-pagination items-per-page="app.itemPerPage" num-pages="numPages"
total-items="app.totalItems" boundary-link-numbers="true"
ng-model="app.currentPage" rotate="false" max-size="app.maxSize"
class="pagination-sm" boundary-links="true"
ng-click="app.getPagableRecords()"></uib-pagination>
<div style="float: right; margin: 15px">
<pre>Page: {{app.currentPage}} / {{numPages}}</pre>
</div>
</div>
</div>
</div>
ตัวควบคุม JS :
app.controller('AllEntryCtrl',['$scope','$http','$timeout','$rootScope', function($scope,$http,$timeout,$rootScope){
var app = this;
app.currentPage = 1;
app.maxSize = 5;
app.itemPerPage = 5;
app.totalItems = 0;
app.countRecords = function() {
$http.get("countRecord")
.success(function(data,status,headers,config){
app.totalItems = data;
})
.error(function(data,status,header,config){
console.log(data);
});
};
app.getPagableRecords = function() {
var param = {
page : app.currentPage,
size : app.itemPerPage
};
$http.get("allRecordPagination",{params : param})
.success(function(data,status,headers,config){
app.metricsList = data.content;
})
.error(function(data,status,header,config){
console.log(data);
});
};
app.countRecords();
app.getPagableRecords();
}]);
ฉันต้องการเพิ่มโซลูชันของฉันที่ทำงานกับngRepeat
และตัวกรองที่คุณใช้ด้วยโดยไม่ต้องใช้$watch
อาร์เรย์หรือแบ่งส่วน
ผลการกรองของคุณจะถูกแบ่งหน้า!
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myController', ['$scope', function($scope){
$scope.list= ['a', 'b', 'c', 'd', 'e'];
$scope.pagination = {
currentPage: 1,
numPerPage: 5,
totalItems: 0
};
$scope.searchFilter = function(item) {
//Your filter results will be paginated!
//The pagination will work even with other filters involved
//The total number of items in the result of your filter is accounted for
};
$scope.paginationFilter = function(item, index) {
//Every time the filter is used it restarts the totalItems
if(index === 0)
$scope.pagination.totalItems = 0;
//This holds the totalItems after the filters are applied
$scope.pagination.totalItems++;
if(
index >= (($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage)
&& index < ((($scope.pagination.currentPage - 1) * $scope.pagination.numPerPage) + $scope.pagination.numPerPage)
)
return true; //return true if item index is on the currentPage
return false;
};
}]);
ใน HTML ตรวจสอบให้แน่ใจว่าคุณใช้ตัวกรองของคุณกับตัวกรองngRepeat
ก่อนหน้าการแบ่งหน้า
<table data-ng-controller="myController">
<tr data-ng-repeat="item in list | filter: searchFilter | filter: paginationFilter track by $index">
<td>
{{item}}
</td>
<tr>
</table>
<ul class="pagination-sm"
uib-pagination
data-boundary-links="true"
data-total-items="pagination.totalItems"
data-items-per-page="pagination.numPerPage"
data-ng-model="pagination.currentPage"
data-previous-text="‹"
data-next-text="›"
data-first-text="«"
data-last-text="»">
</ul>