您的位置：首页 > 编程语言 > C#

关于Ajax无刷新分页技术的一些研究 c#

2013-07-30 11:38 519 查看

小弟新手，求大神有更好的解决方案，指教下~

以前做项目，用过GridView的刷新分页，也用过EasyUI的封装好的分页技术，最近在老项目的基础上加新功能，迫于需求，自己没事琢磨了个Ajax无刷新分页技术，

也在百度看了下，写的都不是很系统，在这里写个系统的，简单的，方便大家研究下。

系统支持和数据库交互的无刷新分页、删除后的当前页定位、在查询条件下的分页 ,有数据，显示删除，列表，没有只显示新增按钮。

项目采取的后台拼html，图了个简单，方便区分分页js，在后台写html，增加服务器压力，第一选择还是传JSON哈，谢谢楼下大神回答。

我写的这个无刷新分页用的最重要的sql 语句就是

sql = @"select * from (select ROW_NUMBER() over (ORDER BY CREATEDATE) rownum,a.goodsid,a.goodsname,a.itemname,a.price FROM GoodsOrderAccept a " + selectsql + ") t where t.rownum>='" + ((page - 1) * 10 + 1) + "' and t.rownum<='" + page * 10 + "'";

相信有些大神，看到这里，已经知道我采取的什么方法了，重点就是 ROW_NUMBER()，利用它和Page变量，从前台页面请求不同的页码，显示不同的数据。

下面看一下项目的目录结构：

List.aspx就是页面，Page.ashx就是实现的分页技术，JSONObject.cs在后台对JSON序列化成对象。

List.aspx页面执行如下：

如页面所示，支持checkbox，单删除，多删除.

下面开始贴代码：

List.aspx页面代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="List.aspx.cs" Inherits="AjaxPage.List" %>

