<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="Stylesheet" type="text/css" href="CSS/Main.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="Javascript/Data.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="PagerUp" class="pager">
</div><br /><br /><br />
<div id="ResultsDiv">
</div>
<div id="PagerDown" class="pager">
</div>
<input id="HfId" type="hidden" />
<script type="text/javascript">
var itemsPerPage = 5;
$(document).ready(function() {
getRecordspage(0, itemsPerPage);
$(".pager").pagination($("#HfId").val(), {
callback: getRecordspage,
current_page: 0,
items_per_page: itemsPerPage,
num_display_entries: 5,
next_text: 'Next',
prev_text: 'Prev',
num_edge_entries: 1
});
});
</form>
</script>
</body>
</html>
In yourcodebehind aspx.cs;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Data;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using Microsoft.ApplicationBlocks.Data;
using System.Text;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string GetRecords(int currentPage,int pagesize)
{
string connectionString = System.Configuration.ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString;
SqlParameter[] _spParams = new SqlParameter[2];
_spParams[0] = new SqlParameter("@CurrentPage", currentPage);
_spParams[1] = new SqlParameter("@PageSize", pagesize);
DataSet ds = SqlHelper.ExecuteDataset(connectionString, CommandType.StoredProcedure, "Employee_View_Paging", _spParams);
StringBuilder headStrBuilder = new StringBuilder(ds.Tables[0].Columns.Count * 5); //pre-allocate some space, default is 16 bytes
for (int i = 0; i < ds.Tables[0].Columns.Count; i++){
headStrBuilder.AppendFormat("\"{0}\" : \"{0}{1}¾\",", ds.Tables[0].Columns[i].Caption, i);
}
headStrBuilder.Remove(headStrBuilder.Length - 1, 1); // trim away last ,
StringBuilder sb = new StringBuilder(ds.Tables[0].Rows.Count * 5); //pre-allocate some space
sb.Append("{\"");
sb.Append(ds.Tables[0].TableName);
sb.Append("\" : [");
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
string tempStr = headStrBuilder.ToString();
sb.Append("{");
for (int j = 0; j < ds.Tables[0].Columns.Count; j++)
{
ds.Tables[0].Rows[i][j] = ds.Tables[0].Rows[i][j].ToString().Replace("'", "");
tempStr = tempStr.Replace(ds.Tables[0].Columns[j] + j.ToString() + "¾", ds.Tables[0].Rows[i][j].ToString());
}
sb.Append(tempStr + "},");
}
sb.Remove(sb.Length - 1, 1); // trim last ,
sb.Append("]}");
}
}
In your js....
function getRecordspage(curPage) {
$.ajax({
type: "POST",
url: "Default.aspx/GetRecords",
data: "{'currentPage':" + (curPage + 1) + ",'pagesize':5}",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function(jsonObj) {
$("#ResultsDiv").empty();
$("#HfId").val("");
var strarr = jsonObj.d.split('##');
var jsob = jQuery.parseJSON(strarr[0]);
var divs = '';
$.each(jsob.Table, function(i, employee) {
divs += '<div class="resultsdiv"><br /><span class="resultName">' + employee.Emp_Name + '</span><span class="resultfields" style="padding-left:100px;">Category :</span> <span class="resultfieldvalues">' + employee.Desig_Name + '</span><br /><br /><span id="SalaryBasis" class="resultfields">Salary Basis :</span> <span class="resultfieldvalues">' + employee.SalaryBasis + '</span><span class="resultfields" style="padding-left:25px;">Salary :</span> <span class="resultfieldvalues">' + employee.FixedSalary + '</span><span style="font-size:110%;font-weight:bolder;padding-left:25px;">Address :</span> <span class="resultfieldvalues">' + employee.Address + '</span></div>';
});
$("#ResultsDiv").append(divs);
$(".resultsdiv:even").addClass("resultseven");
$(".resultsdiv").hover(function() {
$(this).addClass("resultshover");
}, function() {
$(this).removeClass("resultshover");
});
$("#HfId").val(strarr[1]);
var paginationClone = $("#PagerUp > *").clone(true);
$("#PagerDown").empty();paginationClone.appendTo("#PagerDown");
}
});
}
Css:
.resultsdiv
{
background-color: #FFF;border-top:solid 1px #ddd; height:50px; border-bottom:solid 1px #ddd; padding-bottom:15px; width:450px;
}
.resultseven { background-color: #EFF1f1; }
.resultshover { background-color: #F4F2F2; cursor:pointer; }
.resultName
{
font-size:125%;font-weight:bolder;color:#476275;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
.resultfields
{
font-size:110%;font-weight:bolder;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
.resultfieldvalues
{
color:#476275;font-size:110%;font-weight:bold;font-family:Arial,Liberation Sans,DejaVu Sans,sans-serif;
}
Stored Procedure:
ALTER PROCEDURE [dbo].[Employee_View_Paging]
@CurrentPage INT,
@PageSize INT
AS
BEGIN
-- SET NOCOUNT ON added to prevent extra result sets from
-- interfering with SELECT statements.
SET NOCOUNT ON;
-- Insert statements for procedure here
-- SELECT e.Emp_Id,e.Identity_No,e.Emp_Name,e.Address,convert(varchar, e.Date_Of_Birth, 103) as Date_Of_Birth,d.Desig_Name,d.Desig_Description,case WHEN e.SalaryBasis=1 THEN 'Weekly' ELSE 'Monthly' end as SalaryBasis,e.FixedSalary
-- from Employee as e inner join Designation as d on e.Desig_Id=d.Desig_Id where e.Is_Deleted=0
SELECT ROW_NUMBER() OVER (ORDER BY Emp_Id) AS Row,Emp_Id,Emp_Name,[Address],Desig_Name,SalaryBasis,FixedSalary FROM
(
SELECT
ROW_NUMBER() OVER (ORDER BY Emp_Id) AS Row,Emp_Id,Emp_Name,[Address],Desig_Name,SalaryBasis,FixedSalary
FROM Employee_View
) AS EmpWitRowNos
WHERE Row >= (@CurrentPage - 1) * @PageSize + 1 AND Row <= @CurrentPage*@PageSize
SELECT COUNT(*) as TotalCount FROM Employee_View
SELECT CEILING(COUNT(*) / CAST(@PageSize AS FLOAT)) NumberOfPages
FROM Employee_View
END
