如何根据分页将数据表中的行序列号 [英] How to put serial number for rows in data table according to pagination
本文介绍了如何根据分页将数据表中的行序列号的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在数据表中输入行的序列号。我想要按照分页使用。
Html：
< div class =widget-content表响应表容器ng-controller =getEmployeesController>
< table ng-table =employeesListshow-filter =trueclass =table table-striped table-bordered>
< trng-repeat =$ data中的employee>
< td data-title ='＃'> {{$ index + 1}}< / td>
< td data-title ='First Name'sortable ='firstName'filter ={'firstName'：'text'}>
{{employee.firstName}}
< / td>
< td data-title ='Last Name'sortable ='lastName'filter ={'lastName'：'text'}>
{{employee.lastName}}
< / td>
< / tr>
< / table>
< / div>
控制器：
code> myApp.controller（'getEmployeesController'，'''scope'，'employeeServices'，'dataTable'，'$ window'，'$ timeout'，'$ filter'，function（$ scope，employeeServices，dataTable ，$ window，$ timeout，$ filter）{
employeeServices.getEmployees（）。then（function（result）{
$ scope.data = result.data;
//employeeServices.getStateId （可用）然后（function（result）{
employeeServices.getStateId（Available）然后（function（result）{
$ scope.benchId = result.data.id;
$ b if（！result.data.error）{
dataTable.render（$ scope，''，employeesList，result.data）;
}
]]）;
Services.js：
myApp.factory（'employeeServices'，''apiServices'，$ location，function（apiServices，$ location）{
var factoryDefi nitions = {
getEmployees：function（）{
return apiServices.getFromTalentPool（'/ EmployeeState？state =& pageNumber = 0& pageSize = 0）success（function（data）{
返回数据;
}）;
}
return factoryDefinitions;
}
App.js：
myApp.factory（'dataTable'，['$ filter'，'ngTableParams'，function（$ filter，ngTableParams）{
var factoryDefinition = {
render：function（$ scope，config，componentId，data）{
if（！config）config = {};
var config = angular.extend（{}， {page：1，count：10}，config）
$ scope [componentId] = new ngTableParams（config，{
total：data.length，// data of data
getData：function（$ defer，params）{
//组织过滤器为$ filter了解它（图形对象）
var filters = {};
angular.forEach（params.filter ），function（val，key）{
var filter = filters;
var parts = key.split（'。'）;
for（var i = 0; i& length; i ++）{
if（i！= parts.length - 1）{
filter [parts [i]] = {};
filter = filter [parts [i]];
}
else {
filter [parts [i]] = val;
}
}
}）;
//使用内置角过滤器
var filteredData = params.filter（）？
$ filter（'filter'）（data，filters）：
data;
var orderedData = params.sorting（）？
$ filter（'orderBy'）（filteredData，params.orderBy（））：
data;
params.total（orderedData.length）; // set total for recalc pagination
$ defer.resolve（orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（）））;
}
}）;
}
}
return factoryDefinition;
}
]）;
我的分页包括页面级选择器和行/页选择器。
如何将序列号连接到分页，以便不会在第2,3,4 ...页显示相同的序列号... ...
解决方案
最后找到解决方案。
我发现在APP.js中：
$ defer。 resolve（orderedData.slice（（params.page（） - 1）* params.count（），params.page（）* params.count（）））;
正在返回在分页中选择的页码数量以及页面大小。
所以添加了两个范围变量 $ scope.pageNumber 和 $ scope.itemsPerPage
// Datatable
myApp.factory（'dataTable'，['$ filter' 'ngTableParams'，function（$ filter，ngTableParams）{
var factoryDefinition = {
render：function（$ scope，config，componentId，data）{
.... ........................................
...... .................................................. .......
....................................... .......................
$ defer.resolve（orderedData.slice（（params.page（） - 1）* params.count（ ），params.page（）* params.count（）））;
$ scope.pageNumber = params.page（）;
$ scope.itemsPerPage = params.count（）;
}
}）;
}
}
return factoryDefinition;
}
]）;
现在在HTML中我做了计算，找到索引号。我用替换了这是我的解决方案问题！< td data-title ='＃'> {{$ index + 1}}< / td> ; td data-title ='＃'> {{（itemsPerPage *（pageNumber-1））+ $ index + 1}}< / td>
I want to put serial number for rows in my data table. I want it to be in accordance to the pagination used.
Html :
<div class="widget-content table-responsive table-container" ng-controller="getEmployeesController" >
<table ng-table="employeesList" show-filter="true" class="table table-striped table-bordered">
<tr ng-repeat="employee in $data">
<td data-title="'#'">{{$index + 1}}</td>
<td data-title="'First Name'" sortable="'firstName'" filter="{ 'firstName': 'text' }">
{{employee.firstName}}
</td>
<td data-title="'Last Name'" sortable="'lastName'" filter="{ 'lastName': 'text' }">
{{employee.lastName}}
</td>
</tr>
</table>
</div>
Controller :
myApp.controller('getEmployeesController', ['$scope', 'employeeServices', 'dataTable', '$window', '$timeout', '$filter', function ($scope, employeeServices, dataTable, $window, $timeout, $filter) {
employeeServices.getEmployees().then(function (result) {
$scope.data = result.data;
//employeeServices.getStateId("Available").then(function(result){
employeeServices.getStateId("Available").then(function (result) {
$scope.benchId = result.data.id;
});
if (!result.data.error) {
dataTable.render($scope, '', "employeesList", result.data);
}
}]);
Services.js :
myApp.factory('employeeServices', ['apiServices', "$location", function (apiServices, $location) {
var factoryDefinitions = {
getEmployees: function () {
return apiServices.getFromTalentPool('/EmployeeState?state=&pageNumber=0&pageSize=0').success(function (data) {
return data;
});
}
return factoryDefinitions;
}
App.js :
myApp.factory('dataTable', ['$filter', 'ngTableParams', function($filter, ngTableParams) {
var factoryDefinition = {
render: function($scope, config, componentId, data) {
if(!config) config ={};
var config = angular.extend({}, {page:1, count:10}, config)
$scope[componentId] = new ngTableParams(config, {
total: data.length, // length of data
getData: function ($defer, params) {
// organize filter as $filter understand it (graph object)
var filters = {};
angular.forEach(params.filter(), function (val, key) {
var filter = filters;
var parts = key.split('.');
for (var i = 0; i < parts.length; i++) {
if (i != parts.length - 1) {
filter[parts[i]] = {};
filter = filter[parts[i]];
}
else {
filter[parts[i]] = val;
}
}
});
// use build-in angular filter
var filteredData = params.filter() ?
$filter('filter')(data, filters) :
data;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) :
data;
params.total(orderedData.length); // set total for recalc pagination
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}
}
return factoryDefinition;
}
]);
My pagination includes both 'page level' selector and 'rows /page' selector.
How should I link the serial number count to pagination so that the same serial numbers are not shown for page 2,3,4.. so on...
解决方案
Found the solution at last.
I found that in APP.js :
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
was returning count of the page number selected in pagination as well as the page size.
So added two scope variables $scope.pageNumber and $scope.itemsPerPageto the directive.
//Datatable
myApp.factory('dataTable', ['$filter', 'ngTableParams', function($filter, ngTableParams) {
var factoryDefinition = {
render: function($scope, config, componentId, data) {
............................................
...............................................................
..............................................................
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
$scope.pageNumber = params.page();
$scope.itemsPerPage = params.count();
}
});
}
}
return factoryDefinition;
}
]);
Now in HTML I made the calculation to find the index number. I replaced <td data-title="'#'">{{$index + 1}}</td> with <td data-title="'#'">{{ (itemsPerPage * (pageNumber-1)) + $index+1 }}</td> and that was the solution to my problem!
这篇关于如何根据分页将数据表中的行序列号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