<!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">
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title>分页功能演示</title>
<script type="text/javascript">
$(function () {

//初始化首页数据以及各种变量
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "getFirstPageAndVariable"
},
success: function (data) {
if (data.outStr != "" && data.pagecount != "0") {
//有数据加载数据列表，显示数据列表，显示删除按钮，以及分页按钮
document.getElementById('btn_delete').style.display = "";
document.getElementById('div_list').style.display = "";
document.getElementById('div_page').style.display = "";
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
//把总页数赋值给变量
$('#<%=hid_last.ClientID %>').val(data.pagecount);
//初始化页数输入框
$("#text_page").val($('#<%=hid_shou.ClientID %>').val());
//将上一页和下一页变量赋值为首页变量
$('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val());
}
}
});
//绑定按钮事件
$("#btn_search").bind("click", btn_search);
$("#btn_delete").bind("click", btn_delete);
//查询事件
function btn_search(event) {

//查询输入框不为空的话，才执行查询事件
//if ($("#text_search").val().toString().replace(/[ ]/g, "") != "") {
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "getFirstPageAndVariable",
search: $("#text_search").val()
},
success: function (data) {
if (data.outStr != "" && data.pagecount != "0") {
//有数据加载数据列表，显示数据列表，显示删除按钮，以及分页按钮
document.getElementById('btn_delete').style.display = "";
document.getElementById('div_list').style.display = "";
document.getElementById('div_page').style.display = "";
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
//把总页数赋值给变量
$('#<%=hid_last.ClientID %>').val(data.pagecount);
//初始化页数输入框
$("#text_page").val($('#<%=hid_shou.ClientID %>').val());
//模糊查询后，将上一页和下一页变量赋值为首页变量
$('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val());
}
}
});
//}
}
//删除事件
function btn_delete(event) {
var deleteData = "";
$("#tbody_list tr").each(function () {
if ($($(this).children().get(0)).find("input")[0].status) {
deleteData += $($(this).children().get(0)).find("input")[0].value + "," + $($(this).children().get(0)).find("input")[0].value + "|";
}
});
if (deleteData == "") {
alert("不能提交空数据！");
return false;
}
if (!confirm("确定要删除吗？")) {
return false;
}
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "deleteData",
deleteData: deleteData
},
success: function (data) {
if (data.status == "success") {
//初始化当前页数据以及各种变量
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "getDeletePageAndVariable",
hid_change: $('#<%=hid_change.ClientID %>').val(),
search: $("#text_search").val()
},
success: function (data) {
if (data.pagecount != "0") {
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
//把总页数赋值给变量
$('#<%=hid_last.ClientID %>').val(data.pagecount);
//初始化页数输入框
$("#text_page").val(data.hid_change);
//将上一页和下一页变量赋值为首页变量
$('#<%=hid_change.ClientID %>').val(data.hid_change);
}
}
});
}
}
});
}
//加载首页点击事件
$("#a_shou").click(function () {
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "clickPageAndGetData",
page: $('#<%=hid_shou.ClientID %>').val(),
search: $("#text_search").val()
},
success: function (data) {
if (data.outStr != "") {
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
$("#text_page").val($('#<%=hid_shou.ClientID %>').val());
//将上一页和下一页的变量赋值为首页变量
$('#<%=hid_change.ClientID %>').val($('#<%=hid_shou.ClientID %>').val());
}
}
});
});
//加载末页点击事件
$("#a_last").click(function () {
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "clickPageAndGetData",
page: $('#<%=hid_last.ClientID %>').val(),
search: $("#text_search").val()
},
success: function (data) {
if (data.outStr != "") {
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
$("#text_page").val($('#<%=hid_last.ClientID %>').val());
//将上一页和下一页的变量赋值为首页变量
$('#<%=hid_change.ClientID %>').val($('#<%=hid_last.ClientID %>').val());
}
}
});
});
//加载上一页点击事件
$("#a_back").click(function () {
//当前页面为首页时，无上一页事件
var back = parseInt($('#<%=hid_change.ClientID %>').val()) - 1;
if (back != 0) {
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "clickPageAndGetData",
page: back,
search: $("#text_search").val()
},
success: function (data) {
if (data.outStr != "") {
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
$('#<%=hid_change.ClientID %>').val(back);
$("#text_page").val(back);
}
}
});
}
});
//加载下一页点击事件
$("#a_next").click(function () {
//当前页面为最后一页时，无下一页事件
var next = parseInt($('#<%=hid_change.ClientID %>').val()) + 1;
if ($('#<%=hid_change.ClientID %>').val() != $('#<%=hid_last.ClientID %>').val()) {
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "clickPageAndGetData",
page: next,
search: $("#text_search").val()
},
success: function (data) {
if (data.outStr != "") {
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
$('#<%=hid_change.ClientID %>').val(next);
$("#text_page").val(next);
}
}
});
}
});
//加载确定点击事件
$("#a_ok").click(function () {
$.ajax({
type: "POST",
url: "Page.ashx",
dataType: "json",
data: {
action: "clickPageAndGetData",
page: $("#text_page").val(),
search: $("#text_search").val()
},
success: function (data) {
if (data.outStr != "") {
$("#tbody_list").empty();
$("#tbody_list").append(data.outStr);
$('#<%=hid_change.ClientID %>').val($("#text_page").val());
}
}
});
});
});
var record = {
num: ""
}
var checkDecimal = function (n) {
var decimalReg = /^[0-9]*[1-9][0-9]*$/;
if (n.value != "" && decimalReg.test(n.value)) {
record.num = n.value;
} else {
if (n.value != "") {
n.value = record.num;
}
}
}
</script>
</head>
<body>
<form id="form_page" runat="server">
<!--页面顶部-->
<div id="div_tool">
<table width="100%" id="table_tool">
<tr>
<td width="50%" style="text-align: center">
请输入食材名称：
<input type="text" id="text_search" />
</td>
<td width="25%">
<input type="button" value="查询" id="btn_search" />
</td>
<td width="25%">
<input type="button" value="删除" style="display: none" id="btn_delete" />
</td>
</tr>
</table>
</div>
<br />
<!--页面主题部分-->
<div id="div_list" style="display: none">
<table width="100%" id="table_list">
<thead>
<tr>
<th width="25%">
选择
</th>
<th width="25%">
食材名称
</th>
<th width="25%">
食材单位
</th>
<th width="25%">
食材单价
</th>
</tr>
</thead>
<tbody id="tbody_list">
</tbody>
</table>
</div>
<!--始终保持在页面底部-->
<div id="div_page" style="position: absolute; bottom: 0; display: none">
<table width="100%">
<tr>
<td style="text-align: center; width: 100%">
<a href="#" id="a_shou">首页</a> <a href="#" id="a_back">上一页</a>
<input type="text" id="text_page" style="width: 50px;" onkeyup="checkDecimal(this)" />
<a href="#" id="a_next">下一页</a> <a href="#" id="a_last">末页</a> <a href="#" id="a_ok">
确定</a>
</td>
</tr>
</table>
</div>
<!--记录点击首页的变量，始终为1-->
<asp:HiddenField ID="hid_shou" runat="server" Value="1" />
<!--记录点击上一页和下一页的变量-->
<asp:HiddenField ID="hid_change" runat="server" />
<!--记录点击末页的变量-->
<asp:HiddenField ID="hid_last" runat="server" />
</form>
</body>
</html>

开始插入 Page.ashx代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.SqlClient;
using System.Data;

