Ajax无刷新分页源码未使用分页控件

zoukankan html css js c++ java

Ajax无刷新分页源码未使用分页控件

源码下载：点击下载

强类型的DataSet中添加分页的方法：GetPageData(startRowIndex,endRowIndex) 和SelectCount()两个方法;

GetPageData代码：里面的参数自己添加，因为VS不支持over();

select * from
(
    SELECT Id, IpAddress, Comment, PostDate,row_number() over(order by postdate) as rownum
     FROM dbo.T_Comment
)t
where t.rownum>=@startRowIndex and t.rownum<=@endRowIndex

SelectCount代码：

SELECT COUNT(*) FROM T_Comment

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>
    <style type="text/css">
        ul
        {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }
        li
        {
            border-bottom: 1px dashed #000;
            padding: 5px;
            font-family: "微软雅黑";
            font-size: 12px;
        }
        .column
        {
            width: 80%;
            margin: 100px auto;
            padding: 10px;
            border: 1px solid #000;
        }
        p
        {
            background: #CCC;
            padding: 10px;
        }
        .divstyle
        {
            min-height: 50px;
            padding: 10px;
        }
        .trPage
        {
        }
    </style>
    <script type="text/javascript" language="javascript">
        $(function () {

            //请求默认显示第一页数据

            $.post("PageServices.ashx", { "action": "getpagedata", "pagenum": "1" }, function (data, status) {
                if (status == "success") {
                    var comments = $.parseJSON(data);
                    $("#ulComments li").remove();   //首先清空上一次的数据;
                    for (var i = 0; i < comments.length; i++) {
                        var comment = comments[i];
                        var li = $("<li><p>回复日期:" + comment.postDate + "    回复IP地址：" + comment.ipAddress + "</p><div class='divstyle'>" + comment.comment + "</div></li>");

                        $("#ulComments").append(li);
                    }
                }
            });

            $.post("PageServices.ashx", { "action": "getpagecount" }, function (data, status) {
                for (var i = 1; i <= data; i++) {
                    var td = $("<td><a href=''>" + i + "</a></td>");
                    $(".trPage").append(td);
                }

                //给链接添加click事件
                $(".trPage td").click(function (e) {
                    e.preventDefault();

                    $.post("PageServices.ashx", { "action": "getpagedata", "pagenum": $(this).text() }, function (data, status) {
                        var comments = $.parseJSON(data);  //使用JSON序列化数据;
                        $("#ulComments li").remove();   //首先清空上一次的数据;

                        for (var i = 0; i < comments.length; i++) {   //遍历响应的数据data
                            var comment = comments[i];   //取到每条评论

                            //最后向ul中加载li（数据的内容）
                            var li = $("<li><p>回复日期:" + comment.postDate + "    回复IP地址：" + comment.ipAddress + "</p><div class='divstyle'>" + comment.comment + "</div></li>");
                            $("#ulComments").append(li);
                        }
                    });
                });
            });
        });
    </script>
</head>
<body>
    <div class="column">
        <table>
            <tr class="trPage">
            </tr>
        </table>

        <ul id="ulComments">
        </ul>

        <table>
            <tr class="trPage">
            </tr>
        </table>
    </div>
</body>
</html>

一般处理程序代码：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Ajax无刷新分页.DataSetCommentTableAdapters;
using System.Web.Script.Serialization;

namespace Ajax无刷新分页
{
    /// <summary>
    /// PageServices 的摘要说明
    /// </summary>
    public class PageServices : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string action = context.Request["action"];

            if (action == "getpagecount")  //如果请求的参数是getpagecount（获取页数）
            {
                var adapter = new T_CommentTableAdapter();
                int count = adapter.SelectCount().Value;  //获取数据总条数
                int pageCount = count / 10;   //每页只显示10条

                if (count % 10 != 0)    //如果数据不够10条，则只显示第一页
                {
                    pageCount++;
                }
                context.Response.Write(pageCount);   //返回页数
            }
            else if (action == "getpagedata")   //如果请求的的参数是getpagedata（获取评论内容）
            {
                string pagenum = context.Request["pagenum"];   //获取客户端点击的是哪一页
                int iPageNum = Convert.ToInt32(pagenum);
                var adapter = new T_CommentTableAdapter();
                // (iPageNum-1)*10+1  第一条数据，（iPageNum）*10 最后一条数据;
                var data = adapter.GetPageData((iPageNum - 1) * 10 + 1, (iPageNum) * 10);

                List<Comment> list = new List<Comment>();   //由于数据过于复杂所引发异常，定义一个Comment的类，内有postDate,comment两个属性；
                foreach (var row in data)   //遍历data
                {
                    list.Add(new Comment()
                    {
                        postDate = row.PostDate.ToShortDateString(),
                        comment = row.Comment,
                        ipAddress = row.IpAddress
                    });
                }
                JavaScriptSerializer jss = new JavaScriptSerializer();
                context.Response.Write(jss.Serialize(list));  //返回序列化的数据;
            }
        }

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

    public class Comment
    {
        public string postDate { get; set; }
        public string comment { get; set; }
        public string ipAddress { get; set; }
    }
}

startIndex=pageIndex*pageSize-pageSize+1; //或 startIndex=(pageIndex-1)*pageSize+1；
endIndex=pageIndex+pageSize-1;

查看全文

相关阅读:
d3.js了解
 java常用验证码
 连接数据库的配置文件
 MD5加密的使用
 ssm下载文件
 Ajax基于rest风格上传图片
 web常见页面错误整理
 前后端一起用cookie来保存密码
 通用mapper插件
 ssm的maven依赖，直接复制可以使用

原文地址：https://www.cnblogs.com/zhuiyi/p/2052099.html