一步步打造漂亮的新闻列表（无刷新分页、内容预览）（3）

  前面两个章节我们将需求分析和概要设计简单介绍了，接下来是重点的编代码的阶段了（实现无刷新分页）。在编写代码之前，一定要有计划的去编写代码，不能一开始啥也不管就开始编代码，除非你特牛。

我们来看一下需求分析：

3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。

这里面有两个事件，都是js事件，我们用jquery代码来实现。

分页的话，我们采用jquery的分页插件pagination，官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件（最下面附下载地址）

先讲讲它的基本用法：

跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。

例如下面的使用代码：

$("#Pagination").pagination(56, {

num_edge_entries: 2,

num_display_entries: 4,

callback: pageselectCallback,

items_per_page:1

});

这段代码表示的含义是：总共有56(maxentries)个列表项，首尾两侧分页显示2(num_edge_entries)个，连续分页主体数目显示4(num_display_entries)个，回调函数为pageselectCallback(callback)，每页显示的列表项为 1(items_per_page)。您可以对照参数表修改配置这里的参数。

具体的用法可以参考官方文档或是http://www.cnblogs.com/aosiyelong/archive/2010/03/30/1700262.html

然后讲讲如何将它整合到我们这边来。

在NewsList.aspx页面中添加相关的js文件和css文件（最下面附下载地址）：jquery-1.4.1.js，pagination.js

<link type="text/css" rel="Stylesheet" href="css/newsList.css" />

<link type="text/css" rel="Stylesheet" href="css/pagination.css" />

<script src="js/jquery-1.4.1.js" type="text/javascript"></script>

<script src="js/jquery.pagination.js" type="text/javascript"></script>

然后，我们来看关键的js代码：

<script type="text/javascript" language="javascript">

$().ready(function() {

InitData(0);

});

//处理翻页

function pageselectCallback(page_id, jq) {

//alert(page_id);

InitData(page_id);

};

function InitData(pageindx)

{

var tbody = "";

var orderby="news_id";

$.ajax({

type: "POST",//用POST方式传输

dataType:"json",//数据格式JSON

url:'Ajax/NewsHandler.ashx',//目标地址

data:"pageno="+(pageindx+1)+"&orderby="+orderby,

success:function(json) {

$("#productTable tr:gt(0)").remove();

var productData = json.News;

$.each(productData, function(i, n) {

var trs = "";

trs += "<tr><td style='text-align:center'><a href=\"NewsRead.aspx?news_id="+n.news_id+"\" class=\"info2\" >" + n.news_title + "</a></td><td style='text-align:center'>" + n.news_readtimes + "</td><td style='text-align:center'>" + n.news_time + "</td></tr>";

tbody += trs;

});

$("#productTable").append(tbody);

//奇偶行颜色不同

$("#productTable tr:gt(0):odd").attr("class", "odd");

$("#productTable tr:gt(0):even").attr("class", "enen");

 

}

});

$("#pagination").pagination(<%=pagecount %>, {

callback: pageselectCallback,

prev_text: '<< 上一页,

next_text: '下一页 >>',

items_per_page:9,

num_display_entries:6,

current_page:pageindx,

num_edge_entries:2

});

}

</script>

这里有必要说明下json数据格式，JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式，它是类似于xml的数据交换格式，格式示例如下：

[
 {
 "term":"BACCHUS",
 "part":"n.",
 "definition":"A convenient deity invented by the ancients as an excuse for getting drunk.",
 "quote":[
 "Is public worship,then,a sin.",
 "That for devotions paid to Bacchus",
 "The lictors dare to run us in.",
 "And resolutely thump and whack us?"
 ],
 "author":"Jorace"
 },
 {
 "term":"BACKBITE",
 "part":"v.t.",
 "definition":"To speak of a man as you find him when he can t find you."
 },
 {
 "term":"BEARD",
 "part":"n.",
 "definition":"The hair that is commonly cut off by those who justly execrate the absurd Chinese custom of shaving the bead."
 }
]

asp.net有现成的josn处理的dll，名为Newtonsoft.Json.Net20（最下面附下载地址），用它处理json非常的方便，我们可以像处理对象一样处理json。

因为我们在读取列表的时候从数据库中读出来的是一张table（datatable格式），而要将它显示在前台，如果自己一个个拼凑字符串的话会非常麻烦，而且扩展性不好，所有我们采用json文件，这样就需要一个方法将datatable转为json，该方法如下：

代码

public   static   string  DataTableToJSON(DataTable dt,  string  dtName)
{
StringBuilder sb  =   new  StringBuilder();
StringWriter sw  =   new  StringWriter(sb);
using  (JsonWriter jw  =   new  JsonTextWriter(sw))
{
JsonSerializer ser  =   new  JsonSerializer();
jw.WriteStartObject();
jw.WritePropertyName(dtName);
jw.WriteStartArray();
foreach  (DataRow dr  in  dt.Rows)
{
jw.WriteStartObject();
foreach  (DataColumn dc  in  dt.Columns)
{
jw.WritePropertyName(dc.ColumnName);
ser.Serialize(jw, dr[dc].ToString());
}
jw.WriteEndObject();
}
jw.WriteEndArray();
jw.WriteEndObject();
sw.Close();
jw.Close();
}
return  sb.ToString();
}

 

 

