一步步打造漂亮的新闻列表(无刷新分页、内容预览)第三章
程序员文章站
2024-03-07 14:44:51
我们来看一下需求分析： 3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。 这里面有两个事件，...
我们来看一下需求分析：
3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。
这里面有两个事件，都是js事件，我们用jquery代码来实现。
分页的话，我们采用jquery的分页插件pagination，官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件（最下面附下载地址）
先讲讲它的基本用法：
跟一般的jquery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。
例如下面的使用代码：
这段代码表示的含义是：总共有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
然后，我们来看关键的js代码：
这里有必要说明下json数据格式，json(javascript object notation) 是一种轻量级的数据交换格式，它是类似于xml的数据交换格式，格式示例如下：
asp.net有现成的josn处理的dll，名为newtonsoft.json.net20（最下面附下载地址），用它处理json非常的方便，我们可以像处理对象一样处理json。
因为我们在读取列表的时候从数据库中读出来的是一张table（datatable格式），而要将它显示在前台，如果自己一个个拼凑字符串的话会非常麻烦，而且扩展性不好，所有我们采用json文件，这样就需要一个方法将datatable转为json，该方法如下：
代码
我们来看一下上面关键的js代码：initdata(pageindx)是用来处理第pageindx页的显示数据的，我们着重来看一下这个ajax处理文件newshandler.ashx，当然也可以用aspx文件作为ajax后台处理文件。
在项目中添加ajax文件夹用来存放ajax处理文件，并且添加generic handler类型的文件（或是一般的webform），取名为newshandler.ashx，这个文件是用来处理ajax请求的。
主要代码如下：
上面的代码中有这样一个方法 pagedata(pageindex, 10, "tb_news", orderby);方法主要获取第几页的数据，详细代码如下：
代码
整合一下就实现了需求分析的第三点了。可能上面的代码有点多有点乱。
按照以下的步骤：
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 string pagecount;以便让前台能够获取
附代码的下载：（只实现了无刷新的分页，预览新闻内容等待下一章）
注：虽然提供了完整的代码，但不建议一开始就下载完整的，要自己动手
3.==》无刷新的分页读取新闻列表，在点击下一页的时候触发事件，调用ajax去数据库中查找下一页的数据并返回，然后显示在页面上。
这里面有两个事件，都是js事件，我们用jquery代码来实现。
分页的话，我们采用jquery的分页插件pagination，官方地址为http://plugins.jquery.com/project/pagination下载js文件和css文件（最下面附下载地址）
先讲讲它的基本用法：
跟一般的jquery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);，这里的100参数是必须的，表示显示项目的总个数，这是最简单的使用。
例如下面的使用代码：
这段代码表示的含义是：总共有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
然后，我们来看关键的js代码：
这里有必要说明下json数据格式，json(javascript object notation) 是一种轻量级的数据交换格式，它是类似于xml的数据交换格式，格式示例如下：
asp.net有现成的josn处理的dll，名为newtonsoft.json.net20（最下面附下载地址），用它处理json非常的方便，我们可以像处理对象一样处理json。
因为我们在读取列表的时候从数据库中读出来的是一张table（datatable格式），而要将它显示在前台，如果自己一个个拼凑字符串的话会非常麻烦，而且扩展性不好，所有我们采用json文件，这样就需要一个方法将datatable转为json，该方法如下：
代码
我们来看一下上面关键的js代码：initdata(pageindx)是用来处理第pageindx页的显示数据的，我们着重来看一下这个ajax处理文件newshandler.ashx，当然也可以用aspx文件作为ajax后台处理文件。
在项目中添加ajax文件夹用来存放ajax处理文件，并且添加generic handler类型的文件（或是一般的webform），取名为newshandler.ashx，这个文件是用来处理ajax请求的。
主要代码如下：
上面的代码中有这样一个方法 pagedata(pageindex, 10, "tb_news", orderby);方法主要获取第几页的数据，详细代码如下：
代码
整合一下就实现了需求分析的第三点了。可能上面的代码有点多有点乱。
按照以下的步骤：
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 string pagecount;以便让前台能够获取
附代码的下载：（只实现了无刷新的分页，预览新闻内容等待下一章）
注：虽然提供了完整的代码，但不建议一开始就下载完整的，要自己动手