一步步打造漂亮的新闻列表(无刷新分页、内容预览)第三章

  我们来看一下需求分析:

  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、项目(仅无刷新分页)

  

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