ASP.NET+Ajax+JQuey+Json数据+存储过程实现无刷新分页

40 篇文章 0 订阅
11 篇文章 0 订阅
<!--引入jquery-1.6.2-->
<!--ShowPageData1.aspx页面-->
<script src="../Jquery/jquery-1.6.2.min.js" type="text/javascript"></script>

<!--引入jquery-1.6.2-->
    <script type="text/javascript" language="javascript">
    var pageIndex=1; //当前页码
    var totalPage; //总页数
    $(function () {
        $.ajax({
            url: "GetPageDataBySql.aspx", //请求页面
            dataType: "json",         //返回的数据类型为json
            data: { pagesize: 3, pageindex: pageIndex }, //向url那个页面传两个参数
            success: function (getdata, stext) {
                for (var i = 0; i < getdata.records.length; i++) {
                    $("<tr><td>" + getdata.records[i].isbn + "</td><td>" + getdata.records[i].id + "</td><td>" + getdata.records[i].unitprice + "</td><td>" + getdata.records[i].title + "</td></tr>").appendTo($("table"));
                    totalPage = window.parseInt(getdata.totalpage);
                }
            },
            error: function (xmlhttprequest, st, e) {
                alert("Error:" + e); //打印错误消息
            }
        });

        //下一页
        $("[value=下一页]").click(function () {
            pageIndex++;
            if (pageIndex >= totalPage) {
                pageIndex = totalPage;    //如果当前页码大于等于总页数,当前页码就等于总页数
                $(this).attr("disabled", true); //下一页不可点击(this代表当前点击的按钮)
            } else {
                $(this).attr("disabled", false); //否则下一页可点击(this代表当前点击的按钮)
            }

            if (pageIndex <= 1) {
                pageIndex = 1; //如果当前页码小于等于1,则当前页码为第一页
                $("[value=上一页]").attr("disabled", true); //上一页不可点击
            } else {
                $("[value=上一页]").attr("disabled", false); //上一页可点击
            }
             //重新绑定数据
            $.ajax({
                url: "GetPageDataBySql.aspx",   //请求页面
                dataType: "json",       //返回的数据类型为json
                data: { pagesize: 3, pageindex: pageIndex },  //向url那个页面传两个参数
                success: function (getdata, stext) {
                    //每次点击下一页的时候都要清空当前页的数据
                    $("table tr:gt(0)").remove();
                    for (var i = 0; i < getdata.records.length; i++) {
                        $("<tr><td>" + getdata.records[i].isbn + "</td><td>" + getdata.records[i].id + "</td><td>" + getdata.records[i].unitprice + "</td><td>" + getdata.records[i].title + "</td></tr>").appendTo($("table"));
                        totalPage = window.parseInt(getdata.totalpage);
                    }
                },
                error: function (xmlhttprequest, st, e) {
                    alert("Error:" + e); //打印错误消息
                }
            });
        });

        //上一页
        $("[value=上一页]").click(function () {
            pageIndex--;
            if (pageIndex >= totalPage) {
                pageIndex = totalPage;    //如果当前页码大于等于总页数,当前页码就等于总页数
                $(this).attr("disabled", true); //下一页不可点击(this代表当前点击的按钮)
            } else {
                $(this).attr("disabled", false); //否则下一页可点击(this代表当前点击的按钮)
            }

            if (pageIndex <= 1) {
                pageIndex = 1; //如果当前页码小于等于1,则当前页码为第一页
                $("[value=上一页]").attr("disabled", true); //上一页不可点击
            } else {
                $("[value=上一页]").attr("disabled", false); //上一页可点击
            }
            //重新绑定数据
            $.ajax({
                url: "GetPageDataBySql.aspx",    //请求页面
                dataType: "json",    //返回的数据类型为json
                data: { pagesize: 3, pageindex: pageIndex }, //向url那个页面传两个参数
                success: function (getdata, stext) {
                    //每次点击上一页的时候都要清空当前页的数据
                    $("table tr:gt(0)").remove();
                    for (var i = 0; i < getdata.records.length; i++) {
                        $("<tr><td>" + getdata.records[i].isbn + "</td><td>" + getdata.records[i].id + "</td><td>" + getdata.records[i].unitprice + "</td><td>" + getdata.records[i].title + "</td></tr>").appendTo($("table"));
                        totalPage = window.parseInt(getdata.totalpage);
                    }
                },
                error: function (xmlhttprequest, st, e) {
                    alert("Error:" + e); //打印错误消息
                }
            });
        });

    });
    </script>

