.html
<body>
<form id="form1" runat="server">
<div data-ng-app="myApp" data-ng-controller="myController">
<table width="100%">
<tr>
<td align="center">
<table border="1" cellpadding="2px" cellspacing="0" width="50%">
<thead>
<tr>
<th>Srno
</th>
<th>EmployeeCode
</th>
<th>Name
</th>
<th>Last Name
</th>
<th>State
</th>
<th>City
</th>
<th>Salary
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="employee in
employees|pagination: curPage * pageSize |filter:Searchtext| limitTo:
pageSize"">
<td>{{$index+1}}
</td>
<td>{{employee.empcd}}</td>
<td>{{employee.fname}}</td>
<td>{{employee.lname}}</td>
<td>{{employee.state}}</td>
<td>{{employee.city}}</td>
<td>{{employee.salary}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="7" align="center">
<button type="button" class="btn btn-primary" ng-disabled="curPage == 0" ng-click="curPage=curPage-1">
<
PREV
</button>
<span>Page {{curPage + 1}} of {{ numberOfPages() }}</span>
<button type="button" class="btn btn-primary" ng-disabled="curPage >= employees.length/pageSize - 1" ng-click="curPage = curPage+1">NEXT >
</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>
</div>
</form>
</body>
..js
<script src="angular.js"></script>
<script>
var app = angular.module("myApp", [])
app.filter('pagination', function () {
return function (input, start) {
start = +start;
return input.slice(start);
};
});
app.factory("myFactory", function ($http) {
var fact = {};
fact.GetEmployees = function () {
return $http.get('WebService.asmx/GetEmployees');
}
return fact;
})
app.service("myService", function (myFactory) {
this.GetEmployees = function () {
return myFactory.GetEmployees();
}
})
app.controller("myController", function ($log, $scope,
myService) {
$scope.curPage = 0;
$scope.pageSize = 5;
$scope.getEmployees = function () {
myService.GetEmployees().then(function (result) {
$scope.employees =
result.data;
});
$scope.numberOfPages = function () {
return
Math.ceil($scope.employees.length / $scope.pageSize);
};
}
$scope.getEmployees();
});
</script>
.CSS
<style>
.paginationclass {
margin: 19px 28px;
}
.paginationclass span {
margin-left: 15px;
display: inline-block;
}
.pagination-controle li {
display: inline-block;
}
.pagination-controle button {
font-size: 12px;
margin-top: -26px;
cursor: pointer;
}
.pagination {
margin: 5px 12px !important;
}
</style>
WeBService
[WebMethod]
public void GetEmployees()
{
List<Employee> emplist = new List<Employee>();
string connection = ConfigurationManager.ConnectionStrings["myConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(connection))
{
string query = "Usp_demo_crude";
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@mode", "SELECT");
DataTable dt = new DataTable();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
foreach (DataRow dr in dt.Rows)
{
Employee emp = new Employee();
emp.fname = dr["fname"].ToString();
emp.lname = dr["lname"].ToString();
emp.state = dr["state"].ToString();
emp.city = dr["city"].ToString();
emp.salary = Convert.ToInt32(dr["salary"]);
emp.Deptid = dr["Deptid"].ToString();
emp.empcd = dr["Empcode"].ToString();
emp.state_id = Convert.ToInt32(dr["state_id"]);
emp.city_id = Convert.ToInt32(dr["city_id"]);
emplist.Add(emp);
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(emplist));
}
}
}
Class
public class Employee
{
public string fname { get; set; }
public string empcd { get; set; }
public string lname { get; set; }
public string state { get; set; }
public string city { get; set; }
public int salary { get; set; }
public string Deptid { get; set; }
public int state_id { get; set; }
public int city_id { get; set; }
}
No comments:
Post a Comment