jQuery getJSON()+.ashx 实现分页(改进版)

下面就为您详细讲解“jQuery getJSON()+.ashx实现分页(改进版)”的攻略。

一、准备工作

1.创建基础网页

首先，您需要创建一个基础网页，html部分如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery getJSON()+.ashx 实现分页(改进版)</title>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <table id="table"></table>
    <div id="pageBar"></div>
</body>
</html>

其中，我们引入了jQuery库，并设置了一个表格和一个分页的div，这将在后续中用到。

2.创建服务器端处理程序(.ashx)

创建服务器端处理程序(.ashx)时需要注意以下几点:

1.需继承 IHttpHandler 接口

2.需实现方法：void ProcessRequest(HttpContext context)

3.需设置编码格式为 UTF-8

4.需输出 JSON 数据格式

下面是一个示例 Handler.ashx 文件：

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Collections.Generic;
using System.Runtime.Serialization.Json;
using System.Web.Script.Serialization;
using System.Text;

public class Handler : IHttpHandler {

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

        int page = Convert.ToInt32(context.Request.QueryString["page"]);
        int pageSize = 5;
        int total = 0;
        List<Dictionary<string, string>> dataList = new List<Dictionary<string, string>>();
        string constr = "your_connection_string";
        string cmd = string.Format("EXEC my_procedure {0}, {1}, '{2}'", page, pageSize, "your_condition");
        using(SqlConnection con = new SqlConnection(constr)) {
            con.Open();
            SqlCommand command = new SqlCommand(cmd, con);
            SqlDataReader dataReader = command.ExecuteReader();
            while(dataReader.Read()) {
                Dictionary<string, string> item = new Dictionary<string, string>();
                item.Add("id", dataReader["id"].ToString());
                item.Add("name", dataReader["name"].ToString());
                dataList.Add(item);
            }
            dataReader.Close();
            con.Close();
        }
        string countCmd = string.Format("SELECT COUNT(*) FROM your_table WHERE {0}", "your_condition");
        using(SqlConnection con = new SqlConnection(constr)) {
            con.Open();
            SqlCommand command = new SqlCommand(countCmd, con);
            total = Convert.ToInt32(command.ExecuteScalar());
            con.Close();
        }
        var data = new { code = 0, msg = "", count = total, data = dataList };
        JavaScriptSerializer jss = new JavaScriptSerializer();
        string jsonData = jss.Serialize(data);
        context.Response.Write(jsonData);
    }

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

二、实现分页

下面是实现分页的详细步骤：

1.定义全局变量

在 js 部分定义如下变量：

var pageSize = 5; // 每页显示条数
var pageIndex = 1; // 当前页码
var total = 0; // 数据总条数

2.绑定数据

编写一个 loadTableData() 方法，用以获取和绑定数据：

function loadTableData() {
    $.getJSON("Handler.ashx", { page: pageIndex }, function(data) {
        if(data.code === 0) {
            total = data.count;
            var dataList = data.data;
            var html = "";
            for(var i = 0; i < dataList.length; i++) {
                html += "<tr><td>" + dataList[i].id + "</td><td>" + dataList[i].name + "</td></tr>";
            }
            $("#table").html(html);
        }
    });
}

这里我们使用了jQuery的 getJSON() 方法获取服务器端返回的JSON数据，并通过一个循环将数据绑定到表格中。其中传入的参数为 { page: pageIndex } ，它表示请求的页码，这将在后续中用到。

3.渲染分页组件

编写一个 renderPageBar() 方法，用以渲染分页组件：

function renderPageBar() {
    var totalPage = Math.ceil(total / pageSize);
    var pageNum = (totalPage >= 9 && pageIndex > 4) ? 9 : totalPage;
    var pageStart = pageIndex > 4 ? pageIndex - 4 : 1;
    var pageEnd = pageStart + pageNum - 1;
    pageEnd = pageEnd > totalPage ? totalPage : pageEnd;
    var html = "<a href=\"javascript:void(0);\" class=\"btn-page\" data-pageno=\"" + 1 + "\">首页</a>";
    if(pageIndex > 1) {
        html += "<a href=\"javascript:void(0);\" class=\"btn-page prev-page\" data-pageno=\"" + (pageIndex - 1) + "\">上一页</a>";
    }
    for(var i = pageStart; i <= pageEnd; i++) {
        html += "<a href=\"javascript:void(0);\" class=\"btn-page " + (i == pageIndex ? "active" : "") + "\" data-pageno=\"" + i + "\">" + i + "</a>";
    }
    if(pageIndex < totalPage) {
        html += "<a href=\"javascript:void(0);\" class=\"btn-page next-page\" data-pageno=\"" + (pageIndex + 1) + "\">下一页</a>";
    }
    html += "<a href=\"javascript:void(0);\" class=\"btn-page\" data-pageno=\"" + totalPage + "\">尾页</a>";
    $("#pageBar").html(html);
}

这里通过计算得出总页数以及当前分页组件应显示的页码，然后生成 HTML 代码并通过 jQuery 将其渲染到页面上。其中，通过操作 data-pageno 属性存储页码信息，以方便后续的事件处理。

4.绑定分页组件事件

编写一个 bindPageEvents() 方法，用以绑定分页组件事件：

function bindPageEvents() {
    $("#pageBar").on("click", ".btn-page", function() {
        var pageno = $(this).data("pageno");
        if(pageno) {
            pageIndex = pageno;
            loadTableData();
            renderPageBar();
        }
    });
}

这里我们使用jQuery的事件委托机制，在上一步渲染分页组件时，为所有按钮绑定点击事件，并在事件中获取并更新当前页码，然后重新绑定数据和重新渲染分页组件。

5.初始化分页组件

完成以上步骤后，在 $(document).ready() 方法中初始化：

$(document).ready(function() {
    loadTableData();
    renderPageBar();
    bindPageEvents();
});

三、示例说明

下面给出两个示例说明，以帮助您更容易地理解上述步骤。

示例一：分页组件的样式修改

我们可以将示例中的分页组件样式通过 CSS 进行修改，以适应您的项目需要。例如，我们可以将分页组件的字体颜色改为红色：

#pageBar {
    margin-top: 20px;
    text-align: center;
}
.btn-page {
    display: inline-block;
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: red;
    cursor: pointer;
}
.btn-page:hover, .btn-page.active {
    background: #f60;
    color: #fff;
    border-color: #f60;
}

示例二：使用自定义参数进行查询

我们可以在 Handler.ashx 文件中，将接收到的 page 参数转换成自定义的查询参数，这样就可以根据不同的参数查询不同的数据。例如，我们可以新增一个 key 参数，用以指定查询的关键字：

string key = HttpUtility.UrlDecode(context.Request.QueryString["key"]).Trim();
string cmd = string.Format("EXEC my_procedure {0}, {1}, '{2}'", page, pageSize, key);
string countCmd = string.Format("SELECT COUNT(*) FROM your_table WHERE Name LIKE '%{0}%' AND {1}", key, "your_condition");

在实现这个需求时，您可能还需要在前端部分编写一个查询框，并将查询框的值传递至服务器端。这部分内容较为繁琐，就不再赘述。

这就是对“jQuery getJSON()+.ashx 实现分页(改进版)”攻略的详细讲解，希望能够对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery getJSON()+.ashx 实现分页(改进版) - Python技术站