我们来看一下上面关键的js代码：InitData(pageindx)是用来处理第pageindx页的显示数据的，我们着重来看一下这个ajax处理文件NewsHandler.ashx，当然也可以用aspx文件作为ajax后台处理文件。

在项目中添加ajax文件夹用来存放ajax处理文件，并且添加Generic Handler类型的文件（或是一般的webform），取名为NewsHandler.ashx，这个文件是用来处理ajax请求的。

主要代码如下：

int pageindex;//页数

int.TryParse(context.Request["pageno"], out pageindex);//把赋值给pageindex

string orderby = context.Request["orderby"].ToString();//以什么排序

DataTable dt = new DataTable();

dt = PageData(pageindex, 10, "tb_news", orderby);//获取数据

string jsonData = DataTableToJSON(dt, "News");//创建json对象,将datatable对象转换为json对象

context.Response.Write(jsonData);//返回json数据

 

上面的代码中有这样一个方法 PageData(pageindex, 10, "tb_news", orderby);方法主要获取第几页的数据，详细代码如下：

代码

#region  返回特定页数的数据
///   <summary>
///  返回特定页数的数据
///   </summary>
///   <param name="pageindex"> 特定的页数 </param>
///   <param name="pagesize"> 页的大小 </param>
///   <param name="table"> 哪张表 </param>
///   <returns></returns>
public  DataTable PageData( int  pageindex,  int  pagesize,  string  table,  string  orderby)
{
string  connectionString  =  System.Web.Configuration.WebConfigurationManager.ConnectionStrings[ " NewsConnection " ].ToString();
OleDbConnection conn;
if  (pageindex  <   1 )
pageindex  =   1 ;
conn  =   new  OleDbConnection(connectionString);
DataTable dt = new  DataTable();
try
{
conn.Open();
OleDbCommand cmdTotal  =   new  OleDbCommand( " select count(0) from  "   +  table, conn);
int  recordCount  =  Convert.ToInt32(cmdTotal.ExecuteScalar()); // 数据的总数
int  pageCount; // 总共的页数
if  (recordCount  %  pagesize  >   0 )
pageCount  =  recordCount  /  pagesize  +   1 ;
else
pageCount  =  recordCount  /  pagesize;
if  (pageindex  >  pageCount)
pageindex  =  pageCount;
DataTable dataTemp  =   new  DataTable();
string  cmdText  =   " select news_id,news_title,news_readtimes,news_time from  "   +  table  +   "  order by  "   +  orderby  +   "  desc " ;
OleDbCommand cmd  =   new  OleDbCommand(cmdText, conn);
OleDbDataAdapter oda  =   new  OleDbDataAdapter(cmd);
oda.Fill(dataTemp);
dt =  dataTemp.Clone();
for  ( int  i  =   0 ; i  <  pagesize; i ++ )
{
if  (recordCount  <=  (pagesize  *  (pageindex  -   1 )  +  i))
break ;
dt.Rows.Add(dataTemp.Rows[pagesize  *  (pageindex  -   1 )  +  i].ItemArray);
}
}
catch  (Exception e)
{
}
finally
{
conn.Close();
}
return  dt;
}
#endregion

 

 

整合一下就实现了需求分析的第三点了。可能上面的代码有点多有点乱。

按照以下的步骤：

1。将相应的js文件和css文件拷到对应的位置

2。添加ajax文件，并添加NewsHandler.ashx文件用以处理ajax请求

3。在NewsHandler.ashx.cs文件中添加代码，有两个方法比较重要，PageData(int pageindex, int pagesize, string table, string orderby)和DataTableToJSON(DataTable dt, string dtName)

4。将NewsHandler.ashx.cs中处理代码和返回的json字符串整合好，主要代码以在上文给出，在这里注意添加命名空间和添加引用（提供下载）

5。编辑NewsList.aspx文件，分别编辑前台和后台。前台用以显示（已大体给出，需结合上一篇文章），后台主要得到一个新闻条数

主要代码如下：

 

代码

  protected   void  InitPageCount()
        {
            conn  =   new  OleDbConnection(connectionString); // 创建新的连接
             try
            {
                conn.Open();
                 string  cmdText  =   " select count(0) as pages from tb_news " ;
                OleDbCommand cmd  =   new  OleDbCommand(cmdText, conn);
                DataTable dt  =   new  DataTable();
                OleDbDataAdapter oda  =   new  OleDbDataAdapter(cmd);
                oda.Fill(dt);
                 if  (dt  !=   null )
                {
                    pagecount  =  dt.Rows[ 0 ][ " pages " ].ToString();
                }
                
            }
             catch  (Exception e)
            {
                pagecount  =   " 0 " ;
                Response.Write( " Error： "   +  e.Message); // 如果连接失败，将错误显示出来
            }
             finally
            {
                conn.Close(); // 一定要及时关掉conn
            }
        }

 

 需 -需声明protected string pagecount;以便让前台能够获取

附代码的下载：（只实现了无刷新的分页，预览新闻内容等待下一章）

 

css、js、dll、项目（仅无刷新分页）

 

注：虽然提供了完整的代码，但不建议一开始就下载完整的，要自己动手

 

分享 |