澳门新蒲京娱乐

图片 2
数据中心迁移到IDC数据中心
图片 48
如何做好PPT

pagination插件实现无刷新分页代码,无刷新分页

我们来看一下需求分析:

先把要用到的文件依次进入进来:

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

复制代码 代码如下:

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

<script src=”common/jquery.js”
type=”text/javascript”></script>
<script src=”common/jquery.pagination.js”
type=”text/javascript”></script>
<link href=”common/tablesorter.css” rel=”stylesheet” type=”text/css”
/>
<link href=”common/pagination.css” rel=”stylesheet” type=”text/css”
/>

分页的话,我们采用jquery的分页插件pagination,官方地址为

接着在页面的body里面写入如下的代码,在这里强调一下呈现出来的数据是没有进行控件绑定的,完全是由简单的table来呈现数据的,先看一下页面代码

先讲讲它的基本用法:

复制代码 代码如下:

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

<div>
<table id=”linkTable” cellpadding=”6″ cellspacing=”1″ align=”left”
class=”tablesorter” style=”width:400px;margin:0 0 20px 5px;”>
<thead>
<tr class=”tableHeader” align=”center”>
<th style=”width:200px; text-align:center;” >
产品名称
</th>
<th style=”width:200px; text-align:center”>
产品单价
</th>
</tr>
</thead>
</table>
</div>
<div id=”Pagination” class=”digg”></div>

例如下面的使用代码:

我们先分析一下代码,很明显我们设定了一个标准的带有<thead>的表格,然后再加上了我们使用到的Jquery的插件—Paination,在这里我们只需定义一下一个以id为Pagination的层就可以了。页面的代码我们分析到这里,下面就来看一下关键的js代码

复制代码 代码如下:

复制代码 代码如下:

$(“#Pagination”).pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page:1
});

<script language=”javascript” type=”text/javascript”>
var orderby = “”; //进行排序的依据
$(document).ready(function() {
InitData(0); //初始化数据
});
//这个事件是在翻页时候用的
function pageselectCallback(page_id, jq) {
InitData(page_id);
}
function InitData(pageIndex) {
var tbody = “”; //声明表格中body部分
$.ajax({ //这里使用到Jquery的ajax方法,具体使用在这里不详细叙述
type: “POST”,
dataType: “json”,
url: ‘/DataListWeb/WebService/GetData.ashx’, //请求的处理数据
data: “pageIndex=” + (pageIndex + 1) + “&sortType=” + orderby,
//传入的参数,第一个参数就是分页的页数,第二个参数为排序的依据
//下面的操作就是成功返回数据以后,进行数据的绑定
success: function(data) {
$(“#linkTable tr:gt(0)”).remove();
var myData = data.Products;
$.each(myData, function(i, n) {
var trs = “”;
trs += “<tr><td align=’center’>” + n.ProductName +
“</td><td>” + n.QuantityPerUnit +
“</td></tr>”;
tbody += trs;
});
$(“#linkTable”).append(tbody);
}
});
//加入分页的绑定
$(“#Pagination”).pagination(<%=pageCount %>, {
callback: pageselectCallback,
prev_text: ‘< 上一页’,
next_text: ‘下一页 >’,
items_per_page: 20,
num_display_entries: 6,
current_page: pageIndex,
num_edge_entries: 2
});
}
</script>

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

这样我们页面所要进行的操作就完成了,注释都写入上面了,如果有什么看不明白的,可以联系我哦。下面我就要看看关键的GetData.ashx是如何进行数据操作的,在这里先提示一下,我是用到了SqlHelper类进行sql语句操作的,再辅以分页的存储过程,然后又用到Json.NET,将从数据库得到的数据转换成json,现在发现json真是个好东西的,操作起来比较简便。废话不多说了呈上代码,代码还是有说服力的。虽然写得比较简单。

具体的用法可以参考官方文档或是

复制代码 代码如下:

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

string strConn =
ConfigurationManager.AppSettings[“ConnectionString”];
//具体的页面数
int pageIndex;    
int.TryParse(context.Request[“pageIndex”], out pageIndex);
//排序的依据
string orderType = “ProductID”;
int sortType = 1;
if (!string.IsNullOrEmpty(context.Request[“sortType”]))
{
string[] strArr = context.Request[“sortType”].Split(‘_’);
if (strArr[1] == “0”)
{
orderType = strArr[0];
sortType = 0;
}
else
{
orderType = strArr[0];
sortType = 1;
}
}
if (pageIndex == 0)
{
pageIndex = 1;
}
//下面就是分页的存储过程了,把相应的参数传进去就可以了。
System.Data.SqlClient.SqlParameter[] p =
{
SqlHelper.MakeOutParam(“@Counts”, SqlDbType.Int, 4),
SqlHelper.MakeInParam(“@tblName”, SqlDbType.VarChar, 128, “Products”),
SqlHelper.MakeInParam(“@strGetFields”, SqlDbType.VarChar,200,
“ProductName,QuantityPerUnit”),
SqlHelper.MakeInParam(“@fldName”, SqlDbType.VarChar, 128, orderType),
SqlHelper.MakeInParam(“@PageSize”, SqlDbType.Int, 4, 20),
SqlHelper.MakeInParam(“@PageIndex”, SqlDbType.Int, 1, pageIndex),
SqlHelper.MakeInParam(“@OrderType”, SqlDbType.Bit, 1, sortType),
SqlHelper.MakeInParam(“@strWhere”, SqlDbType.VarChar, 1500, “”)
};
DataTable dt = SqlHelper.ExecuteDataset(strConn,
CommandType.StoredProcedure, “sp_PageCut”, p).Tables[0];
int pageCount = Convert.ToInt32(p[0].Value.ToString());
//将得到的数据转换成json
context.Response.Write(Util.DataTableToJSON(dt, “Products”,
pageCount));
下面我们看看DataTableToJson这个方法的代码,这个比较简单,我也是看它的帮助文档写出来的,代码的详细说明就不说了。

在NewsList.aspx页面中添加相关的js文件和css文件(最下面附下载地址):jquery-1.4.1.js,pagination.js

public static string DataTableToJSON(DataTable dt, string tableName, int
pageCount)
{
StringBuilder sb = new StringBuilder();
StringWriter sw = new StringWriter(sb);
using (JsonWriter jw = new JsonTextWriter(sw))
{
JsonSerializer ser = new JsonSerializer();
jw.WriteStartObject();
jw.WritePropertyName(tableName);
jw.WriteStartArray();
#region TableName属性
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();
}
#endregion
jw.WriteEndArray();
jw.WriteEndObject();
sw.Close();
jw.Close();
}
return sb.ToString();
}

