JQuery实现分页程序代码

开发 前端
做Web开发的程序员,分页时在所难免的,微软GridView、AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuery实现分页,并且使用。

做Web开发的程序员,分页时在所难免的,微软GridView、AspPager等设置分页数据可以自动分页,但是这里浏览器会闪动,用户体验不是很友好,在此我整理了JQuery实现分页,并且使用。

JQuery绑定模板,显示数据

首先Default.aspx页面需要引用的JS文件

JQuery采用 1.4.1.1 下载地址:http://pan.baidu.com/share/link?shareid=3024434948&uk=2920032010

JQuery数据显示模板JS 下载地址:http://pan.baidu.com/share/link?shareid=3030793948&uk=2920032010

分页按钮样式 下载地址:http://pan.baidu.com/share/link?shareid=3146737028&uk=2920032010

Default.aspx页面js代码,如下,每页条数可以自定义,也可以放置配置文件中,queryString函数是根据URL参数名称,获取参数的值

<script type="text/javascript">  
        var pagesize = 10;  
        var page = thispage();  
        $(document).ready(function () {  
            ajaxList(page);  
        });  
 
        function queryString(pname) {  
            var query = location.search.substring(1);  
            var str = "";  
            params = query.split("&");  
            if (params.length > 0) {  
                for (var n in params) {  
                    var pairs = params[n].split("=");  
                    if (pairs[0] == pname) {  
                        str = pairs[1];  
                        break;  
                    }  
                }  
            }  
            return str;  
        }  
 
        function thispage() {  
            var r = /^[1-9][0-9]*$/;  
            if (queryString('page') == ''return 1;  
            if (r.test(queryString('page')))  
                return parseInt(queryString('page'));  
            else 
                return 1;  
        }  
 
        function ajaxList(currentpage) {  
            if (currentpage != null) page = currentpage;  
            $.ajax({  
                type: "get",//get类型,获取用QueryString方法,post类型,用Form获取传值  
                dataType: "json",  
                data: "pageIndex=" + currentpage + "&pagesize=" + pagesize + "&clienttt=" + Math.random(),  
                url: "Member_Ajax.aspx",  
                error: function (XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },  
                success: function (d) {  
                    switch (d.result) {  
                        case '-1':  
                            Alert(d.returnval);  
                            break;  
                        case '0':  
                            Alert(d.returnval);  
                            break;  
                        case '1':  
                            $("#ajaxList").setTemplateElement("tplList"null, { filter_data: true });  
                            $("#ajaxList").processTemplate(d);  
                            $("#ajaxPageBar").html(d.pagebar);  
                            break;  
                    }  
                }  
            });  
        }  
 
 </script> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.

Default.aspx页面Form代码如下,页面数据使用JQuery jTemplates绑定数据,非常方便,只需设置JSON格式数据,引用JS文件即可

<textarea id="tplList" style="display: none"> 
            <table class="cooltable" width="300px"> 
            <thead> 
                <tr> 
                    <th align="center" scope="col" style="width:30px;"><input onclick="checkAllLine()" id="checkedAll" name="checkedAll" type="checkbox" title="全部选择/全部不选" /></th> 
                    <th scope="col" style="width:60px;">ID</th> 
                    <th width="120px">姓名</th> 
                    <th scope="col" width="60px">年龄</th> 
                      
               </tr> 
            </thead> 
            <tbody> 
    {#foreach $T.table as record}  
    <tr> 
        <td align="center"> 
            <input class="checkbox" name="selectID" type="checkbox" value='{$T.record.MemberNo}' /> 
        </td> 
        <td align="center">{$T.record.Id}</td> 
        <td align="left"> 
            {$T.record.Name}  
        </td> 
        <td align="left"> 
            {$T.record.Age}  
        </td> 
    </tr> 
    {#/for}  
</tbody> 
            </table> 
     </textarea> 
    <div id="ajaxList" style="width:500px;"> 
    </div><br /> 
    <div id="ajaxPageBar" style="width:500px;"> 
    </div> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.

$T.record.Id 中Id对应的是实体类Id属性

#p#

上面Javascript方法中用到Member_Ajax.aspx页面代码如下,注意:这里是将数据已JSON格式输出到页面,配合JQuery数据模板使用,所有Member_Ajax.aspx页面,不应该包含Html标签,其代码格式如下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Member_Ajax.aspx.cs" Inherits="Nick.Kuang.Web.Member_Ajax" %> 
  • 1.

Member_Ajax.aspx cs页面代码

protected void Page_Load(object sender, EventArgs e)  
        {  
            Response.Write(GetAll());  
        }  
 
        private string GetAll()  
        {  
            List<Student> list = new List<Student>();  
 
            for (int i = 0; i < 100; i++)  
            {  
                list.Add(new Student { Id = iName = "Name" + i, Age = i });  
            }  
              
            int pageIndex = GetPage();  
            int pageSize = StrToInt(QueryString("pagesize"), 10); ;  
            JavaScriptSerializer javascriptSerializer = new JavaScriptSerializer();  
 
            string result = javascriptSerializer.Serialize(list.Skip(pageSize * (pageIndex - 1)).Take(pageSize).ToList());  
            string response = "{\"result\" :\"1\"," +  
                "\"returnval\" :\"操作成功\"," +  
                "\"pagebar\" :\"" + PageBar.GetPageBar(3, "js", 2, list.Count, pageSize, pageIndex, "javascript:ajaxList(<#page#>);") + "\"," +  
               "\"" + "totalCountStr" + "\":" + 10 + ",\"" + "table" + "\":" + result +   
                "}";  
            return response;  
        }  
 
        private static int GetPage()  
        {  
            int page = StrToInt(QueryString("pageIndex"), 0) < 1 ? 1 : StrToInt(QueryString("pageIndex"), 0);  
            return page;  
        }  
 
        private static int StrToInt(string value, int defaultValue)  
        {  
            if (IsNumeric(value))  
                return int.Parse(value);  
            else  
                return defaultValue;  
        }  
 
        /// <summary> 
        /// 获取querystring  
        /// </summary> 
        /// <param name="s">参数名</param> 
        /// <returns>返回值</returns> 
        private static string QueryString(string s)  
        {  
            if (HttpContext.Current.Request.QueryString[s] != null && HttpContext.Current.Request.QueryString[s] != "")  
            {  
                return SafetyQueryS(HttpContext.Current.Request.QueryString[s].ToString());  
            }  
            return string.Empty;  
        }  
 
        /// <summary> 
        /// 将字符串中的一些标签过滤  
        /// </summary> 
        /// <param name="theString"></param> 
        /// <returns></returns> 
        private static string SafetyQueryS(string theString)  
        {  
            string[] aryReg = { "'", ";", "\"", "\r", "\n", "<", ">" };  
            for (int i = 0; i < aryReg.Length; i++)  
            {  
                theStringtheString = theString.Replace(aryReg[i], string.Empty);  
            }  
            return theString;  
        }  
 
        private static bool IsNumeric(string value)  
        {  
            System.Text.RegularExpressions.Regex myRegex = new System.Text.RegularExpressions.Regex("^[-]?[1-9]*[0-9]*$");  
            if (value.Length == 0)  
            {  
                return false;  
            }  
            return myRegex.IsMatch(value);  
        } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.

使用JavaScriptSerializer中的Serialize方法可以将Object类型数据转换成JSON格式的数据,告别以前拼接成字串的方法

Student实体类代码属性

public class Student  
    {  
        public int Id { get; set; }  
 
        public string Name { get; set; }  
 
        public int Age { get; set; }  
    } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

#p#

分页中用到的PageBar类代码,分页调用Default.aspx中ajaxList函数,实现无刷新分页

public class PageBar  
    {  
        /// <summary>  
        /// 完整模式:数字+上下页+首末+总记录信息+指定页码翻转  
     /// </summary>  
        /// <param name="stype"></param>  
        /// <param name="stepNum"></param>  
        /// <param name="pageRoot"></param>  
        /// <param name="pageFoot"></param>  
        /// <param name="countNum"></param>  
        /// <param name="currentPage"></param>  
        /// <param name="Http1"></param>  
        /// <param name="HttpM"></param>  
        /// <param name="HttpN"></param>  
        /// <param name="limitPage"></param>  
        /// <returns></returns>  
        private static string GetDetailbar(string stype, int stepNum, int pageRoot, int pageFoot, int pageCount, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)  
        {  
            StringBuilder sb = new StringBuilder();  
            sb.Append("<div class='p_btns'>");  
            //sb.Append("<span class='total_count'>共" + countNum.ToString() + "条,当前第" + currentPage.ToString() + "/" + pageCount.ToString() + "页&nbsp;&nbsp;&nbsp;</span>");  
            sb.Append("<span class='total_count'>共" + countNum.ToString() + "条记录/" + pageCount.ToString() + "页&nbsp;&nbsp;</span>");  
            if (countNum > pageSize)  
            {  
                if (currentPage != 1)//只要不是***页  
                    sb.Append("<a target='_self' href='" + GetPageUrl(currentPage - 1, Http1, HttpM, HttpN, limitPage) + "' title='上一页'>&laquo;</a>");  
                if (pageRoot > 1)  
                {  
                    sb.Append("<a target='_self' href='" + GetPageUrl(1, Http1, HttpM, HttpN, limitPage) + "'>1..</a>");  
                }  
                if (stepNum > 0)  
                {  
                    for (int i = pageRoot; i <= pageFoot; i++)  
                    {  
                        if (i == currentPage)  
                            sb.Append("<span class='currentpage'>" + i.ToString() + "</span>");  
                        else 
                            sb.Append("<a target='_self' href='" + GetPageUrl(i, Http1, HttpM, HttpN, limitPage) + "'>" + i.ToString() + "</a>");  
                        if (i == pageCount)  
                            break;  
                    }  
                }  
                if (pageFoot < pageCount)  
                {  
                    sb.Append("<a target='_self' href='" + GetPageUrl(pageCount, Http1, HttpM, HttpN, limitPage) + "'>.." + pageCount + "</a>");  
 
                }  
                if (currentPage != pageCount)//只要不是***一页  
                    sb.Append("<a target='_self' href='" + GetPageUrl(currentPage + 1, Http1, HttpM, HttpN, limitPage) + "' title='下一页'>&raquo;</a>");  
                if (stype == "html")  
                    sb.Append("<span class='jumppage'>转到第 <input type='text' name='custompage' size='2' onkeyup=\"this.value=this.value.replace(/\\D/g,'')\" onafterpaste=\"this.value=this.value.replace(/\\D/g,'')\" onkeydown=\"if(event.keyCode==13) {window.location='" + HttpN + "'.replace('<#page#>',this.value); return false;}\" /> 页</span>");  
            }  
            sb.Append("</div>");  
            return sb.ToString();  
        }  
 
        /// <summary>  
        /// 分页导航  
        /// </summary>  
        /// <param name="mode">支持1=simple,2=normal,3=full</param>  
        /// <param name="stype">html/js,只有当stype为html且mode为3的时候显示任意页的转向</param>  
        /// <param name="stepNum">步数,如果步数为i,则每页的数字导航就有2i+1</param>  
        /// <param name="countNum">记录总数</param>  
        /// <param name="pageSize">每页记录数</param>  
        /// <param name="currentPage">当前页码</param>  
        /// <param name="Http1">第1页的链接地址模板,支持js</param>  
        /// <param name="HttpM">第M页的链接地址模板,支持js,M不大于limitPage</param>  
        /// <param name="HttpN">第N页的链接地址模板,支持js,N大于limitPage</param>  
        /// <param name="limitPage"></param>  
        /// <returns></returns>  
        public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string Http1, string HttpM, string HttpN, int limitPage)  
        {  
            string pagebar = "";  
            //if (countNum > pageSize)  
            //{  
            int pageCount = countNum % pageSize == 0 ? countNum / pageSize : countNum / pageSize + 1;  
            currentPage = currentPage > pageCount ? pageCount : currentPage;  
            currentPage = currentPage < 1 ? 1 : currentPage;  
            int stepageSize = stepNum * 2;  
            int pageRoot = 1;  
            int pageFoot = pageCount;  
            pageCount = pageCount == 0 ? 1 : pageCount;  
            if (pageCount - stepageSize < 1)//页数比较少  
            {  
                pageRoot = 1;  
                pageFoot = pageCount;  
            }  
            else 
            {  
                pageRoot = currentPage - stepNum > 1 ? currentPage - stepNum : 1;  
                pageFoot = pageRoot + stepageSize > pageCount ? pageCount : pageRoot + stepageSize;  
                pageRoot = pageFoot - stepageSize < pageRoot ? pageFoot - stepageSize : pageRoot;  
            }  
             
            pagebar = GetDetailbar(stype, stepNum, pageRoot, pageFoot, pageCount, countNum, pageSize, currentPage, Http1, HttpM, HttpN, limitPage);  
                   
            return pagebar;  
        }  
 
        public static string GetPageBar(int mode, string stype, int stepNum, int countNum, int pageSize, int currentPage, string HttpN)  
        {  
            return GetPageBar(mode, stype, stepNum, countNum, pageSize, currentPage, HttpN, HttpN, HttpN, 0);  
        }  
 
        public static string GetPageUrl(int chkPage, string Http1, string HttpM, string HttpN, int limitPage)  
        {  
            string Http = string.Empty;  
            if (chkPage == 1)  
                Http = Http1;  
            else 
                Http = (chkPage > limitPage || limitPage == 0) ? HttpN : HttpM;  
            return Http.Replace("<#page#>", chkPage.ToString());  
        }  
    } 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.

代码基本上写好了,希望对大家有用,一起学习,一起进步。

原文链接:http://www.cnblogs.com/nickkuang/p/3222416.html

责任编辑:林师授 来源: 博客园
相关推荐

2010-01-22 15:09:11

VB.NET下载程序

2010-07-17 00:55:48

PHP Telnet

2011-11-09 13:59:27

代码腐烂

2009-06-03 14:42:21

Eclipse调试调试Java程序

2010-07-13 09:29:37

socketUDP协议

2011-11-03 15:44:10

程序员

2009-06-17 14:29:50

java程序代码

2010-01-15 10:48:29

C++程序代码

2010-03-23 14:12:43

Python开发Win

2013-12-02 15:25:38

jQuery插件

2009-08-24 18:06:36

源程序代码C#读取XML文件

2010-01-15 18:46:08

C++程序代码

2009-09-02 18:28:00

C#鼠标位置

2014-01-16 13:36:17

2013-04-22 11:34:30

BadNews恶意程序移动安全

2010-05-28 10:53:07

Linux串口测试工具

2023-11-17 11:55:54

Pythonretrying库

2021-05-07 09:00:00

JavaScript开发代码

2009-10-27 10:14:54

VB.NET正则表达式

2014-12-18 09:49:31

代码
点赞
收藏

51CTO技术栈公众号