-1.load 事件之后执行loadAjax()方法:
$(function () {
loadAjax(1);
});
0.在loadAjax()方法中：
function loadAjax(pageIndex) {
$("#p").text("正在加载sssssssssssss");
//发送异步请求
// $.getJSON("PhotosList.ashx?_=" + Math.random(), function (msg) {//请求全部页面信息
$.getJSON("PagingPics.ashx?_=" + Math.random(), "pageIndex=" + pageIndex + "&pageSize=" + 3, function (msg) {
var pageCount = msg.pageCount; //获取所有的页数
var jsonArr = msg.json; //获取json对象的第二个元素
$("#p").empty(); //清空id 为p的div里面的元素；
var $table = $("<table id='photos' cellspacing='0px'></table>");//创建table包装集；
$("#p").append($table);//把刚创建的table包装集附加到id为p的div中；
//表头
var $tr = $("<tr><th>序号</th><th>标题</th><th>图片</th><th>点击次数</th><th>支持</th><th>反对</th><th>时间</th><th>操作</th></tr>");//创建投行；
$table.append($tr);//把第一行添加到刚创建的table包装集中；
////////////////pageBar
var $bar = $("<a href='javascript:void(0)'>第一页</a> <a href='javascript:void(0)'>上一页</a> <a href='javascript:void(0)'>下一页</a> <a href='javascript:void(0)'>最后一页</a>");
$("#p").append($bar);
//显示当前页面位置
$("#p").append(pageIndex + "/" + pageCount);
/////////////////////////////////////////////对页数操作
//第一页
$("a:eq(0)", $("#p")).click(function () {
//alert("第一页");
if (pageIndex != 1)
loadAjax(1); //加载到第一页
});
//上一页
$("a:eq(1)", $("#p")).click(function () {
//alert(2);
if (pageIndex != 1) {
var n = pageIndex;
n = n - 1;
loadAjax(n); //加载到下一页
}
});
//下一页
$("a:eq(2)", $("#p")).click(function () {
// alert(3);
if (pageIndex != pageCount) {
var m = pageIndex;
m = m + 1;
loadAjax(m); //加载到上一页
}
});
//最后一页
$("a:eq(3)", $("#p")).click(function () {
// alert(4);
if (pageIndex != pageCount)
loadAjax(pageCount); //加载到最后一页
});
/////////////////////////////////////////////对页数操作
////////////////pageBar
//下面是处理响应数据信息；
for (var i = 0; i < jsonArr.length; i++) {
var json = jsonArr[i];
var $tr = $("<tr></tr>");
$table.append($tr);
//序号
var $td = $("<td>" + (i + 1) + "</td>");
$tr.append($td);
//标题
$td = $("<td><a href='PicDetails.aspx?pid=" + json.PId + "'>" + json.PTitle + "</a></td>");
$tr.append($td);
//图片
$td = $("<td>" + json.PUrl + "</td>");
$tr.append($td);
//点击次数
$td = $("<td>" + json.PClicks + "</td>");
$tr.append($td);
//支持
$td = $("<td><a pid='" + json.PId + "' href='javascript:void(0)'><img src='85.gif' border=0/><span>" + json.PUp + "</span></a></td>");
$tr.append($td);
//////////////////////////支持增加
$("a", $td).click(function () {//如何获得a标签 //new：获取$td下面的a标签；
var pid = $(this).attr("pid"); //如何获得该行的pid
var $link = $(this);
//如何防止读取浏览器缓存数据
$.get("UpDownClick.ashx?_=" + Math.random(), "pid=" + pid + "&type=1", function (msg) {
var cou = $("span", $link).text();
cou++;
$("span", $link).text(cou); //如何获得a标签里的数据并改之
});
return false;
});
//////////////////////////支持增加
//反对
$td = $("<td><a pid=" + json.PId + " href='javascript:void(0)'><img src='86.gif' border=0 /><span>" + json.PDown + "</span></a></td>");
$tr.append($td);
/////////////////////////反对增加
$("a", $td).click(function () {
var p = $(this).attr("pid"); //取到a标签对象，并取出其属性 pid 的值;
$a = $(this);
// alert(p);发送异步请求
$.get("UpDownClick.ashx?pid=" + p + "&type=2&_=" + Math.random(), function (msg) {
if (msg == 1) {
var num = $("span", $a).text();
num++;
$("span", $a).text(num);
} else {
alert('反对出错');
}
});
});
/////////////////////////反对增加
//时间
$td = $("<td>" + ChangeDateFormat(json.PTime) + "</td>");
$tr.append($td);
//操作
$td = $("<td pid=" + json.PId + "><a href='javascript:void(0)'>编辑</a> <a href='javascript:void(0)'>删除</a></td>");
$tr.append($td);
/////////////编辑
//获取title和url
$("a:first", $td).click(function () {
type = 2;
//把该行的所对应数据库中的pid取出来，放到一个隐藏域中，为编辑该行时使用；
//var hd = $("td").attr("pid");
var hd = $(this).parent().attr("pid");
$("#hdPid").val(hd);
// alert(hd);
//alert(type);
var $tr = $(this).parent().parent();
// var iaad =;
var tit = $("td:eq(1) a", $tr).text();
var ur = $("td:eq(2)", $tr).text();
//表单元素赋值要注意
$("#txtTitle").val(tit);
$("#txtPic").val(ur);
// alert(1);
//显示添加层
$(".coverholder").showCover();
});
///////////////编辑
////////////删除
$("a:last", $td).click(function () {
//要获得该pid
$link = $(this);
var pid = $(this).parent().attr("pid");
// alert(pid);
if (confirm("确认删除吗?")) {
// alert(2);
//发送ajax请求，删除该条数据
$.get("DeleteAPic.ashx?pid=" + pid, function (msg) {
if (msg == 1) {
//删除成功,浏览器上上删除该记录
// $link.remove();
loadAjax(pageIndex);
}
});
}
});
////////////删除
}
1.aspx页面：
$.getJSON("PagingPics.ashx?_=" + Math.random(), "pageIndex=" + pageIndex + "&pageSize=" + 3, function (msg) {
....
}
2.请求的PagingPics.ashx：
string pageIndex = context.Request.QueryString["pageIndex"] ?? "1";
string pageSize = context.Request.QueryString["pageSize"] ?? "3";
int pageCount;
int pI;
int pS;
MyPhoto.BLL.MyPhotosBLL bll = new MyPhoto.BLL.MyPhotosBLL();
List<MyPhoto.Model.Photos> list = null;
JavaScriptSerializer jss = new JavaScriptSerializer();
if (int.TryParse(pageIndex, out pI) && int.TryParse(pageSize, out pS))
{
list = bll.GetListPic(pI, pS, out pageCount);
string str = jss.Serialize(list);
string json = "{\"pageCount\":" + pageCount + ",\"json\":" + str + "}";
context.Response.Write(json);
}
else
{
context.Response.Write(-1);
}
3.bll.GetListPic()方法：
MyPhotosDAL dal = new MyPhotosDAL();
public List<Photos> GetListPic(int pageIndex, int pageSize, out int pageCount)
{
return dal.GetListPic(pageIndex, pageSize, out pageCount);
}
4.dal.GetListPic()方法：
public List<Photos> GetListPic(int pageIndex, int pageSize, out int pageCount)
{
/*
@pageIndex int, --第几页
@pageSize int,--每个页面记录条数
@pageCount int output--[多少页]根据上面两个
*/
SqlParameter[] pa = {
new SqlParameter ("@pageIndex",SqlDbType.Int),
new SqlParameter ("@pageSize",SqlDbType.Int),
new SqlParameter("@pageCount ",SqlDbType.Int)
};
//输入参数
pa[0].Value = pageIndex;
pa[1].Value = pageSize;
//输出参数
pa[2].Direction = ParameterDirection.Output;
DataTable table = SQLHelper.ExecuteOutPut("usp_GetPageData", CommandType.StoredProcedure, pa);
pageCount = Convert.ToInt32(pa[2].Value);
List<Photos> list = new List<Photos>();
foreach (DataRow row in table.Rows)
{
Photos p = GetPhotos(row);
list.Add(p);
}
return list;
}
5.SQLHelper.ExecuteOutPut("usp_GetPageData", CommandType.StoredProcedure, pa)方法：
public static DataTable ExecuteOutPut(string cmdText, CommandType type, params SqlParameter[] para)
{
DataTable table = new DataTable();
using (SqlConnection conn = new SqlConnection(str))
{
using (SqlCommand cmd = new SqlCommand(cmdText, conn))
{
cmd.CommandType = type;
cmd.Parameters.AddRange(para);
using (SqlDataAdapter da = new SqlDataAdapter(cmd))
{
da.Fill(table);
return table;
}
}
}
}
6.存储过程的写法，如下：
ALTER proc usp_GetPageData
@pageIndex int,
@pageSize int ,
@pageCount int output
as
begin
declare @justNum int
select PId, PTypeId, PUserId, PTitle, PUrl, PDes, PClicks, PTime, PUp,
PDown from (
select PId, PTypeId, PUserId, PTitle, PUrl, PDes, PClicks, PTime, PUp, PDown
,row_number() OVER(ORDER BY PId) as OrderById from Photos ) AS tb
where OrderById between (@pageIndex-1)*@pageSize+1 and @pageIndex*@pageSize
select @justNum=count(PId)%@pageSize ,@pageCount=count(PId)/@pageSize from Photos
IF @justNum!=0
begin
set @pageCount=@pageCount+1
end
end
--test
declare @Count int
exec dbo.usp_GetPageData 2,3,@Count output
select @count
注:书写这个存储过程的时候，我进行了修改，在创建这个存储过程的时候，只需要把ALTER改成Cteate即可创建！
7.上面六步只是一个简单的分页思路，仅供参考！