Scribd
Upload
79 views

Angular Pagination

The document describes a table with paginated items that can be sorted by column. The table contains over 50 items with fields like ID, name, and description. JavaScript code is provided to handle pagination, sorting, and displaying the table contents.

Uploaded by

Anonymous IhmXvCHj3c
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
79 views

Angular Pagination

The document describes a table with paginated items that can be sorted by column. The table contains over 50 items with fields like ID, name, and description. JavaScript code is provided to handle pagination, sorting, and displaying the table contents.

Uploaded by

Anonymous IhmXvCHj3c
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

<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&nbsp;</th>
<th class="name" custom-sort order="'name'"
sort="sort">Name&nbsp;</th>
<th class="description" custom-sort order="'description'"
sort="sort">Description&nbsp;</th>
<th class="field3" custom-sort order="'field3'"
sort="sort">Field 3&nbsp;</th>
<th class="field4" custom-sort order="'field4'"
sort="sort">Field 4&nbsp;</th>
<th class="field5" custom-sort order="'field5'"
sort="sort">Field 5&nbsp;</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>
<td>{{item.field4}}</td>
<td>{{item.field5}}</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"},
{"id":2,"name":"name 2","description":"description 1","field3":"field3
2","field4":"field4 2","field5 ":"field5 2"},
{"id":3,"name":"name 3","description":"description 1","field3":"field3
3","field4":"field4 3","field5 ":"field5 3"},
{"id":4,"name":"name 4","description":"description 1","field3":"field3
4","field4":"field4 4","field5 ":"field5 4"},
{"id":5,"name":"name 5","description":"description 1","field3":"field3
5","field4":"field4 5","field5 ":"field5 5"},
{"id":6,"name":"name 6","description":"description 1","field3":"field3
6","field4":"field4 6","field5 ":"field5 6"},
{"id":7,"name":"name 7","description":"description 1","field3":"field3
7","field4":"field4 7","field5 ":"field5 7"},
{"id":8,"name":"name 8","description":"description 1","field3":"field3
8","field4":"field4 8","field5 ":"field5 8"},
{"id":9,"name":"name 9","description":"description 1","field3":"field3
9","field4":"field4 9","field5 ":"field5 9"},
{"id":10,"name":"name 10","description":"description 1","field3":"field3
10","field4":"field4 10","field5 ":"field5 10"},
{"id":11,"name":"name 11","description":"description 1","field3":"field3
11","field4":"field4 11","field5 ":"field5 11"},
{"id":12,"name":"name 12","description":"description 1","field3":"field3
12","field4":"field4 12","field5 ":"field5 12"},
{"id":13,"name":"name 13","description":"description 1","field3":"field3
13","field4":"field4 13","field5 ":"field5 13"},
{"id":14,"name":"name 14","description":"description 1","field3":"field3
14","field4":"field4 14","field5 ":"field5 14"},
{"id":15,"name":"name 15","description":"description 1","field3":"field3
15","field4":"field4 15","field5 ":"field5 15"},
{"id":16,"name":"name 16","description":"description 1","field3":"field3
16","field4":"field4 16","field5 ":"field5 16"},
{"id":17,"name":"name 17","description":"description 1","field3":"field3
17","field4":"field4 17","field5 ":"field5 17"},
{"id":18,"name":"name 18","description":"description 1","field3":"field3
18","field4":"field4 18","field5 ":"field5 18"},
{"id":19,"name":"name 19","description":"description 1","field3":"field3
19","field4":"field4 19","field5 ":"field5 19"},
{"id":20,"name":"name 5","description":"description 1","field3":"field3
5","field4":"field4 5","field5 ":"field5 5"},
{"id":21,"name":"name 6","description":"description 1","field3":"field3
6","field4":"field4 6","field5 ":"field5 6"},
{"id":22,"name":"name 7","description":"description 1","field3":"field3
7","field4":"field4 7","field5 ":"field5 7"},
{"id":23,"name":"name 8","description":"description 1","field3":"field3
8","field4":"field4 8","field5 ":"field5 8"},
{"id":24,"name":"name 9","description":"description 1","field3":"field3
9","field4":"field4 9","field5 ":"field5 9"},
{"id":25,"name":"name 10","description":"description 1","field3":"field3
10","field4":"field4 10","field5 ":"field5 10"},
{"id":26,"name":"name 11","description":"description 1","field3":"field3
11","field4":"field4 11","field5 ":"field5 11"},
{"id":27,"name":"name 12","description":"description 1","field3":"field3
12","field4":"field4 12","field5 ":"field5 12"},
{"id":28,"name":"name 13","description":"description 1","field3":"field3
13","field4":"field4 13","field5 ":"field5 13"},
{"id":29,"name":"name 14","description":"description 1","field3":"field3
14","field4":"field4 14","field5 ":"field5 14"},
{"id":30,"name":"name 15","description":"description 1","field3":"field3
15","field4":"field4 15","field5 ":"field5 15"},
{"id":31,"name":"name 16","description":"description 1","field3":"field3
16","field4":"field4 16","field5 ":"field5 16"},
{"id":32,"name":"name 17","description":"description 1","field3":"field3
17","field4":"field4 17","field5 ":"field5 17"},
{"id":33,"name":"name 18","description":"description 1","field3":"field3
18","field4":"field4 18","field5 ":"field5 18"},
{"id":34,"name":"name 19","description":"description 1","field3":"field3
19","field4":"field4 19","field5 ":"field5 19"},
{"id":35,"name":"name 5","description":"description 1","field3":"field3
5","field4":"field4 5","field5 ":"field5 5"},
{"id":36,"name":"name 6","description":"description 1","field3":"field3
6","field4":"field4 6","field5 ":"field5 6"},
{"id":37,"name":"name 7","description":"description 1","field3":"field3
7","field4":"field4 7","field5 ":"field5 7"},
{"id":38,"name":"name 8","description":"description 1","field3":"field3
8","field4":"field4 8","field5 ":"field5 8"},
{"id":39,"name":"name 9","description":"description 1","field3":"field3
9","field4":"field4 9","field5 ":"field5 9"},
{"id":40,"name":"name 10","description":"description 1","field3":"field3
10","field4":"field4 10","field5 ":"field5 10"},
{"id":41,"name":"name 11","description":"description 1","field3":"field3
11","field4":"field4 11","field5 ":"field5 11"},
{"id":42,"name":"name 12","description":"description 1","field3":"field3
12","field4":"field4 12","field5 ":"field5 12"},
{"id":43,"name":"name 13","description":"description 1","field3":"field3
13","field4":"field4 13","field5 ":"field5 13"},
{"id":44,"name":"name 14","description":"description 1","field3":"field3
14","field4":"field4 14","field5 ":"field5 14"},
{"id":45,"name":"name 15","description":"description 1","field3":"field3
15","field4":"field4 15","field5 ":"field5 15"},
{"id":46,"name":"name 16","description":"description 1","field3":"field3
16","field4":"field4 16","field5 ":"field5 16"},
{"id":47,"name":"name 17","description":"description 1","field3":"field3
17","field4":"field4 17","field5 ":"field5 17"},
{"id":48,"name":"name 18","description":"description 1","field3":"field3
18","field4":"field4 18","field5 ":"field5 18"},
{"id":49,"name":"name 19","description":"description 1","field3":"field3
19","field4":"field4 19","field5 ":"field5 19"},
{"id":50,"name":"name 5","description":"description 1","field3":"field3
5","field4":"field4 5","field5 ":"field5 5"},
{"id":51,"name":"name 6","description":"description 1","field3":"field3
6","field4":"field4 6","field5 ":"field5 6"},
{"id":52,"name":"name 7","description":"description 1","field3":"field3
7","field4":"field4 7","field5 ":"field5 7"},
{"id":53,"name":"name 8","description":"description 1","field3":"field3
8","field4":"field4 8","field5 ":"field5 8"},
{"id":54,"name":"name 9","description":"description 1","field3":"field3
9","field4":"field4 9","field5 ":"field5 9"},
{"id":55,"name":"name 10","description":"description 1","field3":"field3
10","field4":"field4 10","field5 ":"field5 10"},
{"id":56,"name":"name 11","description":"description 1","field3":"field3
11","field4":"field4 11","field5 ":"field5 11"},
{"id":57,"name":"name 12","description":"description 1","field3":"field3
12","field4":"field4 12","field5 ":"field5 12"},
{"id":58,"name":"name 13","description":"description 1","field3":"field3
13","field4":"field4 13","field5 ":"field5 13"},
{"id":59,"name":"name 14","description":"description 1","field3":"field3
14","field4":"field4 14","field5 ":"field5 14"},
{"id":60,"name":"name 15","description":"description 1","field3":"field3
15","field4":"field4 15","field5 ":"field5 15"},
{"id":61,"name":"name 16","description":"description 1","field3":"field3
16","field4":"field4 16","field5 ":"field5 16"},
{"id":62,"name":"name 17","description":"description 1","field3":"field3
17","field4":"field4 17","field5 ":"field5 17"},
{"id":63,"name":"name 18","description":"description 1","field3":"field3
18","field4":"field4 18","field5 ":"field5 18"},
{"id":64,"name":"name 19","description":"description 1","field3":"field3
19","field4":"field4 19","field5 ":"field5 19"},
{"id":65,"name":"name 20","description":"description 1","field3":"field3
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

You might also like