Can someone please help me with the code below? I am having an issue where my page 1 is not displaying any data and it only starts showing data from page 2. I've been trying to solve this for the past 3 hours with no success. I am new to angularjs and would greatly appreciate any assistance. Here is the code:
/HTML
<table class="table table-hover" aria-describedby="dataTables-example_info" role="grid" class="table table-striped table-bordered table-hover dataTable no-footer" id="dataTables-example">
<thead>
<tr role="row">
<th style="width: 360px;" colspan="1" rowspan="1">Class</th>
<th style="width: 360px;" colspan="1" rowspan="1">Section</th>
<th style="width: 260px;" colspan="1" rowspan="1">Edit Subjects</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="info in data.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage))">
<td>{{info.class_name}}</td>
<td>{{info.section_name}}</td>
<td> <button ng-click="moreinformation(info)" type="button" class="btn btn-info btn-flat"><i class="fa fa-pencil"></i></td>
</tr>
</tbody>
</table>
<ul class="pagination">
<li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next">
<a ng-click="prevPage()">« Prev</a>
</li>
<li ng-repeat="n in range(totalItems)"
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1"></a>
</li>
<li class="paginate_button next" aria-controls="dataTables-example" tabindex="0" id="dataTables-example_next">
<a ng-click="nextPage()">Next »</a>
</li>
</ul>
//JS CODE...
$scope.itemsPerPage =10;
$scope.currentPage = 0;
$scope.totalItems = $scope.data.length / 10 ;
$scope.data = [{ "class_name": "CLASS1", "section_name":"A" }, { "class_name": "CLASS2", "section_name": "A" }];
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function () {
console.log($scope.totalItems);
if ($scope.currentPage < $scope.totalItems - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function () {
console.log(this.n);
if (this.n == 0)
{
$scope.currentPage++;
}
else
{
$scope.currentPage = this.n;
}
};
$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;
};