角度数据表 - 获取当前页面 &总页数 [英] Angular datatable - get current page & Total page
问题描述
我正在使用 Angular 数据表.我需要获取当前页码和总页码并如下图所示
在下面的 SO 链接中，提供了一个使用选项(在我的代码中，我使用了 vm 而不是范围)
$scope.dtInstance.DataTable.page()
我的 HTML 表格代码:
控制器代码:
var vm = this;vm.items = [];vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full').withDisplayLength(10).withOption('bFilter', false).withDOM('<<<>左上拉itemtableInfo>i>rt<<<bottom<<<<<<<<>p>').withLanguage({"sInfo": '<div><span class="searchDetail">显示<b>\"'+$rootScope.searchValue+'\"</b>的_TOTAL_个结果</span><span class="searchCount pull-right">显示_START_到_END_</span><span class="testDiv">hello</span>',处理":处理..."，正在加载记录":正在加载..."，分页":{first":<i class="fa fa-backward"；aria-hidden="true"></i>',last":<i class="fa fa-forward"；aria-hidden="true"></i>',下一个":下一个"，上一个":上一个"}});vm.dtColumnDefs = [DTColumnDefBuilder.newColumnDef(0),DTColumnDefBuilder.newColumnDef(1).notSortable(),DTColumnDefBuilder.newColumnDef(2).notSortable(),DTColumnDefBuilder.newColumnDef(3),DTColumnDefBuilder.newColumnDef(4),DTColumnDefBuilder.newColumnDef(5),DTColumnDefBuilder.newColumnDef(6).notSortable(),DTColumnDefBuilder.newColumnDef(7),DTColumnDefBuilder.newColumnDef(8).notSortable()];vm.dtInstance = {};$resource('./scripts/controllers/data.json').query().$promise.then(function (items) {vm.items = 物品；});
但是我的 dtInstance 总是返回空对象并且无法在 dtInstance 中检索数据表或 page() 函数.
以下是我检查过的一些链接.寻求帮助.如果有人遇到过类似问题，请告诉我.
~~苏利亚
I am using Angular Datatable. I need to fetch the current page number and total page number and show it like the below image
In the below SO link, there is an option provided to use (in my code, i have used vm instead of scope)
$scope.dtInstance.DataTable.page()
My Table code in HTML :
<table datatable="ng" dt-options="itemTable.dtOptions" dt-instance="itemTable.dtInstance" dt-column-defs="itemTable.dtColumnDefs" class="table row-border hover">
Controller Code:
var vm = this;
vm.items = [];
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full')
.withDisplayLength(10)
.withOption('bFilter', false)
.withDOM('<"top pull-left itemtableInfo"i>rt<"bottom"<"#itemtablePageInfo">p>')
.withLanguage({
"sInfo": '<div><span class="searchDetail">Displaying _TOTAL_ results for <b>\"'+$rootScope.searchValue+'\"</b> </span><span class="searchCount pull-right">Showing _START_ to _END_</span><span class="testDiv">hello</span>',
"processing": "Processing...",
"loadingRecords": "Loading...",
"paginate": {
"first": '<i class="fa fa-backward" aria-hidden="true"></i>',
"last": '<i class="fa fa-forward" aria-hidden="true"></i>',
"next": "Next",
"previous": "Previous"
}
});
vm.dtColumnDefs = [
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notSortable(),
DTColumnDefBuilder.newColumnDef(2).notSortable(),
DTColumnDefBuilder.newColumnDef(3),
DTColumnDefBuilder.newColumnDef(4),
DTColumnDefBuilder.newColumnDef(5),
DTColumnDefBuilder.newColumnDef(6).notSortable(),
DTColumnDefBuilder.newColumnDef(7),
DTColumnDefBuilder.newColumnDef(8).notSortable()
];
vm.dtInstance = {};
$resource('./scripts/controllers/data.json').query().$promise.then(function (items) {
vm.items = items;
});
But my dtInstance is always returning me null object and cant retrieve either datatable or page() function in dtInstance.
Below are some of the links i have checked. Looking for some help.
please let me know if anyone has faced similar issues.
- Angular DataTable not populating DTInstance
- Paging is reset when data is updated with Angular-DataTables
- https://github.com/l-lin/angular-datatables/issues/312
解决方案 Finally i am able to fix the issue :):)
Below is the code. Please do let me know your suggestions.
vm.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full')
.withDisplayLength(5)
.withOption('bFilter', false)
.withOption('drawCallback', function(settings) {
if(settings.aoData.length > 0) {
var api = this.api();
var pgNo = api.page.info();
var currPg = pgNo.page;
var totalPg = pgNo.pages;
// get the label where i need to print the page number details
var myEl = angular.element(document.querySelector('#pgNoDetail'));
myEl.text('Page '+(currPg + 1)+' of '+totalPg);
}
})
.withDOM('<"top pull-left itemtableInfo"i>rt<"bottom"p>')
.withLanguage({
"sInfo": '<div><span class="searchDetail">Displaying _TOTAL_ results for <b>\"'+$rootScope.searchValue+'\"</b> </span><span class="searchCount pull-right">Showing _START_ to _END_</span>',
"processing": "Processing...",
"loadingRecords": "Loading...",
"paginate": {
"first": '<i class="fa fa-backward" aria-hidden="true"></i>',
"last": '<i class="fa fa-forward" aria-hidden="true"></i>',
"next": "Next",
"previous": "Previous"
}
});
Below is the final output.
~~Suriya
这篇关于角度数据表 - 获取当前页面 &总页数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
登录
关闭
扫码关注1秒登录
发送“验证码”获取
|
15天全站免登陆