namespace AjaxPage
{
/// <summary>
/// Page 的摘要说明，10条数据分页
/// </summary>
public class Page : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";

JSONObject jo = new JSONObject();
//取得页面发出的动作
string action = context.Request["action"];
//取得页面的查询条件
string search = context.Request["search"];
SqlDataAdapter ad = null;
DataSet dsPagecount = new DataSet();
DataSet dsOutstr = new DataSet();
DataTable dt = new DataTable();
string sql = "";
string connectstring = "server=localhost;User ID=sa;Password=1;database=SqcpDB;Connection Reset=FALSE";
String outStr = String.Empty;
string selectsql = "";
//页面有查询条件
if (search != "")
{
selectsql = " where goodsname like '%" + search + "%' ";
}
//初始化页面以及首页内容
if (action == "getFirstPageAndVariable")
{
sql = @"select count(goodsid) from GoodsOrderAccept" + selectsql;
ad = new SqlDataAdapter(sql, connectstring);
ad.Fill(dsPagecount);
dt = dsPagecount.Tables[0];
//取得数据总条数
int count = Convert.ToInt32(dt.Rows[0][0]);
//每页10条记录，取得总页数逻辑
int pagecount = count / 10;
if (count % 10 != 0)
{
pagecount++;
}
jo.Add("pagecount", pagecount.ToString());
sql = @"select * from  (select  ROW_NUMBER() over (ORDER BY CREATEDATE) rownum,a.goodsid,a.goodsname,a.itemname,a.price FROM GoodsOrderAccept a " + selectsql + ") t where t.rownum>=0 and t.rownum<=10";
ad = new SqlDataAdapter(sql, connectstring);
ad.Fill(dsOutstr);
dt = dsOutstr.Tables[0];//初始加载首页10条数据
if (null != dt && dt.Rows.Count != 0)
{
foreach (DataRow dr in dt.Rows)//遍历dt以html的格式输出内容
{
outStr += "<tr>";
//给checkbox设置value属性，方便删除
outStr += String.Format("<td style='text-align:center'><input type='checkbox' value='{0}' /></td>", dr["goodsid"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["goodsname"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["itemname"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["price"]);
outStr += "</tr>";
}
}
jo.Add("outStr", outStr);
context.Response.Write(JSONConvert.SerializeObject(jo));
}
//点击分页按钮时，执行的动作
else if (action == "clickPageAndGetData")
{
string pagestr = context.Request["page"];
int page = Convert.ToInt32(pagestr);
sql = @"select * from  (select  ROW_NUMBER() over (ORDER BY CREATEDATE) rownum,a.goodsid,a.goodsname,a.itemname,a.price FROM GoodsOrderAccept a " + selectsql + ") t where t.rownum>='" + ((page - 1) * 10 + 1) + "' and t.rownum<='" + page * 10 + "'";
ad = new SqlDataAdapter(sql, connectstring);
ad.Fill(dsOutstr);
dt = dsOutstr.Tables[0];
if (null != dt && dt.Rows.Count != 0)
{
foreach (DataRow dr in dt.Rows)//遍历dt以html的格式输出内容
{
outStr += "<tr>";
//给checkbox设置value属性，方便删除
outStr += String.Format("<td style='text-align:center'><input type='checkbox' value='{0}' /></td>", dr["goodsid"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["goodsname"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["itemname"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["price"]);
outStr += "</tr>";
}
}
jo.Add("outStr", outStr);
context.Response.Write(JSONConvert.SerializeObject(jo));
}
//点击删除按钮时，执行的动作
else if (action == "deleteData")
{
String[] postDatas = context.Request["deleteData"].Split("|".ToCharArray(), StringSplitOptions.RemoveEmptyEntries);
SqlConnection conn = new SqlConnection(connectstring);
conn.Open();
foreach (String pd in postDatas)
{
String[] pdArr = pd.Split(",".ToCharArray());
sql = @"delete from GoodsOrderAccept where goodsid='" + pdArr[0] + "'";
SqlCommand cmd = new SqlCommand(sql, conn);
cmd.ExecuteNonQuery();
}
conn.Close();
jo.Add("status", "success");
context.Response.Write(JSONConvert.SerializeObject(jo));
}
//删除成功后，固定到当前页
else if (action == "getDeletePageAndVariable")
{
string hid_changestr = context.Request["hid_change"];
int hid_change = Convert.ToInt32(hid_changestr);
sql = @"select count(goodsid) from GoodsOrderAccept" + selectsql;
ad = new SqlDataAdapter(sql, connectstring);
ad.Fill(dsPagecount);
dt = dsPagecount.Tables[0];
int count = Convert.ToInt32(dt.Rows[0][0]);
int pagecount = count / 10;
if (count % 10 != 0)
{
pagecount++;
}
jo.Add("pagecount", pagecount.ToString());//每页10条记录，取得总页数
if (hid_change > pagecount)
{
hid_change = pagecount;
}
jo.Add("hid_change", hid_change.ToString());
sql = @"select * from  (select  ROW_NUMBER() over (ORDER BY CREATEDATE) rownum,a.goodsid,a.goodsname,a.itemname,a.price FROM GoodsOrderAccept a " + selectsql + ") t where t.rownum>='" + ((hid_change - 1) * 10 + 1) + "' and t.rownum<='" + hid_change * 10 + "'";
ad = new SqlDataAdapter(sql, connectstring);
ad.Fill(dsOutstr);
dt = dsOutstr.Tables[0];
if (null != dt && dt.Rows.Count != 0)
{
foreach (DataRow dr in dt.Rows)//遍历dt以html的格式输出内容
{
outStr += "<tr>";
//给checkbox设置value属性，方便删除
outStr += String.Format("<td style='text-align:center'><input type='checkbox' value='{0}' /></td>", dr["goodsid"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["goodsname"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["itemname"]);
outStr += String.Format("<td style='text-align:center'>{0}</td>", dr["price"]);
outStr += "</tr>";
}
}
jo.Add("outStr", outStr);
context.Response.Write(JSONConvert.SerializeObject(jo));
}
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航