Asp +Js 无刷新分页
Default.aspx代码
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripts/jquery-3.1.1.js" type="text/javascript"></script> <link href="Style_Table.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> var pageSize = "10"; //每页行数 var currentPage = 1; //当前页 var totalPage = 1; //总页数 var params = ""; //参数 $(document).ready(function () {//jquery代码随着document加载完毕而加载 //分页查询 queryForPages(); //首页 $("#firstPage").click(function () { currentPage = "1"; queryForPages(); }); //上一页 $("#previous").click(function () { if (currentPage > 1) { currentPage--; } queryForPages(); }); //下一页 $("#next").click(function () { if (currentPage < totalPage) { currentPage++; } queryForPages(); }); //尾页 $("#last").click(function () { currentPage = totalPage; queryForPages(); }); //GO $("#Button1").click(function () { currentPage = $("#Text2").val(); if (currentPage <= totalPage) { queryForPages(); } else { } }); }); function queryForPages() { $.ajax({ type: 'post', dataType: 'json', url: 'PagerHandler.ashx', data: 'currentPage=' + currentPage + '&pageSize=' + pageSize, success: function callbackFun(data) { //清空数据 clearDate(); fillTable(data); } }); } //填充数据 function fillTable(info) { if (info.length > 0) { if (info[info.length - 1].Total % 10 == 0) { totalPage = info[info.length - 1].Total / 10; } else { totalPage = Math.ceil(info[info.length - 1].Total / 10); } $("#Text3").attr("value", '/' + totalPage); var tbody_content = ""; //不初始化字符串"",会默认"undefined" for (var i = 0; i < info.length; i++) { tbody_content += "<tr>" + "<td data-title='序号' >" + info[i].Id + "</td>" + "<td data-title='名称'>" + info[i].Name + "</td>" + "<td data-title='年龄'>" + info[i].Age + "</td>" + "<td data-title='性别'>" + info[i].Sex + "</td>" + "<td data-title='地址'>" + info[i].Adress + "</td>" + "</tr>"; $("#t_body").html(tbody_content); } } else { $("#t_head").html(""); $("#t_body").html("<div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>" + info.msg + "</div>"); } } //清空数据 function clearDate() { $("#t_body").html(""); } </script> <style type="text/css"> #Text2 { width: 28px; } </style> </head> <body> <div align="center" style="width: 100%;"> <table style="text-align: center; width: 50%;" class="bordered"> <thead id="t_head"> <tr> <th> 序号 </th> <th> 名称 </th> <th> 年龄 </th> <th> 性别 </th> <th> 地址 </th> </tr> </thead> <tbody id="t_body"> <!-- ajax填充列表 --> </tbody> </table> <button id="firstPage"> 首页</button> <button id="previous"> 上一页</button> <button id="next"> 下一页</button> <button id="last"> 尾页</button> <input id="Text1" type="text" value="转到第几" readonly="readonly" style="border-style: none; width: 59px;" /> <input id="Text2" type="text" /> <input id="Text3" readonly="readonly" style="border-style: none; width: 38px;" type="text" value="/1" /> <button id="Button1"> GO</button> </div> <form id="form1" runat="server"> </form> </body> </html>
Common.cs代码
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Configuration; using System.ComponentModel; using System.Data.SqlClient; using System.Data; namespace WebApplication1 { public class Common { /// <summary> /// 连接字符串 /// </summary> public static string DefaultConnectionString { get { return "Data Source=192.168.100.100;uid=sa;pwd=123321;Initial Catalog= Test"; } } private static SqlParameter[] cmdPar; public static void setcmdPar(string strwhere, int pageindex) { cmdPar = new SqlParameter[] { new SqlParameter("@tblName", SqlDbType.VarChar), new SqlParameter("@strGetFields", SqlDbType.VarChar), new SqlParameter("@fldName", SqlDbType.VarChar), new SqlParameter("@PageSize", SqlDbType.Int), new SqlParameter("@PageIndex", SqlDbType.Int), new SqlParameter("@doCount", SqlDbType.Bit), new SqlParameter("@strWhere", SqlDbType.VarChar), new SqlParameter("@OrderType", SqlDbType.Bit) }; cmdPar[0].Value = "[dbo].[T_Person_1] "; cmdPar[1].Value = "*,(select COUNT(*) from [dbo].[T_Person_1] where " + strwhere + ") as Total"; cmdPar[2].Value = "Id"; cmdPar[3].Value = 10; cmdPar[4].Value = pageindex; cmdPar[5].Value = 0; cmdPar[6].Value = strwhere; cmdPar[7].Value = 0; } public static BindingList<Person> GetlistpagePer(string sqlWhere, int pageindex) { setcmdPar(sqlWhere, pageindex); BindingList<Person> listper = new BindingList<Person>(); using (SqlDataReader reader = SQLHelper.ExecuteReader(DefaultConnectionString, CommandType.StoredProcedure, "GetListByPage", cmdPar)) { while (reader.Read()) { Person per = new Person(); per.Id = Convert.ToInt32(reader["Id"]); per.Name = Convert.ToString(reader["Name"]); per.Age = Convert.ToString(reader["Age"]); per.Sex = Convert.ToString(reader["Sex"]); per.Adress = Convert.ToString(reader["Adress"]); per.Total = Convert.ToInt32(reader["Total"]); listper.Add(per); } reader.Close(); } return listper; } } }
Person.cs 类
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace WebApplication1 { public class Person { private int id; private string name; private string age; private string sex; private string adress; private int total; /// <summary> /// 序号 /// </summary> public int Id { get { return id; } set { id = value; } } /// <summary> /// 名称 /// </summary> public string Name { get { return name; } set { name = value; } } /// <summary> /// 年龄 /// </summary> public string Age { get { return age; } set { age = value; } } /// <summary> /// 性别 /// </summary> public string Sex { get { return sex; } set { sex = value; } } /// <summary> /// 地址 /// </summary> public string Adress { get { return adress; } set { adress = value; } } /// <summary> /// 根据条件查询的总数 /// </summary> public int Total { get { return total; } set { total = value; } } } }
PagerHandler.ashx
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.ComponentModel; using System.Web.Script.Serialization; namespace WebApplication1 { /// <summary> /// PagerHandler 的摘要说明 /// </summary> public class PagerHandler : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; int pageIndex = Convert.ToInt32(context.Request["currentPage"]); int pagesize = Convert.ToInt32(context.Request["pageSize"]); if (pageIndex == 0) { pageIndex = 1; } string s = "1=1"; //条件 BindingList<Person> perlist = new BindingList<Person>(); perlist = Common.GetlistpagePer(s, pageIndex); string jsonStr = Newtonsoft.Json.JsonConvert.SerializeObject(perlist);//需要安装Json.Net context.Response.Write(jsonStr); } public bool IsReusable { get { return false; } } } }
CSS样式
table { border-collapse: collapse; /* IE7 and lower */ border-spacing: 0; } .bordered { border: solid #ccc 1px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; -webkit-box-shadow: 0 1px 1px #ccc; -moz-box-shadow: 0 1px 1px #ccc; box-shadow: 0 1px 1px #ccc; } .bordered tr:hover { background: #fbf8e9; -o-transition: all 0.1s ease-in-out; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; -ms-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; } .bordered td, .bordered th { border-left: 1px solid #ccc; border-top: 1px solid #ccc; padding: 10px; text-align: left; } .bordered th { background-color: #dce9f9; background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9)); background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9); background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9); background-image: linear-gradient(top, #ebf3fc, #dce9f9); -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; border-top: none; text-shadow: 0 1px 0 rgba(255,255,255,.5); } .bordered td:first-child, .bordered th:first-child { border-left: none; } .bordered th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } .bordered th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } .bordered th:only-child{ -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .bordered tr:last-child td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } .bordered tr:last-child td:last-child { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; } /*----------------------*/ .zebra td, .zebra th { padding: 10px; border-bottom: 1px solid #f2f2f2; } .zebra tbody tr:nth-child(even) { background: #f5f5f5; -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 1px 0 rgba(255,255,255,.8) inset; } .zebra th { text-align: left; text-shadow: 0 1px 0 rgba(255,255,255,.5); border-bottom: 1px solid #ccc; background-color: #eee; background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee)); background-image: -webkit-linear-gradient(top, #f5f5f5, #eee); background-image: -moz-linear-gradient(top, #f5f5f5, #eee); background-image: -ms-linear-gradient(top, #f5f5f5, #eee); background-image: -o-linear-gradient(top, #f5f5f5, #eee); background-image: linear-gradient(top, #f5f5f5, #eee); } .zebra th:first-child { -moz-border-radius: 6px 0 0 0; -webkit-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } .zebra th:last-child { -moz-border-radius: 0 6px 0 0; -webkit-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } .zebra th:only-child{ -moz-border-radius: 6px 6px 0 0; -webkit-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .zebra tfoot td { border-bottom: 0; border-top: 1px solid #fff; background-color: #f1f1f1; } .zebra tfoot td:first-child { -moz-border-radius: 0 0 0 6px; -webkit-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } .zebra tfoot td:last-child { -moz-border-radius: 0 0 6px 0; -webkit-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; } .zebra tfoot td:only-child{ -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px border-radius: 0 0 6px 6px }
数据库的访问类(http://www.cnblogs.com/haibing0107/p/6141242.html)以及分页的存储过程(http://www.cnblogs.com/haibing0107/p/5527205.html)都可以在这些地址上找得到。
