ajax 笔记--不用刷新实现数据的分页显示 (下)

前面把cs代码全都贴得差不多了,现在也没有多少了

在那个moreAticle 又承继 Operator 类,这个类,就是一些常用的,如果反回首行首列值,返回所受影响的行数,返回一个DateSet,DataTable等等.下面是代码.

using  System;
using  System.Data;
using  System.Configuration;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Web.UI.HtmlControls;
using  XiaoTuNi.LHB_SQL_2005;
using  System.Data.SqlClient ;
/**/ /// <summary>
/// Operator 操作基类
/// </summary>
public   class  Operator : basePage 
... {
    public Operator()
    ...{
    }

    /**//// <summary>
    /// 返回受影响的行数
    /// </summary>
    /// <param name="executeString">执行的Sql语句,或存储过程名</param>
    /// <returns>true or false</returns>
    protected  static bool ExecuteNonQuery(string executeString)
    ...{
        int count = GetCommand.ExecuteNonQuery(executeString);
        if (count > 0)
        ...{
            return true;
        }
        else
        ...{
            return false;
        }
    }

    /**//// <summary>
    /// 返回首行首列的值
    /// </summary>
    /// <param name="executeString">执行的Sql语句,或存储过程名</param>
    /// <returns>true or false</returns>
    protected static string ExecuteScalar(string executeString)
    ...{
        string firstRow = GetCommand.ExecuteScalar(executeString);
        return firstRow;
    }

    /**//// <summary>
    /// 返回一个数据集
    /// </summary>
    /// <param name="executeString">执行的Sql语句,或存储过程名</param>
    /// <returns>DataSet</returns>
    protected static DataSet getDataSet(string execueString)
    ...{
        DataSet ds = GetCommand.getDataSet(execueString);
        return ds;
    }

    /**//// <summary>
    /// 返回一个数据集
    /// </summary>
    /// <param name="executeString">执行的Sql语句,或存储过程名</param>
    /// <param name="tableName">表的名称</param>
    /// <returns>DataSet</returns>
    protected static DataSet getDataSet(string executString, string tableName)
    ...{
        DataSet ds = GetCommand.getDataSet(executString, tableName);
        return ds;
    }

    /**//// <summary>
    /// 返回一张表
    /// </summary>
    /// <param name="executeString">执行的Sql语句,或存储过程名</param>
    /// <returns>DataTable</returns>
    protected static DataTable getDataTable(string executeString)
    ...{
        DataTable dt = GetCommand.getDataTable(executeString);
        return dt;
    }

    /**//// <summary>
    /// 返回一个只读对象
    /// </summary>
    /// <param name="executeString">执行的Sql语句,或存储过程名</param>
    /// <returns>SqlDataReader</returns>
    protected static SqlDataReader ExecuteReader(string executeString)
    ...{
        SqlDataReader sdr = GetCommand.ExecuteReader(executeString); //可能以后这里会出问题
        return sdr;
    }
    /**//// <summary>
    /// 获取主机MAC地址
    /// </summary>
    protected static string getComputeMACAddress
    ...{
        get ...{ return getComputeInformation.getComputeMAC; }
    }
    /**//// <summary>
    /// 获取主机的ＩＰ地址
    /// </summary>
    protected static string getComputeIpAddress
    ...{
        get ...{ return getComputeInformation.getComputeIpAddress; }
    }
    /**//// <summary>
    /// 获取主机名
    /// </summary>
    protected static string getComputeHostName
    ...{
        get ...{ return getComputeInformation.getComputeHostName; }
    }
}

 这个类是我的blog中用得相当平凡的一个类,添加删除修改等操作

都承继它.好了现在差不多了,就只差javascript代码了

