Display data with AngularJS include Pagination and search
1. index.php
- this is the simple .php file and you need to copy paste below code in it.
- mention the comment in index.php for display table field name.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Prompt Websolution</title>
<script src="http://code.angularjs.org/1.0.0rc9/angular-1.0.0rc9.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="GridContrl">
<br /><br /><br />
<div class="col-md-6">
<div>{{TotalRecord}}</div>
<div class="input-group">
<input type="text" name="txtSearch" class="form-control" ng-model="txtSearch" placeholder="Search anything..." ng-change="search()" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
<table class="table table-striped pagination-sm">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in filteredData">
<td ng-bind="$index + 1"></td><!--- index wise id --->
<td ng-bind="data.firstname"></td><!--- write your table field name wichone you want to display --->
<td ng-bind="data.lastname"></td>
</tr>
</tbody>
</table>
<pagination ng-model="currentPage" total-items="TotalRecord" max-size="maxSize" boundary-links="true" items-per-page="numPerPage" ng-disabled="ngDisabled">
</pagination>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../Scripts/Grid/mygetdatascript.js"></script>
</body>
</html>
2.1 - if you use CI then put url of controllername and function name like:
-> $http.get("/controllername/functionname?searchText=" + txtSearch + "&Begin=" + begin),
2.2 - if you use simple core php then put the php file name like :
-> $http.get("PHPfilename.php?searchText=" + txtSearch + "&Begin=" + begin),
var app = angular.module("myApp", ['ui.bootstrap']);
app.controller("GridContrl", function ($scope, $http) {
$scope.filteredData = [], $scope.currentPage = 1, $scope.numPerPage = 25, $scope.maxSize = 5,$scope.ngDisabled = true;
var firsttime = true;
$scope.zbPagination = function () {
$scope.$watch('currentPage + numPerPage', function () {
var begin = (($scope.currentPage - 1) * $scope.numPerPage)
, end = begin + $scope.numPerPage;
console.log("Begin:: " + begin + " End:: " + end);
if (firsttime == false) {
$scope.getData($scope.txtSearch, begin, false);
}
firsttime = false;
});};
$scope.getData = function (txtSearch, begin, callPaging) {
$http.get("/controller/function?searchText=" + txtSearch + "&Begin=" + begin).then(function (response) {
$scope.TotalRecord = response.data.TotalRecord;
$scope.filteredData = response.data.returnData;
if (callPaging) {
$scope.zbPagination();
}
});
$scope.search = function () {
$scope.currentPage = 1;
$scope.getData($scope.txtSearch, 0, false);
};};
$scope.txtSearch = "";
$scope.getData($scope.txtSearch, 0,true);
});
here, i put the third php file for get idea, make sure that you have to get data in json format like :
3. PHPindex.php
$Query = $this->db->query(" select * from tablename ");
$data = $Query->result();
$this->response($data);
output like :
{"data":[
{"firstName":"Raj", "lastName":"Maher"},
{"firstName":"Ravi", "lastName":"Patel"},
{"firstName":"Jems", "lastName":"Patel"}
]}
0 comments:
Post a Comment