In node-red I am calling an API and displaying that in a table with sorting but how can I include pagination with amount of elements per page. Below is the code.
<style>
th{
text-align: center;
}
a {
color:#FFFFFF;
text-decoration: inherit;
font-family: Impact, Charcoal, sans-serif;
}
table, th , td {
border: 2px solid black;
border-collapse: collapse;
padding: 5px;
}
input, select, textarea {
font-size: 100%;
width: 98%;
height: 100%;
}
button{
width:15px;
}
table {
color: #333;
font-family: Helvetica, Arial, sans-serif;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
td, th {
/* No more visible border */
height: 30px;
transition: all 0.3s;
/* Simple transition for hover effect */
}
th {
background: #DFDFDF;
/* Darken header a bit */
font-weight: bold;
}
td {
background: #FAFAFA;
}
/* Cells in even rows (2,4,6...) are one color */
tr:nth-child(even) td {
background: #F1F1F1;
}
/* Cells in odd rows (1,3,5...) are another (excludes header cells) */
tr:nth-child(odd) td {
background: #6b6767;
}
tr td:hover {
background: #666;
color: #FFF;
}
/* Hover cell effect! */
.animate-enter,
.animate-leave
{
-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.animate-enter.animate-enter-active,
.animate-leave {
opacity: 1;
top: 0;
height: 30px;
}
.animate-leave.animate-leave-active,
.animate-enter {
opacity: 0;
top: -50px;
height: 0px;
}
.container
{
max-height: 450px;
overflow-y: scroll;
overflow-x: hidden;
}
</style>
<div>
<form>
<span class="input-group">
<i class="fa fa-search"></i>
<input type="text" class="form-control" placeholder="Search" ng-model="search">
</span>
</form>
<div class="container" ng-app="sortApp">
<table>
<thead>
<tr style="width:100%">
<td>
<a href="#">
Index
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'macId'; sortReverse = !sortReverse">
macId
<span ng-show="sortType == 'macId' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'macId' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = '(deviceType -0)'; sortReverse = !sortReverse">
deviceType
<span ng-show="sortType == '(deviceType -0)' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == '(deviceType -0)' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'deviceName'; sortReverse = !sortReverse">
deviceName
<span ng-show="sortType == 'deviceName' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'deviceName' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'latitude'; sortReverse = !sortReverse">
latitude
<span ng-show="sortType == 'latitude' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'latitude' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'longitude'; sortReverse = !sortReverse">
longitude
<span ng-show="sortType == 'longitude' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'longitude' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'updatedTime'; sortReverse = !sortReverse">
deviceName
<span ng-show="sortType == 'updatedTime' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'updatedTime' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in msg.options | orderBy:sortType:sortReverse | filter:search track by $index" ng-click="msg.payload = user;send(msg);" style="width:100%" flex>
<td><b ng-bind="$index+1"></b></td>
<td ng-bind="user.macId"></td>
<td ng-bind="user.deviceType"></td>
<td ng-bind="user.deviceName"></td>
<td ng-bind="user.latitude"></td>
<td ng-bind="user.longitude"></td>
<td ng-bind="user.updatedTime"></td>
</tr>
</tbody>
</table>
</div>
</div>
I found one example bu how can I include the libraries http://www.expertphp.in/article/how-to-apply-search-sort-and-pagination-in-angularjs-example-using-dir-pagination-controls