//  JScript 文件
var taxisStatue  =   1 ;
var articlePageCount  =   0 ;
var numberValue  =   0 ;
function OnLoad_moreArticle()
... {
    articlePageCount = Blog_moreArticle.getPageCount().value;
    Blog_moreArticle.article(_doPostArticleDate);
}
function _doPostArticleDate(res)
... {
    try
    ...{
        var allContent = res.value.split("|||");
        var articleId = allContent[0].split("／／");
        var blogName = allContent[1].split("／／");
        var userName = allContent[2].split("／／");
        var title = allContent[3].split("／／");
        var issueTime = allContent[4].split("／／");
        var max = title.length - 1;
        var info = "";
        var middleValue = 0;
        var bbb = "";
        for(var i = 0 ; i < max ; i++)
        ...{
            info +='<tr><td><a href="MyBlog.aspx?BlogName='+ userName[i] + '" target="_blank" >［' + blogName[i] + '］</a></td><td> - <a href="MyBlog.aspx?BlogName='+ userName[i] + '" target="_blank" >' + userName[i] + '</a></td><td> - <a href="Reversion.aspx?Number=' + articleId[i] + '" target="_blank" >' + title[i] + ' </a></td><td> - <a href="javascript:void()">' + issueTime[i] + '</td></a></tr>'
        }
        info = '<table><tr><td><a href="javascript:_blogName()"> blog名 </a></td><td><a href="javascript:_userName()"> 用户名 </a></td><td><a href="javascript:_title()"> 标题 </a></td><td><a href="javascript:_issueTime()"> 时间 </a></td>' + info + '</table>';
        
        if(articlePageCount > 10) // 当页数大于10时，就显示出前十页.
        ...{
            if( numberValue > 5 && numberValue < articlePageCount-5)  //当点击的值在   5 <number< max - 5 之间时
            ...{
                middleValue = numberValue - 5;
                for(var i = 1 + middleValue ; i <= 10 + middleValue  ; i++)
                ...{
                    bbb +='<td><a href="javascript:pageNumber('+ i + ')">' + i + '</a></td>';
                }
            }
            else if(numberValue >= articlePageCount-5) //当点的页数在 number >= max - 5 时进入下面代码
            ...{
                for(var i = articlePageCount - 9 ; i <= articlePageCount  ; i++)
                ...{
                    bbb +='<td><a href="javascript:pageNumber('+ i + ')">' + i + '</a></td>';
                }
            }
            else //当点击的值在10以内就执行下面代码
            ...{
                for(var i = 1; i <= 10 ; i++)
                ...{
                    bbb +='<td><a href="javascript:pageNumber('+ i + ')">' + i + '</a></td>';
                }
            }
        }
        else //总页数小10的话就执行下面代码
        ...{
            for(var i = 1; i <= articlePageCount ; i++)
            ...{
                bbb +='<td><a href="javascript:pageNumber('+ i + ')">' + i + '</a></td>';
            }            
        }
        bbb = '<table>' + bbb + '</table>';
        document.getElementById("allArticle").innerHTML = info + bbb ;
    }
    catch(e)...{}
}

function pageNumber(number)
... {
    numberValue = number ;
    Blog_moreArticle.setArticlePageCount(number);
    Blog_moreArticle.article(_doPostArticleDate);
}

function _issueTime()
... {
    if(taxisStatue == 1)
    ...{
        taxisStatue = 2;
    }
    else
    ...{
        taxisStatue = 1;
    }
    Blog_moreArticle.article_issueTime(taxisStatue,_doPostArticleDate);
}
function _title()
... {
    if(taxisStatue == 1)
    ...{
        taxisStatue = 2;
    }
    else
    ...{
        taxisStatue = 1;
    }
    Blog_moreArticle.artitle_title(taxisStatue,_doPostArticleDate);
}
function _userName()
... {
    if(taxisStatue == 1)
    ...{
        taxisStatue = 2;
    }
    else
    ...{
        taxisStatue = 1;
    }
    Blog_moreArticle.article_userName(taxisStatue,_doPostArticleDate);
}
function _blogName()
... {
    if(taxisStatue == 1)
    ...{
        taxisStatue = 2;
    }
    else
    ...{
        taxisStatue = 1;
    }
    Blog_moreArticle.artitle_blogName(taxisStatue,_doPostArticleDate);
}

在这个javascript代码当中我没有对其异常处理

还有前面cs也是我也都没有做很好的处理

只是实现了,大家可以跟自己的要求,多加异常处理操作以减少错误次数.

下面就是Web的html代码了.这里有两个用户自定义控件,一个菜单,一个CopyRight了.

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

<% ... @ Register Src="../userControl/blogMenu.ascx" TagName="blogMenu" TagPrefix="uc1"  %>
<% ... @ Register Src="../userControl/CopyRight.ascx" TagName="CopyRight" TagPrefix="uc2"  %>

<! 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  runat ="server" >
     < title > 所有文章 </ title >
     < link  href ="../CSS/blog.css"  rel ="stylesheet"  type ="text/css"   />
     < script  type ="text/javascript"  src ="../JavaScript/moreArticle.js" ></ script >
</ head >
< body  onload ="OnLoad_moreArticle()" ; >
     < form  id ="form1"  runat ="server" >
     < div >
         < table >
             < tr >
                 < td >
                     < div >
                         < uc1:blogMenu  ID ="BlogMenu1"  runat ="server"   />
                        
                     </ div >
                 </ td >
             </ tr >
             < tr >
                 < td >
                     < div >
                         < table >
                             < tr  valign ="top" >
                                 < td >
                                     < div >
                                        
                                     </ div >
                                 </ td >
                                 < td >
                                     < div >
                                         < asp:Panel  ID ="panel1_allShowArticle"  runat ="server"  GroupingText ="所有文章" >
                                             < div  class ="allArticle"  id ="allArticle" >
                                            
                                             </ div >
                                         </ asp:Panel >
                                     </ div >
                                 </ td >
                                 < td >
                                     < div >
                                        
                                     </ div >
                                 </ td >
                             </ tr >
                         </ table >
                     </ div >
                 </ td >
             </ tr >
             < tr >
                 < td >
                     < div >
                         < uc2:CopyRight  ID ="CopyRight1"  runat ="server"   />
                        
                     </ div >
                 </ td >
             </ tr >
         </ table >
     </ div >
     </ form >
</ body >
</ html >

好了以上代码就是我实现像前部分图中所实现的分页了.