smart-table pager not working - angularjs

I have a Asp.net MVC project with AngularJs as javascript framework.
I am using smart-table angular plugin for my table\grid requirement. Everything works fine but the pager is not showing up at all on page.
Below is my html code:
<div data-ng-controller="gridcontroller" class="row">
<label>Grid demo</label>
<table data-st-table="griddata" class="table striped">
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>birth date</th>
<th>balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="row in griddata">
<td data-ng-bind='row.firstName'></td>
<td data-ng-bind='row.lastName'></td>
<td data-ng-bind='row.birthDate'></td>
<td data-ng-bind='row.balance'></td>
<td data-ng-bind='row.email'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-template="~/Scripts/Angular/Plugins/pagination.html" st-pagination=""
st-items-by-page="10">
</div>
</td>
</tr>
</tfoot>
</table>
Pagination.html markup is as below:
<div class="pagination" ng-if="pages.length >= 2">
<ul class="pagination">
<li ng-if="currentPage > 1">
<a ng-click="selectPage(1)"><<</a>
</li>
<li ng-if="currentPage > 1">
<a ng-click="selectPage(currentPage-1)"><</a>
</li>
<li ng-repeat="page in pages" ng-class="{active: page==currentPage}">
<a ng-click="selectPage(page)">{{page}}</a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(currentPage+1)">></a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(numPages)">>></a>
</li>
</ul>
When I run the site I see the grid with all records (60 in my case) and the pager markup is shown as below:
<tfoot>
<tr>
<td colspan="5" class="text-center">
<div st-template="/Scripts/Angular/Plugins/pagination.html" st-pagination="" st-items-by-page="itemsByPage" class="ng-isolate-scope">
<!-- ngIf: pages.length >= 2 -->
</div>
</td>
</tr>
</tfoot>
I did every step as mentioned on the site but can't make the pager work.
Any help is deeply appreciated.

Hi if you are using server side pagination then you need to tell smart table about the number of pages, so that it will get the clue about the pages it is going to display and bind its event upon it
tablestate.pagination.numberOfPages = response.totalPages;
you have to set the total number of pages from the response to the tablestate's pagination object numberOfPages property.

Related

Unique DT Instance with Angular DataTables

I have Datatable in ng-repeat and want to be able to generate a unique dt-instance for all datatables in UI. This way I can have a unique instance of each table. Here is my template file with what is going on
<li ng-repeat="batch in vm.batches">
<div ng-show="batch.opened.submitted">
<table datatable="ng" class="table table-condensed dataTable" dt-options="vm.dtOptions" dt-instance="**I WANT TO BE ABLE TO SET THIS TO SOMETHING UNIQUE**">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in batch.PricingItems">
<td>
<a href="javascript:;" ng-click="childInfo(item, batch.dtInstance, $event)" title="Click to view more">
<i class="glyphicon glyphicon-plus-sign"></i>
</a>
</td>
</tr>
</tbody>
</table>
</div>
</li>
You can make it unique by passing the $index value of the ng-repeat.
<li ng-repeat="batch in vm.batches track by $index">
<div ng-show="batch.opened.submitted">
<table datatable="ng" class="table table-condensed dataTable" dt-options="vm.dtOptions" dt-instance="$index">

How can I set the first accordion item in the ngRepeat to be open while the rest are not?

I'm creating a list of tables with collapsible tbodys. This code works fine but I want to have the first tbody open on default. I've tried ng-init="showReports0" on the table tag, but this doesn't work. I've also tried to predefine $scope.showReports0 = true; in the controller. Can anyone help me out here?
<table ng-repeat="set in reportsData" class="table table-striped hover-table report-list" id="reportList-{{$index}}" ng-init="showReports0">
<thead>
<tr>
<th colspan="3" class="trigger-man" ng-model="showReports[$index]" ng-click="showReports[$index] = !showReports[$index]" style="width: 100%;">{{set.type}}<span class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': showReports[$index], 'glyphicon-chevron-right': !showReports[$index]}"></span></th>
</tr>
</thead>
<tbody ng-hide="!showReports[$index]">
<!-- Start Dynamic Reports Content -->
<tr class="hover-check" ng-class="{'compare-row disabled': item.type=='Comparative' && selectionData.length == 1, 'rep-checked': item.checked}" ng-repeat="item in set.reports | orderBy : 'sequence'">
<td class="no-pad"><div href="" class="popup pop-details no-match" uib-popover-template="nomatchPopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
<label class="checkbox checky">
<input type="checkbox" ng-change="reportPush(item.checked, item)" ng-true-value="true" ng-false-value="false" ng-model="item.checked" class="hidden">
</label></td>
<td class="rep-list-td"><div href="" class="popup pop-details no-compare" uib-popover-template="comparePopover.templateUrl" popover-trigger="outsideClick" popover-placement="auto"></div>
{{item.name}}</td>
<td class="cell-details">Details</td>
</tr>
</tbody>
</table>

AngularJs table in double ng-repeat

I am trying to visualize an json-object in a table like this :
<div ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</div>
If I do that I will see only a white screen.
This way works, but I need the data in an table.
<div ng-repeat="item in data">
<ul ng-repeat="i in item">
<div>
{{ i.id }}
{{ i.ip }}
</div>
</ul>
</div>
Do you know a possible solution with a table?
try this
<table>
<tbody ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</tbody>
</table>
I found the mistake! The first ng-repeat must be in the table statement.
<table class="table table-striped">
<thead>
<tr>
<td>id</td>
<td >ip</td>
</tr>
</thead>
<tbody ng-repeat="item in data">
<tr ng-repeat="i in item">
<td>{{i.id}}</td>
<td>{{i.ip}}</td>
</tr>
</tbody>
</table>

Bootstrap dropdown using accordion is not working

I am implementing bootstrap dropdown in my Angular application using accordion. When I click on accordion toggle, it is not sliding down and up.
This is my code:
<div class="container-fluid mt100 mr5 ml5">
<div class="row">
<table class='table s12'>
<tr style="background: #e4e9eb;">
<td>Name</td>
<td>Address</td>
<td>City</td>
<td>Edit</td>
<td></td>
</tr>
<tr ng-repeat="listItem in Items">
<td>
{{listItem.name}}
</td>
<td>
{{listItem.address}}
</td>
<td>
{{listItem.city}}
</td>
<td>
<a class="dropdown-toggle" ng-click="isCollapsed = !isCollapsed" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
</a>
</td>
</tr>
<tr>
<td colspan="3" class="hiddenRow">
<div class="collapse" collapse="isCollapsed">
<table class="table display" style="border-collapse:collapse;">
<thead>
<tr class='pix2' style="background: #e4e9eb;">
<th>First</th>
<th>Second</th>
<th>Third</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='item in listItem.subItems'>
<td>{{item.first}}</td>
<td>{{item.second}}</td>
<td>{{item.third}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
What is causing the issue?

AngularJS(1.3.0-rc.2): data-ng-repeat-end animation issue

Im wondering why an animation will not work on the <tr> element in this case (plnkr):
<tr data-ng-repeat-end data-ng-show="employee.show" class="animate-show">
<td colspan="5">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
But will work on the <td> element when written like this (plnkr):
<tr data-ng-repeat-end ng-animate-children>
<td colspan="5" data-ng-show="isToggled[$index]" class="animate-show">
<div class="employeeInfo">
<img ng-src="http://placehold.it/{{employee.size}}" />Employee info
</div>
</td>
</tr>
Why is this happening, and what can be done to achive animation on the <tr> with data-ng-repeat-end attribute?

Resources