at the moment I have list of events with a pagination on the bottom of the list. That works well, but now I want to add a addintional pagination on the to of the list. When I now change the pagination on the bottom the pagination on the top is not updated.
My working code is:
<tbody>
<tr dir-paginate="event in events | orderBy:['id', 't']:true | itemsPerPage: dirPaginate.pageSize" current-page="dirPaginate.currentPage">
<td><i class="{{ ::(event.el | eventtype).icon }}" tooltip="{{ ::(event.el | eventtype).tooltip }}"></i></td>
<td class="hidden-xs">{{::event.nr}}</td>
<td><span ng-bind-html="::('' + event.tg | eventMessage:event.d:'html')"></span>
<span class="visible-xs"> ({{::event.nr}})</span>
</td>
<td>{{ ::(event.t * 1000 | date:'mediumDate')}} <span class="visible-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</span></td>
<td class="hidden-xs">{{ ::(event.t * 1000 | date:'mediumTime')}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="paginationContainer"><dir-pagination-controls></dir-pagination-controls></td>
</tr>
</tfoot>
How can I uptate both paginations when one of them is changed?
Download dirPagination.js from here. .
Now include dirPagination.js to your page.
Add angularUtils.directives.dirPagination in your module like this
var app = angular.module("myApp",
['angularUtils.directives.dirPagination']);
4.we use dir-paginate directive for pagination add dir-paginate in tr tag
<tr dir-paginate="event in events|orderBy:['id', 't']:true |
itemsPerPage: dirPaginate.pageSize">
5.Add below given code on upper and lower side of your grid .it will automatically update page no. in both pagination controls.
<dir-pagination-controls
max-size="5"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
Related
I'm experiencing performance issues when using ng-repeat for long lists (thousands of records) that need to be shown within a table.
Here is the HTML I'm using:
<table class="table table-hover">
<thead>
<tr>
<th ng-repeat="One_Header in Data_List.Header track by $index">{{One_Header}}</th>
</tr>
</thead>
<tbody>
<tr ng-model="Data_List" ng-repeat="One_Source in Data_List.Body track by $index" style="cursor:pointer">
<td ng-repeat="One_Data_Field in One_Source track by $index">{{One_Data_Field}}</td>
</tr>
</tbody>
</table>
The received JSON (takes about 1 second to get it from the server) contains the data as follows:
"Data":{
"Header":["Title_1","Title_2","Title_3"],
"Body":[
["Rec_1_Data_1","Rec_1_Data_2","Rec_1_Data_3"],
["Rec_2_Data_1","Rec_2_Data_2","Rec_2_Data_3"],
["Rec_3_Data_1","Rec_3_Data_2","Rec_3_Data_3"],
:
["Rec_n_Data_1","Rec_n_Data_2","Rec_n_Data_3"]
]
}
I also tried one-directional binding (i.e. {{::One_Data_Field}}) without any noticeable improvement.
As stated above, response arrives within a second and then it takes up to 10 seconds for the table to be built.
in order to improve the performance, you can use pagination directives created using angular js.
Angular-Paging
pagination
If you are using Angular material design then I would highly recommend using virtual repeat
virtual repeat
you can try this sample pagination implementation:
var pageSize = 15;
$scope.paginationLimit = function(pagesShown) {
return pageSize * pagesShown.count;
};
$scope.hasMoreItemsToShow = function(list, pagesShown) {
return pagesShown.count < (list.length / pageSize);
};
$scope.showMoreItems = function(pagesShown) {
pagesShown.count = pagesShown.count + 1;
};
<tr ng-model="Data_List" ng-repeat="One_Source in Data_List.Body track by $index " style="cursor:pointer">
<td ng-repeat="One_Data_Field in One_Source track by $index | limitTo: paginationLimit(pagesShown)">{{One_Data_Field}}</td>
</tr>
//sample row with show more button
<tr class="showMore">
<td></td>
<td class="showBtn">
<button type="button" class="btn btn-primary btn-lg" ng-init="pagesShown={'count': 1}" ng-click="showMoreItems(pagesShown)" ng-show="hasMoreItemsToShow(One_Source track, pagesShown)">Show More</button>
</td>
<td></td>
</tr>
I'm trying for hours to figure out why is my md-data-table only sorting the current page.
The same thing is happening on the search filter.
Can someone say why is it doing this and how can i fix it?
<input ng-model="searchInterview">
<md-table-container>
<table md-table="" md-progress="promise" ng-model="selected">
<thead md-head md-order="sort.order">
<tr md-row>
<th md-column md-order-by="dataapplicazione"><span>Data app</span></th>
<th md-column md-order-by="nomecognome"><span>Nome e cognome</span></th>
</tr>
</thead>
<tbody md-body>
<tr md-row ng-repeat="item in main.interviewsList | limitTo: sort.limit : (sort.page -1) * sort.limit | orderBy:sort.order | filter:searchInterview ">
<td md-cell>{{ item.dataapplicazione | date}}</td>
<td md-cell>{{ item.nomecognome }}</td>
</tbody>
</table>
</md-table-container>
<md-table-pagination md-limit="sort.limit" md-limit-options="limitOptions" md-page="sort.page" md-total="{{main.interviewsList.length}}" md-on-paginate="promiseInterviews" md-page-select></md-table-pagination>
Sorting Desc
Sorting Asc
Maybe change the order of the filters?
Also; this is in the documentationof mg-data-table:
My Pagination Isn't Working?!
Make sure you pass md-page, md-limit, and md-total to the directive and that they are finite numbers.
Pages are not zero indexed. The directive will assume pages start at one. If your query language expects pages to be zero indexed then just subtract one before making the query.
My question is - I think - pretty simple.
I have a table, a classic one. In this table, I want to display values of two arrays named networks and channels.
Each network in networks could contain channels but not all.
What I want is to display all the networks and their related channels.
In DIV or TD in TR it's simple but I can't do this with multiple TR.
Example :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="channel in channels | filter: { networkId: network.networkId}">{{channel.Name}}</td>
</tr>
Works like a charm!
But I'm searching thing like this :
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
</tr>
But I know that is not the good code to do this :)
Someone know how to do that ?
I don't want to change the TABLE by DIV.
Kind regards !
Each ng-repeat has its own scope so your network is not available on the second TR repeat.
If you really want to stick with table, you can create a table inside your tr like this:
<tr ng-repeat="network in networks">
<td>{{network.Name}}</td>
<td ng-repeat="month in year">{{month.Name}}</td>
<td>
<table>
<tr ng-repeat="channel in channels | filter: { networkId: network.networkId}">
<td>{{channel.Name}}</td>
</tr>
</table>
</td>
</tr>
I am trying to add filter in one of my columns that sorts by name.
<tbody>
<tr ng-repeat="setting in detailsExample.versionExample.settings | orderBy:'setting.name'">
<td>{{setting.name}}</td>
<td>{{setting.type}}</td>
</tr>
</tbody>
Am I on the right track here using orderBy:'setting.name' ?
Just name is enough in the filter. it is been well explained here
https://docs.angularjs.org/api/ng/filter/orderBy
so your answer will be
<tbody>
<tr ng-repeat="setting in detailsExample.versionExample.settings | orderBy:'name'">
<td>{{setting.name}}</td>
<td>{{setting.type}}</td>
</tr>
</tbody>
It should be 'name' only, also you could have 3rd option which would say reverse order of an array then you could set orderBy:'name': true
<tr ng-repeat="setting in detailsExample.versionExample.settings | orderBy:'name'">
This is my code:
<div ng-repeat="cat in categs | filter:searchText">
<div><h1 id="{{cat.id}}">{{cat.title}}</h1></div>
<table>
<tbody>
<tr ng-repeat-start="subcat in cat.data | filter:searchText">
<th><h2 id="{{cat.id}}_{{subcat.id}}">{{subcat.title}}</h2></th>
</tr>
<tr ng-repeat-start="subsubcat in subcat.data | filter:searchText">
<td><h3 id="{{cat.id}}_{{subcat.id}}_{{subsubcat.id}}">{{subsubcat.title}}</h3></td>
</tr>
<tr>
<th>Nombre</th>
<th>Descripcion</th>
<th>Enlace</th>
</tr>
<tr ng-repeat-end ng-repeat="item in subsubcat.data | filter:searchText">
<td>{{item.name}}</td>
<td>{{item.about}}</td>
<td>{{item.urltext}}</td>
</tr>
<tr ng-repeat-end>
<td></td>
</tr>
</tbody>
</table>
</div>
and the current filtering isn't working for what I want to do, that is:
If the title of h1,h2 or h3 matches searchText, then show everything nested inside (don't filter anything inside).
But if neither h1,h2 or h3 matches searchText but what's in the last ng-repeat-start matches something, filter only what matched.
To explain myself better, here is an example:
Vehicles
Cars
BMW
item1: green
item2: red
item3: black
Toyota
Bikes
If searchText is:
vehicles : it shows everything.
cars : it shows vehicles header and cars header(and everything under) but doesn't show bikes (unless the the text "cars" appears in some subheader inside bikes or in some item)
black : only shows Vehicles, Cars and BMW headers and only item3.
The problem of the current code is that, if I remove the filter from the last ng-repeat-start it does what I want to do in the cars example but doesn't work for the black example.