复制代码 代码如下:

这样我们的工作基本上就完成了,声明绑定的table,然后在服务端获取数据,再把得到的数据转化成json,在页面里面将数据绑定完成,一气呵成真是不错,看得呈现的数据心里比较美吧,不过这个时候你也许会发现,页面怎么只用一页呢,嘻嘻,别忘了一点—就是取出数据的总数,用过分页的都知道,是根据记录的总数来计算到底有多少页的哦。那么我们该怎么做呢?

<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>

其实比较简单哦,在页面的Page_Load中得到数据的总数就可以了,然后将其进行数据绑定,不信你去看看前面的代码,是不是有句

然后,我们来看关键的js代码:

复制代码 代码如下:

复制代码 代码如下:

$(“#Pagination”).pagination(<%=pageCount
%>这个就是起到了记录总数的作用。
if (!IsPostBack)
{
SqlParameter[] p =
{
SqlHelper.MakeOutParam(“@Counts”, SqlDbType.Int, 4),
SqlHelper.MakeInParam(“@tblName”, SqlDbType.VarChar, 128, “Products”),
SqlHelper.MakeInParam(“@strGetFields”, SqlDbType.VarChar,200, “*”),
SqlHelper.MakeInParam(“@fldName”, SqlDbType.VarChar, 128,
“ProductID”),
SqlHelper.MakeInParam(“@PageSize”, SqlDbType.Int, 4, 20),
SqlHelper.MakeInParam(“@PageIndex”, SqlDbType.Int, 1, 1),
SqlHelper.MakeInParam(“@OrderType”, SqlDbType.Bit, 1, 0),
SqlHelper.MakeInParam(“@strWhere”, SqlDbType.VarChar, 1500, “”)
};
DataTable dt = SqlHelper.ExecuteDataset(conn,
CommandType.StoredProcedure, “sp_PageCut”, p).Tables[0];
pageCount = Convert.ToInt32(p[0].Value.ToString());
}

<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\” >”

至此,整篇介绍如何利用jquery的插件—pagination进行分页就介绍到这里,简单的回顾一下就是声明绑定的table,利用jquery的ajax方法进行数据绑定的,然后在后台得到数据转换为json,整个流程就是这样的,也许你会觉得这样做比较繁琐,不知你有何高见,可以在下面的评论为我点出,我不胜感激哦。^_^。写博客真的是一件挺费神的事情,不过在写的过程中,又让自己巩固了一下这些知识,也是很不错的。就请各位看官评论吧。

  • 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”);

经过请教了美工了,把页面中分页的效果做成了gif图片,大家看看图吧。
图片 1

}
});
$(“#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>

您可能感兴趣的文章:

  • jQuery EasyUI API 中文文档 –
    Pagination分页
  • jQuery Pagination
    Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
  • jquery.pagination.js
    无刷新分页实现步骤分享
  • jquery分页插件jquery.pagination.js使用方法解析
  • Jquery 分页插件之Jquery
    Pagination
  • PHP框架Laravel插件Pagination实现自定义分页
  • jquery.pagination +JSON
    动态无刷新分页实现代码
  • jquery插件pagination实现无刷新ajax分页
  • asp.net
    jquery无刷新分页插件(jquery.pagination.js)
  • 从零开始做一个pagination分页组件
  • jQuery Pagination
    基于jquery的分页插件

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

相关文章

No Comments, Be The First!
近期评论
    功能
    网站地图xml地图