我正在使用分页和搜索来构建可重用的数据表。
我有一个工作控制器，使用＆＃39;这个＆＃39;来创建数据表，分页和搜索并设置变量。 （而不是$ scope）。这工作正常。但是，它暂时使用的是硬编码数据。
问题：
1如何在调用数据时动态地将数据传递给TablePaginationController（而不是硬编码列表＆＃34; items＆＃34;）。
2如何使TablePaginationController可以重用，并能够传入不同的数据集（具有相同的结构）。
3我认为或许服务在这里可能是一个好方法，但我不知道从哪里开始...我是否将分页控制器创建为服务并将其注入页面控制器？
TablePaginationController创建数据表并执行所有分页和搜索。
HistoryPageController发送GET请求以从API获取数据并以JSON方式返回响应。将有其他控制器，如DetailsPageController，它们也需要这样做并传入一组不同的数据。
app.controller('TablePaginationController', function($http, $filter, $location) {
const vm = this;
// init
vm.sortingOrder = 'name';
vm.reverse = false;
vm.filteredItems = [];
vm.groupedItems = [];
vm.itemsPerPage = 10;
vm.pagedItems = [];
vm.currentPage = 0;
vm.items = [
{"id":"1","name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"},
{"id":"2","name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"},
{"id":"3","name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"},
{"id":"4","name":"name 4","description":"description 1","field3":"field3 4","field4":"field4 4","field5 ":"field5 4"},
{"id":"5","name":"name 5","description":"description 1","field3":"field3 5","field4":"field4 5","field5 ":"field5 5"},
{"id":"6","name":"name 6","description":"description 1","field3":"field3 6","field4":"field4 6","field5 ":"field5 6"},
{"id":"7","name":"name 7","description":"description 1","field3":"field3 7","field4":"field4 7","field5 ":"field5 7"},
{"id":"8","name":"name 8","description":"description 1","field3":"field3 8","field4":"field4 8","field5 ":"field5 8"},
{"id":"9","name":"name 9","description":"description 1","field3":"field3 9","field4":"field4 9","field5 ":"field5 9"},
{"id":"10","name":"name 10","description":"description 1","field3":"field3 10","field4":"field4 10","field5 ":"field5 10"},
{"id":"11","name":"name 11","description":"description 1","field3":"field3 11","field4":"field4 11","field5 ":"field5 11"},
{"id":"12","name":"name 12","description":"description 1","field3":"field3 12","field4":"field4 12","field5 ":"field5 12"},
{"id":"13","name":"name 13","description":"description 1","field3":"field3 13","field4":"field4 13","field5 ":"field5 13"},
{"id":"14","name":"name 14","description":"description 1","field3":"field3 14","field4":"field4 14","field5 ":"field5 14"},
{"id":"15","name":"name 15","description":"description 1","field3":"field3 15","field4":"field4 15","field5 ":"field5 15"},
{"id":"16","name":"name 16","description":"description 1","field3":"field3 16","field4":"field4 16","field5 ":"field5 16"},
{"id":"17","name":"name 17","description":"description 1","field3":"field3 17","field4":"field4 17","field5 ":"field5 17"},
{"id":"18","name":"name 18","description":"description 1","field3":"field3 18","field4":"field4 18","field5 ":"field5 18"},
{"id":"19","name":"name 19","description":"description 1","field3":"field3 19","field4":"field4 19","field5 ":"field5 19"},
{"id":"20","name":"name 20","description":"description 1","field3":"field3 20","field4":"field4 20","field5 ":"field5 20"}
];
var searchMatch = function (haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
// init the filtered items
vm.search = function () {
vm.filteredItems = $filter('filter')(vm.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], vm.query))
return true;
}
return false;
});
// take care of the sorting order
if (vm.sortingOrder !== '') {
vm.filteredItems = $filter('orderBy')(vm.filteredItems, vm.sortingOrder, vm.reverse);
}
vm.currentPage = 0;
// now group by pages
vm.groupToPages();
};
// calculate page in place
vm.groupToPages = function () {
vm.pagedItems = [];
for (var i = 0; i < vm.filteredItems.length; i++) {
if (i % vm.itemsPerPage === 0) {
vm.pagedItems[Math.floor(i / vm.itemsPerPage)] = [ vm.filteredItems[i] ];
} else {
vm.pagedItems[Math.floor(i / vm.itemsPerPage)].push(vm.filteredItems[i]);
}
}
};
vm.range = function (start, end) {
var ret = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};
vm.prevPage = function () {
if (vm.currentPage > 0) {
vm.currentPage--;
}
};
vm.nextPage = function () {
if (vm.currentPage < vm.pagedItems.length - 1) {
vm.currentPage++;
}
};
vm.setPage = function (pg) {
vm.currentPage = pg;
};
// functions have been describe process the data for display
vm.search();
// change sorting order
vm.sort_by = function(newSortingOrder) {
if (vm.sortingOrder == newSortingOrder)
vm.reverse = !vm.reverse;
alert(newSortingOrder);
vm.sortingOrder = newSortingOrder;
// icon setup
$('th i').each(function(){
// icon reset
$(this).removeClass().addClass('icon-sort');
});
if (vm.reverse)
$('th.'+newSortingOrder+' i').removeClass().addClass('icon-chevron-up');
else
$('th.'+newSortingOrder+' i').removeClass().addClass('icon-chevron-down');
};
});
app.controller('HistoryPageController', function($http) {
var vm = this;
vm.title = 'Transfer Request History';
/*Get Transfer Request History*/
$http({
url: `/transfer_request/history/json`,
method: 'GET'
}).then(function (response){
vm.treq = response.data;
console.log('HistoryPageController API call worked', response);
},function (error){
console.log('HistoryPageController API error: ', error);
});
});