I'm using angular datatable to populate list of users in my application and following this simple Angular Way. All code is working fine except the pagination button click. I gives proper numbering according to data but when i click anyone of them, it does not move to that list of data. I've added its libraries and this is my html code
<table datatable="ng" class="table table-striped table-bordered">
<thead>
<tr>
<th>User Name</th>
<th>First Name</th>
<th>Last Name</th>
<th>Cell No.</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in allUsers">
<td>{{ user.UserName }}</td>
<td>{{ user.FirstName }}</td>
<td>{{ user.LastName }}</td>
<td>{{ user.CellNo }}</td>
<td>{{ user.Email }}</td>
<td><button type="button" ng-click="btnView_Click(user.Id)" class="btn btn-info"><i class="fa fa-edit"></i> View</button></td>
</tr>
</tbody>
</table>
and this is how its showing buttons But nothing happens when I click any of these buttons (e.g Prev, 1,2,...Next)
I don't know how to create a fiddle for this. Can anyone have any guesses what I'm missing? and why this is happening??
Related
I'm using ng-zorro with Angular to show pagination in a table with data from a REST API request.
But when I add the ng-template (#rangeTemplate) to show the request total items, the next and previous buttons of pagination don't work anymore (it brakes the GET request).
<nz-table #searchResultUsersTable
[nzPageIndex]="pageIndex"
[nzPageSize]="pageSize"
[nzShowTotal]="rangeTemplate"
[nzData]="curedUserList"
[nzTotal]="totalUser"
nzShowSizeChanger="true"
[nzPageSizeOptions]="pageSizeOptions"
nzFrontPagination="false"
nzPaginationPosition="bottom"
[nzScroll]="{ y: '500px' }"
(nzQueryParams)="onQueryParamsChange($event)"
[nzNoResult]="emptyTable">
<thead>
<tr>
<th>Auth0 ID</th>
<th nzColumnKey="last_login" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-LAST-LOGIN' | translate }}</th>
<th nzColumnKey="email" [nzSortFn]="true">{{ 'SEARCH.RESULT.COLUMN-EMAIL' | translate }}</th>
<th>Applications</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of searchResultUsersTable.data">
<td>{{ data.auth0Id }}</td>
<td>{{ data.last_login | date }}</td>
<td>{{ data.email }}</td>
<td>{{ data.app }}</td>
</tr>
</tbody>
<ng-template #rangeTemplate let-range="range" let-total>
{{ range[0] }}-{{ range[1] }} of {{ total }} items
</ng-template>
</nz-table>
Anybody knows how to fix it?
I have data returned from api with this format :
[
{
"game": "Among Us",
"playTime": 5000,
"genre": "Multiplayer",
"platforms": [
"PC",
"Android"
]
}
]
I'm showing it into bootstrap table, but the platforms content won't be displaying ! how to loop for it ?
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Game</th>
<th scope="col" sortable="name">Genre</th>
<th scope="col" sortable="area">Plateforms</th>
<th scope="col" sortable="population">Total play time</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let game of topGamesUsers">
<td>
{{ game.game }}
</td>
<td>{{ game.genre }}</td>
<td>{{ game.plateforms }}</td>
<td>{{ game.users }}</td>
</tr>
</tbody>
</table>
should I store them into another variable or I can do this in html file ?
You can show it as a comma separated string in the row by using =>
<td>{{ game.platforms.join() }}</td>
You can try like this.
<td>
<div *ngFor="let platform of game.platforms"></div>
</td>
I want to display number of records of AngularJS , sample "1 to 10 of 15 records". Everything is working and I want to apply the page number. I'm using dir-paginate AngularJS , Is there easy way to achieve this? really appreciate your help. Here is my code:
HTML CODE:
<table class="primary-table">
<thead>
<tr>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Contact Number</th>
<th>Address</th>
<th>Position</th>
<th>Status</th>
<th>Date Added</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody class="tbodyrow">
<tr ng-if="members.length==0"><td colspan="11">No Records</td></tr>
<tr ng-if="members.length>0" dir-paginate="member in members|orderBy:sortKey:reverse|filter:search|itemsPerPage:5">
<td>{{ member.username }}</td>
<td>{{ member.first_name }}</td>
<td>{{ member.last_name }}</td>
<td>{{ member.email }}</td>
<td>{{ member.contact }}</td>
<td>{{ member.address }}</td>
<td>{{ member.position }}</td>
<td>{{ member.status }}</td>
<td>{{ member.dateadded }}</td>
<td>Edit</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot class="tfootrow">
<tr>
<td colspan="11">
<div class="grid2">
<div><!--number of records info here--></div>
<div>
<dir-pagination-controls max-size="5"
direction-links="true" boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
</td>
</tr>
</tfoot>
</table>
JS CODE:
angular.module('app', ['angularUtils.directives.dirPagination']);
angular.module('app').controller('AdminController', function($scope, $http){
this.fetch = function(){
$http.get("../Ajax/Administrator/fetch.php").then(function (response) {
$scope.members = response.data;
});
}
});
Since you already know the page size you can use a model variable to assign the value and access the total lentgh of the array using array.length
<h3> 1 to {{ pageSize }} of {{members.length}} records</h3>
DEMO USING PLUNKER
I'm trying to mix a table with angular-ui's accordion but I can't figure out a way to do it.
I'm not a pro, writing directives. I wonder if such a bridge exist. To achieve something like this :
<table class="table table-hover table-condensed" thead>
<thead>
<tr>
<th>{{ data.profile.firstname }}</th>
<th>{{ data.profile.lastname }}</th>
<th>{{ data.profile.email }}</th>
<th>{{ data.profile.company_name }}</th>
<th>{{ data.profile.city }}</th>
</tr>
</thead>
<tbody accordion close-others="true">
<!-- <tr ng-repeat="client in clients" ng-click="goTo('profile/' + client.username);"> -->
<tr ng-repeat="client in clients" accordion-group is-open="client.isOpen">
<accordion-heading>
<td>{{ client.firstname }}</td>
<td>{{ client.lastname }}</td>
<td>{{ client.email }}</td>
<td>{{ client.company_name }}</td>
<td>{{ client.city }}</td>
</accordion-heading>
Accordion Content
</tr>
</tbody>
</table>
Though it's not working :( Is there anyone who succeded to achieve something like this ?
The result I'm looking for is for when I click on a line in the table, it does the same behavior of an accordion.
In my case I made it a bit primitive but maybe that would be a good solution for you as well. Look:
<tbody ng-repeat="person in people | orderBy:predicate:reverse" >
<tr ng-click="isOpen=!isOpen">
<td>{{person.name}}</td>
<td>{{person.job}}</td>
<td>{{person.age}}</td>
<td>{{person.grade}}</td>
</tr>
<tr ng-if="isOpen">
<td>Just an empty line</td>
</tr>
</tbody>
1) You can try div instead of table for main accordion. It works for me.
2) And here is the accordion table example done in JSFiddle below, i hope it will help you. http://jsfiddle.net/Pixic/VGgbq/
I have the following:
<select
data-ng-model="option.selectedValue"
data-ng-options="item.id as item.name for item in option.selects">
</select>
<table>
<thead>
<tr>
<th>Id</th>
<th>City</th>
<th>Street</th>
</tr>
</thead>
<tbody class="grid">
<tr data-ng-repeat="row in grid.data">
<td>{{ row.iD }}</td>
<td>{{ row.city }}</td>
<td>{{ row.street }}</td>
</tr>
</tbody>
</table>
Is there a way for me to change it so the street column becomes visible only if the option.selectedValue is equal to 0
Try this on your {{row.street}} and street lines
<th ng-show='option.selectedValue == 0'>Street</th>
...
<td ng-show='option.selectedValue == 0'>{{row.street}}</td>
or
<th ng-hide="option.selectedValue != 0">Street</th>
...
<td ng-hide='option.selectedValue != 0'>{{row.street}}</td>
it's the same ;)
Use ng-show. You need to hide both header column and the content column.
<th ng-show="option.selectedValue == 0">Street</th>
<td ng-show="option.selectedValue == 0">{{ row.street }}</td>
Demo