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[].Value = "[dbo].[T_Person_1] ";
cmdPar[].Value = "*,(select COUNT(*) from [dbo].[T_Person_1] where " + strwhere + ") as Total";
cmdPar[].Value = "Id";
cmdPar[].Value = ;
cmdPar[].Value = pageindex;
cmdPar[].Value = ;
cmdPar[].Value = strwhere;
cmdPar[].Value = ;
} 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 == )
{
pageIndex = ;
} 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:;
}
.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:;
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)都可以在这些地址上找得到。
Asp +Js 无刷新分页的更多相关文章
- Ajax+Asp.Net无刷新分页
1.新建解决方案,并建立四个项目BLL,DAL,Model,PagerTest,如图所示: 2.Model代码 using System; using System.Collections.Gener ...
- JS无刷新分页插件
本文介绍一个本人自己写的一JS分页插件 <script src="/Js/smart.page.min.js" type="text/javascript" ...
- js 无刷新分页代码
/** * 分页事件处理 */function paging(){ $("#firstPage").click(function(){ //首页 var pageNo = getP ...
- asp.net分页asp.net无刷新分页高效率分页
项目中经常会用到分页的功能类似的项目做过无数个了,今个把自己常用的分页代码分享一下. 首先说说服务端处理的代码: 下面代码中重点是分页的sql语句的写法,其中的参数@n是当前的页码,总的来说本服务端主 ...
- ASP.NET中无刷新分页
上次介绍了我们代码写的刷新分页,这次就来说说无刷新分页. 这次我们是在上次的基础上改动了一些,我们都知道想要无刷新,就需要Ajax,在我们的ASP.NET中AJax是和一般处理程序配合着用的. 无刷新 ...
- ASP.NET Ajax简单的无刷新分页
最近练习了一些AJAX无刷新分页,写得比较简单,性能不知道怎么样,求大神指点,如有更好的分页提供,欢迎交流! 发话不多说了,直接上代码! 首先从网上下了一个JS分页,感觉挺好用的 (function( ...
- 无刷新分页 jquery.pagination.js
无刷新分页 jquery.pagination.js 采用Jquery无刷新分页插件jquery.pagination.js实现无刷新分页效果 1.插件参数列表 http://www.dtan.so ...
- asp.net MVC4 +MVCpager 无刷新分页
本人菜鸟,最近在用MVC4和MVCpager做无刷新分页时,发现点击下一页时数据不是Ajax提交的,弄了好久终于找到原因,原来还是Jquery引用的问题,现在把代码粘出来,希望能帮到刚接触的程序员,第 ...
- asp.net练习②——Paginaton无刷新分页
aspx代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server" ...
随机推荐
- 前端切图:CSS实现隐藏滚动条同时又可以滚动
CSS 实现隐藏滚动条同时又可以滚动 原始功能: 图片发自简书App 添加伪类之后的功能: 图片发自简书App 完整demo如下: <!DOCTYPE html> <html> ...
- erlang判断模块导出函数问题
erlang本身提供一个接口,可以用来检查模块是否有导出函数,这个接口是erlang:function_exported/3,但是很多时候这个接口无法正常使用. 下面重现一下这个问题: 1> e ...
- selenium 爬取空间说说
package cn.hb.util; import java.io.File; import java.io.FileWriter; import java.io.IOException; impo ...
- Windows消息：WM_USER与WM_APP的区别
Windows消息范围及意义 #define WM_USER 0x0400 #define WM_APP 0x8000 0到WM_USER-1 Messages reserved for use by ...
- ServletContextListener和ContextLoaderListener的区别
ServletContext 被 Servlet 程序用来与 Web 容器通信.例如写日志,转发请求.每一个 Web 应用程序含有一个Context,被Web应用内的各个程序共享.因为Context可 ...
- Distributed Symmetric Multiprocessing Computing Architecture
Example embodiments of the present invention includes systems and methods for implementing a scalabl ...
- numpy 辨异（四）—— np.repeat 与 np.tile
>> import numpy as np >> help(np.repeat) >> help(np.tile) 二者执行的是均是复制操作: np.repeat: ...
- 画廊视图(Gallery)的功能和用法
Gallery与Spinner组件有共同的父类:AbsSpinner,表明Gallery和Spinner都是一个列表框.它们之间的区别在于Spinner显示的是一个垂直的列表选择框吗,而Gallery ...
- Attribute-based identification schemes for objects in internet of things
Methods and arrangements for object identification. An identification request is received from diffe ...
- Method of packet transmission from node and content owner in content-centric networking
A method of transmitting a content reply packet from a content owner in content-centric networking ( ...