Angular Pagination

<div ng-controller="ctrlRead">
<table class="table table-striped table-condensed table-hover">

<thead>
<tr>
<th class="id" custom-sort order="'id'"
sort="sort">Id </th>
<th class="name" custom-sort order="'name'"
sort="sort">Name </th>
<th class="description" custom-sort order="'description'"
sort="sort">Description </th>
<th class="field3" custom-sort order="'field3'"
sort="sort">Field 3 </th>
</tr>
</thead>
<tfoot>
<td colspan="6">
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: currentPage == 0}">
<a href ng-click="prevPage()">� Prev</a>
</li>
<li ng-repeat="n in range(pagedItems.length,

currentPage, currentPage + gap) "
ng-class="{active: n == currentPage}"
ng-click="setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: (currentPage) ==

pagedItems.length - 1}">
<a href ng-click="nextPage()">Next �</a>
</li>
</ul>
</div>
</td>
</tfoot>
<pre>pagedItems.length: {{pagedItems.length|json}}</pre>
<pre>currentPage: {{currentPage|json}}</pre>
<pre>currentPage: {{sort|json}}</pre>
<tbody>
<tr ng-repeat="item in pagedItems[currentPage] |
orderBy:sort.sortingOrder:sort.reverse">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.description}}</td>
<td>{{item.field3}}</td>
</tr>
</tbody>
</table>
</div>
-----------------------------------------------------------------------------------
-----
var fessmodule = angular.module('myModule', []);
fessmodule.controller('ctrlRead', function ($scope, $filter) {
// init
$scope.sort = {
sortingOrder : 'id',
reverse : false
};
$scope.gap = 5;
$scope.filteredItems = [];
$scope.groupedItems = [];
$scope.itemsPerPage = 5;
$scope.pagedItems = [];
$scope.currentPage = 0;
$scope.items = [
{"id":1,"name":"name 1","description":"description 1","field3":"field3
1","field4":"field4 1","field5 ":"field5 1"},
20","field4":"field4 20","field5 ":"field5 20"}
];
var searchMatch = function (haystack, needle) {

if (!needle) {
return true;
}
return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
};
// init the filtered items

$scope.search = function () {
$scope.filteredItems = $filter('filter')($scope.items, function (item) {
for(var attr in item) {
if (searchMatch(item[attr], $scope.query))
return true;
}
return false;
});
// take care of the sorting order
if ($scope.sort.sortingOrder !== '') {
$scope.filteredItems = $filter('orderBy')($scope.filteredItems,
$scope.sort.sortingOrder, $scope.sort.reverse);
}
$scope.currentPage = 0;
// now group by pages
$scope.groupToPages();
};
// calculate page in place
$scope.groupToPages = function () {
$scope.pagedItems = [];
for (var i = 0; i < $scope.filteredItems.length; i++) {

if (i % $scope.itemsPerPage === 0) {
$scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] =
[ $scope.filteredItems[i] ];
} else {
$scope.pagedItems[Math.floor(i /
$scope.itemsPerPage)].push($scope.filteredItems[i]);
}
}
};
$scope.range = function (size,start, end) {

var ret = [];
console.log(size,start, end);
if (size < end) {

end = size;
start = size-$scope.gap;
}
for (var i = start; i < end; i++) {
ret.push(i);
}
console.log(ret);
return ret;
};
$scope.prevPage = function () {
if ($scope.currentPage > 0) {
$scope.currentPage--;
}
};
$scope.nextPage = function () {
if ($scope.currentPage < $scope.pagedItems.length - 1) {
$scope.currentPage++;
}
};
$scope.setPage = function () {
$scope.currentPage = this.n;
};
// functions have been describe process the data for display

$scope.search();
});
fessmodule.$inject = ['$scope', '$filter'];
fessmodule.directive("customSort", function() {
return {
restrict: 'A',
transclude: true,
scope: {
order: '=',
sort: '='
},
template :
' <a ng-click="sort_by(order)" style="color: #555555;">'+
' <span ng-transclude></span>'+
' <i ng-class="selectedCls(order)"></i>'+
'</a>',
link: function(scope) {
// change sorting order

scope.sort_by = function(newSortingOrder) {
var sort = scope.sort;
if (sort.sortingOrder == newSortingOrder){
sort.reverse = !sort.reverse;
}
sort.sortingOrder = newSortingOrder;
};
scope.selectedCls = function(column) {
if(column == scope.sort.sortingOrder){
return ('icon-chevron-' + ((scope.sort.reverse) ? 'down' : 'up'));
}
else{
return'icon-sort'
}
};
}// end link
}
});
--------------------------------------------------------------------------------
JQuery codes
$("#test td").on("mouseover",function(){
alert($(this).text())
})
-- Clear table rows
var tb = document.getElementById('table');
while(tb.rows.length > 1) {
tb.deleteRow(1);
}
-- button click event

$("#submitorder").click(function(){
});
-- Hide components based on ID

$("#submitorder").hide();
-- get contents from the input with json variable
var qid = {q:$('#po_id').val()};
-- event click in table

$('#table2').on('click', 'tbody tr', function() {
console.log('API row values : ', table2.row(this).data());
var data = table2.row(this).data().map(function(item, index) {
var r = {}; r=item; return r;
});
/*console.log(data[0]);*/
$('#table').dataTable().fnDestroy();
var qid = {q:data[0]};
-----
-----
});
-- load document ready

<script type="text/javascript">
var save_method; //for save method string
var table;
var table2;
$(document).ready(function() {
});
</script>
- request ajax
if(confirm("Are you sure you want to remove this?"))

{
$.ajax({
url:"<?php echo base_url(); ?>admin/entry/remove",
method:"POST",
data:{row_id:row_id},
success:function(data)
{
//alert("Product removed from Cart");
$('#cart_details').html(data);
}
});
}
else
{
return false;
}
-- get session data

$q = $this->session->userdata('uid');
-- return specific field/column

public function check_if_exist($itemid, $uid)
{
$variable = 0;
$this->db->where('itemid', $itemid);
$this->db->where('userid', $uid);
$query = $this->db->get($this->table);
if ($query->num_rows()>0){
$variable = $query->row("invtid");
}
return $variable;
}
----------------------------------------------------------------------
-- added to class
- mycart.php (app/lib)
- po from supplier (entry_supplier)
-- edited
- view_inventory
- entry

Angular Pagination

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Angular Pagination

Uploaded by

Copyright:

Available Formats

<div ng-controller="ctrlRead">

<table class="table table-striped table-condensed table-hover">

<li ng-repeat="n in range(pagedItems.length,

<li ng-class="{disabled: (currentPage) ==

fessmodule.controller('ctrlRead', function ($scope, $filter) {

var searchMatch = function (haystack, needle) {

// init the filtered items

for (var i = 0; i < $scope.filteredItems.length; i++) {

$scope.range = function (size,start, end) {

if (size < end) {

// functions have been describe process the data for display

fessmodule.$inject = ['$scope', '$filter'];

// change sorting order

-- Clear table rows

-- button click event

-- Hide components based on ID

-- event click in table

-- load document ready

if(confirm("Are you sure you want to remove this?"))

-- get session data

-- return specific field/column

You might also like