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

前面把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>

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