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

简介: 源码下载:点击下载 强类型的DataSet中添加分页的方法:GetPageData(startRowIndex,endRowIndex) 和SelectCount()两个方法; GetPageData代码:里面的参数自己添加,因为VS不支持over(); select * from ( ...

源码下载:点击下载

强类型的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  +   " &nbsp;&nbsp;&nbsp;&nbsp;回复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  +   " &nbsp;&nbsp;&nbsp;&nbsp;回复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; 

 

目录
相关文章
|
7月前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
67 0
|
SQL 开发框架 前端开发
AJAX之四 Ajax控件工具集(下)
AJAX之四 Ajax控件工具集(下)
49 0
|
开发框架 前端开发 .NET
AJAX之四 Ajax控件工具集(中)
AJAX之四 Ajax控件工具集(中)
66 0
|
开发框架 前端开发 .NET
AJAX之四 Ajax控件工具集(上)
AJAX之四 Ajax控件工具集(上)
74 0
|
开发框架 前端开发 .NET
Ajax之三 Ajax服务器端控件(下)
Ajax之三 Ajax服务器端控件(下)
67 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
157 0
|
开发框架 前端开发 JavaScript
Ajax之三 Ajax服务器端控件(上)
Ajax之三 Ajax服务器端控件
70 0
|
前端开发
JavaWeb15(AJAX+JSON实现无刷新分页)
JavaWeb15(AJAX+JSON实现无刷新分页)
|
7月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
93 0
|
前端开发 JavaScript Java
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
Jquery+Ajax+Bootstrap Paginator实现分页的拼接
58 0