<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <tr>
                <th>封面</th>
                <th>编号</th>
                <th>价格</th>
                <th>标题</th>
            </tr>
        </table>
        <p>
            <input type="button" value="上一页" disabled="disabled" />
            <input type="button" value="下一页"  />
        </p>
    </div>
    </form>
</body>


//GetPageDataBySql.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;

public partial class UseJqueryPage1_GetPageDataBySql : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        string strPageSize=Request.QueryString["pagesize"]; //每页显示的行数
        int pageSize;
        if (strPageSize == null)
        {
            pageSize = 3;//如果客户端传过来的那个pagesize为空的话,就默认每页显示3行
        }
        else {
            pageSize = Convert.ToInt32(strPageSize); //如果不为空的话就直接拿到就ok
        }
        string strPageIndex = Request.QueryString["pageindex"];//当前页码
        int pageIndex;
        if (strPageIndex == null)
        {
            pageIndex = 1; //如果客户端传过来的那个pageindex为空的话,就默认当前是第一页
        }
        else {
            pageIndex = Convert.ToInt32(strPageIndex); //如果不为空的话就直接拿到pageindex就ok
        }
        //调用数据库中的存储过程进行分页
        SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=MyBookShop;Integrated Security=True"); //这里是连接数据库的连接串
        SqlCommand command = new SqlCommand("books_pager", conn); //执行存储过程 books_pager表示数据库存储过程的名字
        command.CommandType = System.Data.CommandType.StoredProcedure;//调用存储过程必须设置commandType为执行存储
        //存储过程需要3个参数,所以必须实例化3个参数对象
        SqlParameter pPageSize = new SqlParameter("@pageSize",pageSize);
        SqlParameter pPageIndex = new SqlParameter("@pageIndex",pageIndex);
        SqlParameter pTotalPages = new SqlParameter("@totalPages",System.Data.SqlDbType.Int); //总页数是要输出的
        pTotalPages.Direction = System.Data.ParameterDirection.Output;//输出参数

        //增加参数
        command.Parameters.Add(pPageIndex);
        command.Parameters.Add(pPageSize);
        command.Parameters.Add(pTotalPages);
        conn.Open(); //打开数据库链接

        SqlDataReader reader = command.ExecuteReader();//执行查询
        string content = "";
        while (reader.Read()) {
            int bookId = (int)reader["bookId"];
            string title = reader["Title"].ToString();
            string isbn = reader["ISBN"].ToString();
            string price = reader["UnitPrice"].ToString();
            content += "{\"id\":\""+bookId+"\",\"isbn\":\""+isbn+"\",\"title\":\""+title+"\",\"unitprice\":\""+price+"\"},";
        }
        string subContent = content.Substring(0,content.Length-1); //截取json最后面的那个逗号,因为content正常输出的时候最后面多了一个逗号

        conn.Close(); //关闭数据库连接
        int totalPage = (int)pTotalPages.Value; //必须要数据库关闭之后才可以获取输出的参数(即是总页数)
        Response.Write("{");
        Response.Write("\"name\":\"Books\",");
        Response.Write("\"totalPage\":\""+totalPage+"\",");
        Response.Write("\"records\":");
        Response.Write("[");
        Response.Write(subContent);
        Response.Write("]");
        Response.Write("}");

        Response.End();
    }
}


--数据库存储过程
create proc books_pager
	@pageSize int,--每页显示多少行
	@pageIndex int,--当前的页数
	@totalPages int output--总页数
as
declare @startIndex int
declare @endIndex int
declare @totalRows int
select @totalRows=COUNT(*) from Books
set @totalPages = @totalRows/@pageSize
if(@totalRows%@pageSize!=0)
begin
	set @totalPages=@totalPages+1
end
set @startIndex=(@pageIndex-1)*@pageSize+1
set @endIndex = @startIndex + @pageSize-1
declare @booktemp table([id] int identity(1,1) not null,bookId int)
insert @booktemp
select Id from Books
select * from @booktemp as t,Books as b
where t.bookId=b.Id and t.id>=@startIndex and t.id<=@endIndex
go


















  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值