网站地图
【www.gdgbn.com--jquery】
pagination插件无刷新的分页实例
我们要准备的文件有：jquery.js,jquery.pagination.js,pagination.css教程,还有一个就是经常用的table布局的css文件。这些文件都会在后面的文件中包含。
先把要用到的文件依次进入进来：
<script src="common/jquery.js" type="text/网页特效"></script>
<script src="common/jquery.pagination.js" type="text/javascript"></script>
接着在页面的body里面写入如下的代码，在这里强调一下呈现出来的数据是没有进行控件绑定的，完全是由简单的table来呈现数据的，先看一下页面代码
<script language="javascript" type="text/javascript"> string strconn = configurationmanager.apps教程ettings["connectionstring"]; public static string datatabletojson(datatable dt, string tablename, int pagecount) 其实比较简单哦，在页面的page_load中得到数据的总数就可以了，然后将其进行数据绑定，不信你去看看前面的代码，是不是有句 $("#pagination").pagination(<%=pagecount %>这个就是起到了记录总数的作用。
产品名称
产品单价
我们先分析一下代码，很明显我们设定了一个标准的带有的表格，然后再加上了我们使用到的jquery的插件—paination，在这里我们只需定义一下一个以id为pagination的层就可以了。页面的代码我们分析到这里，下面就来看一下关键的js代码
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 += "" + n.productname + "" + n.quantityperunit + "";
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>这样我们页面所要进行的操作就完成了，注释都写入上面了，如果有什么看不明白的，可以联系我哦。下面我就要看看关键的getdata.ashx是如何进行数据操作的，在这里先提示一下，我是用到了sqlhelper类进行sql语句操作的，再辅以分页的存储过程，然后又用到json.net，将从数据库教程得到的数据转换成json，现在发现json真是个好东西的，操作起来比较简便。废话不多说了呈上代码，代码还是有说服力的。虽然写得比较简单。
//具体的页面数
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这个方法的代码，这个比较简单，我也是看它的帮助文档写出来的，代码的详细说明就不说了。
{
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，在页面里面将数据绑定完成，一气呵成真是不错，看得呈现的数据心里比较美吧，不过这个时候你也许会发现，页面怎么只用一页呢，嘻嘻，别忘了一点---就是取出数据的总数，用过分页的都知道，是根据记录的总数来计算到底有多少页的哦。那么我们该怎么做呢？
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());
}