ajax_json_存储过程_无刷新分页功能

一直以来都想做个无刷新分页的功能。此功能是使用存储过程返回查询的数据，然后转换为json格式数据，经过ajax解析，结合jquery.pagination.js插件来实现无刷新分页的。废话不多说，直接上代码。

存储过程代码：

USE [jsonPager]
GO

/****** Object:  StoredProcedure [dbo].[jsonPagerProc]    
Script Date: 12/07/2012 10:59:04 
author:肖忠保
******/

   CREATE PROCEDURE [dbo].[jsonPagerProc] 
@tblName   varchar(255),       -- 表名
@strFields varchar(1000) = '*', -- 需要返回的列，默认*
@strOrder varchar(255)='',      -- 排序的字段名，必填
@strOrderType varchar(10)='ASC', -- 排序的方式,默认ASC
@PageSize   int = 10,          -- 页尺寸,默认10
@PageIndex int = 1,           -- 页码,默认1
@strWhere varchar(1500) = '' -- 查询条件 (注意: 不要加 where)
AS
 
declare @strSQL   varchar(5000)
 
if @strWhere !=''
set @strWhere=' where '+@strWhere
 
set @strSQL=
'SELECT * FROM ('+
    'SELECT ROW_NUMBER() OVER (ORDER BY '+@strOrder+' '+@strOrderType+') AS pos,'+@strFields+' '+
    'FROM '+@tblName+' '+@strWhere+
') AS sp WHERE pos BETWEEN '+str((@PageIndex-1)*@PageSize+1)+' AND '+str(@PageIndex*@PageSize)
 
exec (@strSQL)
GO

jquery代码：

/*
* 肖忠保 2012-12-06
* 利用Jquery的jquery.pagination.js插件进行Ajax分页
*/
$(function () {
    // 计算分页总条数
    var pageCount = 0;
    $.ajax({
        type: "POST",
        cache: false,
        async: false,
        dataType: "text",
        url: "ashx/getdata.ashx",
        data: "action=pageCount",
        success: function (data) {
            pageCount = data;
        }
    });

    // 初始化数据(显示第一页)
    InitData("OrderDate", "Desc", 20, 0, pageCount);
    //处理翻页,page_id为当前页索引(0为第一页)
    function pageselectCallback(page_id, jq) {
        InitData("OrderDate", "Desc", 20, page_id, pageCount);
    }
    // ★分页主函数(排序字段，排序类型，页大小，页索引，总条数)
    function InitData(order, ordertype, PageSize, pageindx, pageCount) {
        // Ajax取出分页列表数据
        $.ajax({
            type: "POST",
            cache: false,
            dataType: "json", // 数据格式:JSON
            url: "ashx/getdata.ashx",
            data: "action=pager&order=" + order + "&orderType=" + ordertype + "&pageSize=" + PageSize + "&pageIndex=" + (pageindx + 1),
            // 发送数据之前显示Loading图片，接收结束后隐藏
            beforeSend: function () { $("#loadImg").show(); $("#pagerNumber").hide() }, // 发送数据之前
            complete: function () { $("#loadImg").hide(); $("#pagerNumber").show() }, // 接收数据完毕
            // Ajax成功
            success: function (json) {
                try {
                    var listDate = json.Orders;
                    var html = "";
                    $.each(listDate, function (i, n) {
                        html += "<li class=\"b\"><span class=\"title\">" + n.OrderID + "</span><span class=\"date\">" + n.pos + "</span></li>";
                    });
                    // 输出HTML
                    $("#PageContain").html(html);
                } catch (e) {
                    alert(e);
                }
            }
        }); // Ajax_end
        // 加入分页插件的绑定，第一个参数pageCount为总共多少条数据
        $("#pagerNumber").pagination(pageCount, {
            callback: pageselectCallback,
            prev_text: '« 上一页',
            next_text: '下一页 »',
            items_per_page: PageSize,     // 每页显示条数
            current_page: pageindx,  // 当前页索引,这里0为第一页
            num_display_entries: 6,  // 前面显示几个按钮
            num_edge_entries: 2  // 后面显示几个按钮
        });
    }  // InitData_fun_end
});// ready_end

getdata.ashx代码：

public void ProcessRequest(HttpContext context)
        {
            BLL.orders bll = new BLL.orders();

            //不让浏览器缓存
            context.Response.Buffer = true;
            context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-1);
            context.Response.AddHeader("pragma", "no-cache");
            context.Response.AddHeader("cache-control", "");
            context.Response.CacheControl = "no-cache";
            context.Response.ContentType = "text/plain";

            string action = context.Request["action"];

            if (action == "pager") // 取出分页列表
            {
                // 排序字段
                string order = context.Request["order"].ToString().Trim();
                string orderType = context.Request["orderType"].ToString().Trim();
                // 页大小
                string pageSizeStr = context.Request["pageSize"].ToString().Trim();
                int pageSize;
                int.TryParse(pageSizeStr, out pageSize);
                if (pageSize == 0)
                {
                    pageSize = 10;
                }
                // 页索引
                string pageIndexStr = context.Request["pageIndex"].ToString().Trim();
                int pageIndex;
                int.TryParse(pageIndexStr, out pageIndex);
                if (pageIndex == 0)
                {
                    pageIndex = 1;
                }

                // 提取数据
                DataTable dt = bll.GetList(order, orderType, pageSize, pageIndex, StrWhere(context)).Tables[0];
                // 讲DataTable转换为Json
                string jsonDate = Common.WebHelper.DataTableToJSON(dt, "Orders");
                context.Response.Write(jsonDate);
            }
            else if (action == "pageCount")  // 获取总条数
            {
                context.Response.Write(bll.GetRecordCount(StrWhere(context)));
            }
        }

        /// <summary>
        ///  查询条件
        /// </summary>
        private string StrWhere(HttpContext context)
        {
            return "1=1";
        }

json_pager.html代码：

<!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>
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="js/jquery.pagination.js" type="text/javascript"></script>
    <link href="Css/pagination.css" rel="stylesheet" type="text/css" />
    <script src="js/jsonpager.js" type="text/javascript"></script>
</head>
<body>
    <table>
        <tr class="newrow">
            <td>
            </td>
        </tr>
    </table>
    <!--content list-->
    <ul id="PageContain" class="newslist">
        <!--加载图片-->
        <li id="loadImg" style="width: 100%; height: 60px; text-align: center; margin-top: 50px;">
            <img src="images/spinner3-greenie.gif" alt="" /></li>
        <!--内容会动态输出到这里面-->
    </ul>
    <!--pageNumber-->
    <div id="pagerNumber" class="digg">
    </div>
</body>
</html>

好了。代码就 这么多。

运行截图如下，数据显示没有样式。