[JQ权威指南]jQuery Pagination分页插件

最新推荐文章于 2025-05-03 13:02:30 发布

厦门德仔

最新推荐文章于 2025-05-03 13:02:30 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： # JQuery 文章标签： pagination

本文链接：https://blog.youkuaiyun.com/david_520042/article/details/53281938

JQuery 专栏收录该内容

63 篇文章

订阅专栏

本文介绍了一种使用JQuery.pagination插件实现分页功能的方法，并通过一个具体案例展示了如何结合C#从数据库中获取新闻信息并进行分页显示。文章详细解释了插件的配置参数及使用技巧，同时还探讨了筛选查询时遇到的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

(1)准备插件
JQuery.pagination.js/JQuery.pagination.css
(2)JQuery.pagination的各个参数的说明如下：
参数
参数名描述参数值
maxentries 总条目数必选参数，整数
items_per_page 每页显示的条目数可选参数，默认是10
num_display_entries 连续分页主体部分显示的分页条目数可选参数，默认是10
current_page 当前选中的页面可选参数，默认是0，表示第1页
num_edge_entries 两侧显示的首尾分页的条目数可选参数，默认是0
link_to 分页的链接字符串，可选参数，默认是”#”
prev_text “前一页”分页按钮上显示的文字字符串参数，可选，默认是”Prev”
next_text “下一页”分页按钮上显示的文字字符串参数，可选，默认是”Next”
ellipse_text 省略的页数用什么文字表示可选字符串参数，默认是”…”
prev_show_always 是否显示“前一页”分页按钮布尔型，可选参数，默认为true，即显示“前一页”按钮
next_show_always 是否显示“下一页”分页按钮布尔型，可选参数，默认为true，即显示“下一页”按钮
callback 回调函数默认无执行效果

