Asp +Js 无刷新分页
Posted 涂山吕吕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 pageInde以上是关于Asp +Js 无刷新分页的主要内容，如果未能解决你的问题，请参考以下文章