Я пытаюсь выполнить разбиение на страницы на стороне сервера, используя angularjs 1.7 с .netcore2.0 для примерно одного миллиона записей из базы данных.
Попытался выполнить реализацию разбиения на страницы на стороне сервера, возвращая общее число страниц размером, переданным изна стороне клиента по умолчанию и общее количество элементов из базы данных.
мои коды, как показано ниже
public class PinQuery : IPinQueryObject
{
public string SortBy { get; set; }
public bool IsSortAscending { get; set ; }
public int Page { get; set ; }
public int PageSize { get; set; }
}
[HttpGet]
public async Task<QueryResult<FromInception>> Get(PinQuery modelquery)
{
try
{
//Fetch data from the databank
var getPinsFromDatabank = await _inception.GetFromInceptionPins(modelquery);
return getPinsFromDatabank;
}
catch (Exception ex)
{
return null;
}
}
public async Task<QueryResult<FromInception>> GetFromInceptionPins(PinQuery query)
{
try
{
var result = new QueryResult<FromInception>();
var myquery = _context.FromInceptionPins.AsQueryable();
result.TotalItems = await myquery.CountAsync();
myquery = myquery.ApplyPaging(query);
result.Items = await myquery.ToListAsync();
return result;
// return await _context.FromInceptionPins.ToListAsync();
}
catch (Exception ex)
{
throw;
}
}
public static class IQueryableExtensions
{
public static IQueryable<T> ApplyPaging<T>(this IQueryable<T> query, IPinQueryObject queryObj)
{
if(queryObj.Page <= 0)
{
queryObj.Page = 1;
}
if(queryObj.PageSize <= 0)
{
queryObj.PageSize = 10;
}
return query.Skip((queryObj.Page - 1) * queryObj.PageSize).Take(queryObj.PageSize);
}
}
служба angularjs для получения данных ..
this.getFromInceptionPinsFromDB = function (page = 0,pagesize = 0) {
var url = '/FromInception/Get?page=' + page + '&pagesize=' + pagesize;
return $http.get(url);
}
app.controller("inceptionpinsCtrl", function ($scope,myPinService) {
$scope.iwork = "Yes confirm that am working";
var self = this;
$scope.maxsize = 5;
$scope.totalcount = 0;
$scope.page = 1;
$scope.pagesize = 10;
//fetch daily new pins from service
$scope.registeredPins = function() {
$scope.$emit('LOAD')
var servercall = myPinService.getFromInceptionPinsFromDB($scope.page, $scope.pagesize);
servercall.then(function (responds) {
//data = responds.data
$scope.datasubscriber = responds.data.items
$scope.totalcount = responds.data.totalItems
console.log($scope.datasubscriber)
$scope.$emit('UNLOAD')
}).catch(function (e) {
bootbox.alert("data could not be fetched see the admin!");
console.log(e)
});
}
$scope.registeredPins();
//page change
$scope.pagechanged = function () {
$scope.registeredPins();
}
$scope.changePageSize = function () {
$scope.page = 1;
$scope.registeredPins();
}
})
html
div class="bs-example" ng-controller="inceptionpinsCtrl">
<table class="table table-condensed table-striped">
<thead>
<tr>
<th>firstName</th>
<th>lastName</th>
<th>otherName</th>
<th>employerName</th>
<th>employerCode</th>
<th>fundName</th>
<th>fundId</th>
<th>pin</th>
<th>pinInvalid</th>
<th>datefetched</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in datasubscriber">
<td> {{user.firstName}}</td>
<td> {{user.lastName}}</td>
<td> {{user.otherName}}</td>
<td> {{user.employerName}}</td>
<td> {{user.employerCode}}</td>
<td> {{user.fundName}}</td>
<td> {{user.fundId}}</td>
<td> {{user.pin}}</td>
<td> {{user.pinInvalid}}</td>
<td> {{user.dateDetchedFromSipmlDatabase}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center" colspan="6">
<span class="form-group pull-left pagesize form-inline">
<select id="ddlPageSize" class="form-control control-color"
ng-model="pagesize" ng-change="changePageSize()">
<option value="5">5</option>
<option value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</span>
<div class="pull-right">
<ul uib-pagination total-items="datasubscriber.length" items-per-page="10" ng-model="page" max-size="maxsize" boundary-link-numbers="true" num-pages="numPages" force-ellipses="true" ng-change="pagechanged()" class="pagination-sm"></ul>
<a class="btn btn-primary"> Page : {{page}} / {{numPages}}</a>
</div>
</td>
</tr>
</tfoot>
</table>
</div>