(3)案例：
结合C#取数据库中的新闻信息：
HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JQueryPage.aspx.cs" Inherits="ERP_JQPagination" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!--分页所需要的css文件-->
    <link href="../Jquery/pagination.css" type="text/css" rel="stylesheet" />
    <!--分页所需要的js文件-->
    <script src="../Jquery/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../Jquery/jquery.pagination.js" type="text/javascript"></script>
    <style type="text/css">
        body { font-size:14px;}
        a { cursor:pointer;}
        #pageintool { width:800px; margin:auto;}
        .Datastyle { height:25px; margin-top:10px; float:left; margin-left:10px; font-size:14px;}
        .Pagination { margin-top:5px; height:25px; float:left;}
        #toPage { background-image:url('../Images/bg.gif'); background-repeat:repeat-x; width:50px;height:20px; line-height:20px; margin:5px 5px 0px 10px; text-align:center; float:left;}
        #BtntoPage { width:50px; background-color:#4800ff; color:white; height:30px; text-align:center; line-height:25px;}
        #tab { width:800px; margin:auto; text-align:center; border:1px solid #d6d6d6; border-collapse:collapse; border-radius:5px; background-image:url('../Images/bg.gif'); background-repeat:repeat-x; margin-bottom:5px;}
            #tab tr {
            }
        #tab tr td{height:30px; line-height:30px; border-bottom:1px dashed #d6d6d6;}
        #tab tr th {background-image:url('../Images/bg.gif'); background-repeat:repeat-x; height:30px; line-height:30px;}
        .td1 { width:60px;}
        .td2 {text-align:left;}
        .astyle { color:#000; text-decoration:none;}
    </style>

    <script type="text/ecmascript">

        var pageIndex = 0;     //页索引
        var pageSize = 5;    //每页显示的条数

        $(document).ready(function () {


            $("#pageSize").text(pageSize);//每页显示条数
            $("#DataSum").text(<%=pageCount%>); //总记录数    

            Init(0); //初始化页面为0，即为第一页   

            $("#toPage").val(1);//初始化页面，跳转框默认为1

            $("#Pagination").pagination(<%=pageCount%>, {

                callback: PageCallback,//回调函数
                prev_text: '上一页',//前一页显示的文本文字，字符串参数，可选，默认是"Prev"
                next_text: '下一页',//下一页显示的文本文字， 字符串参数，可选，默认是"Next"
                items_per_page: pageSize,//每页显示的条目数,已经设置为5条
                num_display_entries: 5,//连续分页主体部分显示的分页条目数,默认是10     
                current_page: pageIndex,//当前页
                num_edge_entries: 1//两侧显示的首尾分页的条目数
            });

            ///回调函数，当点击链接翻页的时候此函数被调用，此函数接受两个参数，新一页的索引和pagination容器（一个DOM元素）。如果回调函数返回false，则pagination事件停止执行
            function PageCallback(index, jq) {
                $("#toPage").val(index+1);//在点击分页按钮翻页的时候，输入框跳转的值也跟随变化
                Init(index);
            }

            //输入框跳转按钮
            $("#BtntoPage").click(function(){

                var $topageindex = $("#toPage").val();//获取输入框的跳转值

                var $reg_check= /^[-+]?\d+$/;//验证非数字正则表达式

                if($reg_check.test($topageindex))
                {
                    //计算出总页数，计算方法为：（总记录数+每页显示数-1)/每页显示数
                    var $totalPage = ((parseInt(<%=pageCount%>)+pageSize-1)/pageSize);
                    if(parseInt($topageindex)<1||parseInt($topageindex)>$totalPage)
                    {
                        alert("无效页码！！超出页码索引值！！！");
                        $("#toPage").select().focus();
                    }else
                    {
                        alert("正在为您跳转第:"+$topageindex+"页.......");

                        ///加入这段，主要实现分页按钮的改变选中样式
                        $("#Pagination").pagination(<%=pageCount%>, {
                            callback: PageCallback,//回调函数
                            prev_text: '上一页',//前一页显示的文本文字，字符串参数，可选，默认是"Prev"
                            next_text: '下一页',//下一页显示的文本文字， 字符串参数，可选，默认是"Next"
                            items_per_page: pageSize,//每页显示的条目数,已经设置为5条
                            num_display_entries: 5,//连续分页主体部分显示的分页条目数,默认是10     
                            current_page: $topageindex-1,//注意，这里的当前页码改为了，文本框输入的值-1，页码是从0开始，所以要减1
                            num_edge_entries: 1//两侧显示的首尾分页的条目数
                        });

                        Init($topageindex-1);
                    }
                }else
                {
                    alert("只能输入数字！！！！");
                    $("#toPage").select().focus();
                }
            })


            /// 筛选查询
            $("#selectednews").change(function(){

                $("#Pagination").pagination(<%=pageCount%>, {
                       callback: PageCallback,//回调函数
                       prev_text: '上一页',//前一页显示的文本文字，字符串参数，可选，默认是"Prev"
                       next_text: '下一页',//下一页显示的文本文字， 字符串参数，可选，默认是"Next"
                       items_per_page: pageSize,//每页显示的条目数,已经设置为5条
                       num_display_entries: 5,//连续分页主体部分显示的分页条目数,默认是10     
                       current_page: pageIndex,//当前页
                       num_edge_entries: 1//两侧显示的首尾分页的条目数
                });

                $("#pageSize").text(pageSize);//每页显示条数
                $("#DataSum").text(<%=pageCount%>); //总记录数    

               $("#toPage").val(1);//初始化页面，跳转框默认为1

                Init(pageIndex);
            })

        });

        ///提交数据
        function Init(pageIndex) {
            if(parseInt($("#selectednews option:selected").val())>0)
            {
                $.ajax({
                    type: "POST",//提交方式为post
                    dataType: "text",//数据类型
                    url: 'JQueryPage.aspx',//提交到后台处理页           
                    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize+"&options="+$("#selectednews option:selected").text(),//最主要的两个参数，用于获取数据库中的指定范围内的数据                                 
                    success: function (data) {
                        if (data != "") {
                            $("#tab tr:gt(0)").remove();//移除现有的数据行
                            $("#tab").append(data);
                        }
                    }
                })
            }else
            {
                $.ajax({
                    type: "POST",//提交方式为post
                    dataType: "text",//数据类型
                    url: 'JQueryPage.aspx',//提交到后台处理页           
                    data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,//最主要的两个参数，用于获取数据库中的指定范围内的数据                                 
                    success: function (data) {
                        if (data != "") {
                            $("#tab tr:gt(0)").remove();//移除现有的数据行
                            $("#tab").append(data);
                        }
                    }
                })
            }
        }

</script>

</head>
<body>
    <form id="form1" runat="server">

    <div>
        <div style="width:800px;height:30px; line-height:30px; margin:10px auto 10px auto;">
            根据类别筛选：
            <select style="width:150px; background-image:url('../Images/bg.gif'); background-repeat:repeat-x;" id="selectednews">
                <option value="0">全部新闻</option>
                <option value="1">行业新闻</option>
                <option value="2">公司动态</option>
            </select>
        </div>
        <table id="tab">
              <tr>
                <th class="td1">编号</th>
                <th class="td2">新闻标题</th>
                 <th>新闻类型</th>
                 <th>浏览量</th>
                 <th>发布日期</th>
                </tr>
        </table>
        <div id="pageintool">
             <div id="Pagination" class="Pagination" ></div>
             <span class="Datastyle"><label style="color:red;" id="pageSize"></label>条/页-总共<label style="color:red;" id="DataSum"></label>条</span>
            <input type="text" id="toPage" />
            <input type="button" value="跳转" id="BtntoPage" />
        </div>

       <div style="width:800px; margin:30px auto auto auto ;">
            <p>增加功能1----总记录下，输入指定页面可进行跳转。</p>
            <p>增加功能2----筛选指定参数，进行筛选查询，也可输入指定页面可进行跳转。</p>
            <p>问题总结：筛选查询出结果后，未能正确更新总记录数，导致分页码显示不正常。是pagination控件BUG问题？还是编程问？</p>
       </div>
    </div>
    </form>
</body>
</html>

CS:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using SqlServerDAL;
using System.Text;
using System.Data;
using System.Data.SqlClient;

public partial class ERP_JQPagination : System.Web.UI.Page
{
    public int pageCount = 0;//数据库总记录数

    public int fenpageCount = 0;

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {

            pageCount = GetTotalPage();//获取数据库总条数

            if (Request["pageIndex"] != null && Request["pageSize"] != null)
            {
                int pageSize = Convert.ToInt32(Request["pageSize"]) == 0 ? 1 : Convert.ToInt32(Request["pageSize"]);
                int pageIndex = Convert.ToInt32(Request["pageIndex"]) == 0 ? 1 : Convert.ToInt32(Request["pageIndex"]);

                if (Request["options"] != null)
                {
                    string options = Request["options"].ToString();
                    pageCount = GetTotalPageBykey(options);//始终更新不了总记录数.....
                    Response.Write(GetPageByKey(pageIndex, pageSize, options));
                    Response.End();
                }
                else
                {
                    Response.Write(GetTalentPoolFenPageNumber(pageSize, pageIndex));
                    Response.End();
                }
            }
        }
    }

    /// <summary>
    /// 根据类型获取总记录数
    /// </summary>
    /// <param name="options"></param>
    /// <returns></returns>
    private int GetTotalPageBykey(string options)
    {
        string sql = "select COUNT(*) from IndustryNews where NewsType=  '" + options + "'";
        int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.conn, System.Data.CommandType.Text, sql).ToString());
        return sumData;
    }

    /// <summary>
    /// 根据参数筛选出数据
    /// </summary>
    /// <param name="pageIndex"></param>
    /// <param name="pageSize"></param>
    /// <param name="options"></param>
    /// <returns></returns>
    private string GetPageByKey(int pageIndex, int pageSize, string options)
    {
        StringBuilder sb = new StringBuilder();

        string sql = "SELECT TOP " + pageSize + " NewsNo,NewsTitle,NewsType,BrowserCount,PublishDate FROM IndustryNews WHERE NewsType = '" + options + "' AND ( NewsNo NOT IN (SELECT TOP " + pageSize * (pageIndex - 1) + " NewsNo FROM IndustryNews WHERE NewsType='" + options + "' ORDER BY NewsNo DESC)) ORDER BY PublishDate DESC";

        SqlConnection conn = new SqlConnection(SqlHelper.conn);

        conn.Open();

        SqlCommand cmd = new SqlCommand(sql, conn);

        SqlDataReader dr = cmd.ExecuteReader();

        try
        {
            while (dr.Read())
            {
                ///如果需要将个别字段转换，可提前转换，或增加样式

                sb.Append("<tr>");
                sb.Append("<td class='td1'>" + dr["NewsNo"].ToString() + "</td>");
                if (int.Parse(dr["BrowserCount"].ToString()) > 100)
                {
                    sb.Append("<td class='td2'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a>&nbsp;<img src='img/hot.gif' alt=''/></td>");
                }
                else
                {
                    sb.Append("<td style='text-align:left;'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a></td>");
                }
                sb.Append("<td>" + dr["NewsType"].ToString() + "</td>");
                sb.Append("<td>" + dr["BrowserCount"].ToString() + "</td>");
                sb.Append("<td>" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "</td>");
                sb.Append("</tr>");
            }
        }
        finally
        {
            dr.Close();
            conn.Close();
        }

        return sb.ToString();
    }
    /// <summary>
    /// 根据页面显示数，和当前也得索引进行分页
    /// </summary>
    /// <param name="pageSize">每页显示数量</param>
    /// <param name="currPageIndex">当前页索引</param>
    /// <returns></returns>
    public string GetTalentPoolFenPageNumber(int pageSize, int currPageIndex)
    {
        StringBuilder sb = new StringBuilder();

        string sql = "SELECT TOP " + pageSize + " NewsNo,NewsTitle,NewsType,BrowserCount,PublishDate FROM IndustryNews WHERE NewsNo NOT IN (SELECT TOP " + pageSize * (currPageIndex - 1) + " NewsNo FROM IndustryNews ORDER BY NewsNo DESC) ORDER BY PublishDate DESC";

        SqlConnection conn = new SqlConnection(SqlHelper.conn);

        conn.Open();

        SqlCommand cmd = new SqlCommand(sql, conn);

        SqlDataReader dr = cmd.ExecuteReader();

        try
        {
            while (dr.Read())
            {
                ///如果需要将个别字段转换，可提前转换，或增加样式

                sb.Append("<tr>");
                sb.Append("<td class='td1'>" + dr["NewsNo"].ToString() + "</td>");
                if (int.Parse(dr["BrowserCount"].ToString()) > 100)
                {
                    sb.Append("<td class='td2'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a>&nbsp;<img src='img/hot.gif' alt=''/></td>");
                }
                else
                {
                    sb.Append("<td style='text-align:left;'><a class='astyle' href='#'>" + dr["NewsTitle"].ToString() + "</a></td>");
                }
                sb.Append("<td>" + dr["NewsType"].ToString() + "</td>");
                sb.Append("<td>" + dr["BrowserCount"].ToString() + "</td>");
                sb.Append("<td>" + System.DateTime.Parse(dr["PublishDate"].ToString()).ToShortDateString() + "</td>");
                sb.Append("</tr>");
            }
        }
        finally
        {
            dr.Close();
            conn.Close();
        }

        return sb.ToString();
    }

    /// <summary>
    /// 获取数据库总条数
    /// </summary>
    /// <returns></returns>
    private int GetTotalPage()
    {
        string sql = "select COUNT(*) from IndustryNews";
        int sumData = int.Parse(SqlHelper.ExecuteScalar(SqlHelper.conn, System.Data.CommandType.Text, sql).ToString());
        return sumData;
    }


}