按页面排序
Sorting on Page
本文关键字：排序 更新时间：2023-09-26
我正在研究使用Angular js的VF页面。我正在做的是使用控制器 anf 内的查询从自定义对象获取数据，然后使用 json.serialisation.在 VFPage 上使用该字符串对其进行序列化。现在我在页面上显示它。我从博客中复制了代码，它的作用是显示分页记录，并对特定记录进行排序。我想要的是它应该对整个数据进行排序。下面是代码..lodata 是我从控制器带来的序列化数据
var myapp = angular.module('hello', []);
var sortingOrder = '';
var sortingOrderWO = 'createdDateWO';
//var $scope;
var new_sorting_order = null;
//this.$scope = $scope;
//this.$filter =$filter;
$scope.sortingOrder = sortingOrder;
$scope.reverse = false;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 15;
$scope.pagedItems = [];
$scope.currentPage = 0;
$scope.items = lodata;
var searchMatch = function (haystack, needle) {
if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
//Initialize the Search Filters
$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for (var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
// Define Sorting Order
if ($scope.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, !$scope.reverse);
}
$scope.currentPage = 0;
// console.log(JSON.stringify($scope.filteredItems));
// Group by pages
$scope.groupToPages();
};
$scope.groupToPages = function () {
$scope.pagedItems = [];
for (var i = 0; i < $scope.filteredItems.length; i++) {
if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [$scope.filteredItems[i]];
} else {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
}
}
};
$scope.range = function (start, end) {
var ret = [];
if (!end) {
end = start;
start = 0;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
return ret;
};
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.pagedItems.length - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function () {
$scope.currentPage = this.n;
};
$scope.search();
$scope.sort_by = function (newSortingOrder) {
//alert(sortingOrder + '-----' +newSortingOrder);
//alert($scope.sortingOrder);
//alert('Sort called in one direction');
if ($scope.sortingOrder == newSortingOrder){
$scope.reverse = !$scope.reverse;
//alert('we are changing the reverse'+$scope.reverse);
}
$scope.sortingOrder = newSortingOrder;
//alert('we are changing the $scope.sortingOrder'+$scope.sortingOrder);
// icon setup
$('th i').each(function () {
// icon reset
$(this).removeClass().addClass('icon-sort');
});
if ($scope.reverse)
$('th.' + new_sorting_order + ' i').removeClass().addClass('icon-chevron-up');
else
$('th.' + new_sorting_order + ' i').removeClass().addClass('icon-chevron-down');
};
}
var contrl = controllers.controller('ctrlRead', function ($scope, $filter){
//alert('its started');
var locData = {!wpData[0]}
return generateJson(locData, $scope, $filter);
//alert('its completed');
});
contrl.$inject = ['$scope', '$filter'];
这是通过过滤器、页面排序和分页示例的 angularjs 表。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Angular JS table sort and filter example </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.16/angular.js"></script>
<script src="http://code.angularjs.org/1.2.16/angular-resource.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script>
var app = angular.module('MyForm', ['ui.bootstrap', 'ngResource']);
app.controller('myCtrl', function ($scope) {
$scope.predicate = 'name';
$scope.reverse = true;
$scope.currentPage = 1;
$scope.order = function (predicate) {
$scope.reverse = ($scope.predicate === predicate) ? !$scope.reverse : false;
$scope.predicate = predicate;
};
$scope.students = [
{ name: 'Kevin', age: 25, gender: 'boy' },
{ name: 'John', age: 30, gender: 'girl' },
{ name: 'Laura', age: 28, gender: 'girl' },
{ name: 'Joy', age: 15, gender: 'girl' },
{ name: 'Mary', age: 28, gender: 'girl' },
{ name: 'Peter', age: 95, gender: 'boy' },
{ name: 'Bob', age: 50, gender: 'boy' },
{ name: 'Erika', age: 27, gender: 'girl' },
{ name: 'Patrick', age: 40, gender: 'boy' },
{ name: 'Tery', age: 60, gender: 'girl' }
];
$scope.totalItems = $scope.students.length;
$scope.numPerPage = 5;
$scope.paginate = function (value) {
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.students.indexOf(value);
return (begin <= index && index < end);
};
});
</script>
<style>
.odd {
background-color: antiquewhite;
color: #008b8b;
}
td th {
height: 30px;
min-width: 100px;
}
thead {
background-color: darkgray;
color: white;
height: 30px;
}
</style>
</head>
<body ng-app="MyForm">
<div ng-controller="myCtrl">
<h3>List students</h3>
<div class="container-fluid">
<pre>Click header link to sort, input into filter text to filter</pre>
<hr />
<table class="table table-striped">
<thead>
<tr>
<th>Edit</th>
<th>
<a href="" ng-click="order('name')">Name</a>
</th>
<th><a href="" ng-click="order('age')"> Age</a> </th>
<th><a href="" ng-click="order('gender')">Gender</a> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Filter =>></td>
<td> <input type="text" ng-model="search.name" /></td>
<td> <input type="text" ng-model="search.age" /> </td>
<td><input type="text" ng-model="search.gender" /> </td>
</tr>
<tr ng-repeat="user in students | orderBy:predicate:reverse | filter:paginate| filter:search" ng-class-odd="'odd'">
<td>
<button class="btn">
Edit
</button>
</td>
<td>{{ user.name}}</td>
<td>{{ user.age}}</td>
<td>{{ user.gender}}</td>
</tr>
</tbody>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</div>
</div>
</body>
</html> 看起来您首先要执行过滤器。我要做的是先进行排序，然后再进行过滤。这可能是一个轻微的性能影响，但它肯定会给你你需要的东西。
更改此设置：
$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for (var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
// Define Sorting Order
if ($scope.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, !$scope.reverse);
}
$scope.currentPage = 0;
// console.log(JSON.stringify($scope.filteredItems));
// Group by pages
$scope.groupToPages();
};
对此：
$scope.search = function () {
// Define Sorting Order
if ($scope.sortingOrder !== '') {
$scope.items = $filter('orderBy')($scope.items, $scope.sortingOrder, !$scope.reverse);
}
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for (var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
$scope.currentPage = 0;
// console.log(JSON.stringify($scope.filteredItems));
// Group by pages
$scope.groupToPages();
};
这是未经测试的。如您所见，我刚刚交换了几段代码。这将首先对数组进行排序，然后对其进行过滤。如果您有问题，请告诉我。
相关文章：
- JavaScript数组排序(函数）用于对表行进行排序，而不是排序
- 使用promise和mongoose对文档进行排序
- Selectize.js:如何对整数值的选项进行排序
- Javascript排序的图像弹出窗口..可以't单独弹出
- 如何通过引用var Using DataTables来进行分页或排序
- 为什么HTML5拖放的目标是孩子?(可排序列表）
- AngularJs对所有页面中的所有记录进行排序
- 当属性不一致时，如何根据属性对JS对象列表进行排序
- 按从高到低对多个int变量进行排序
- jQuery UI可排序-多连接列表拖动
- Javascript排序字符串或数字
- 2个backbone.js集合，具有相同的模型，但排序顺序不同
- sort而不是排序javascript
- 通过从节点父级获取所有子级对节点进行排序(获取子级数组）
- 如何合并不同集合的游标并按日期排序
- 为什么我的JavaScript堆栈排序函数不起作用
- ui网格:在自定义表头模板中触发排序
- jquery Onclick函数带有导致双击的回调排序函数
- Rubaxa可与聚合物进行排序/拖放不起作用，具体取决于显示器:
- 对角度数据表中括号内的数字进行排序
