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
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…