先把要用到的文件依次进入进来:
复制代码 代码如下:
接着在页面的body里面写入如下的代码,在这里强调一下呈现出来的数据是没有进行控件绑定的,完全是由简单的table来呈现数据的,先看一下页面代码
复制代码 代码如下:
产品名称
产品单价
我们先分析一下代码,很明显我们设定了一个标准的带有的表格,然后再加上了我们使用到的jquery的插件—paination,在这里我们只需定义一下一个以id为pagination的层就可以了。页面的代码我们分析到这里,下面就来看一下关键的js代码
复制代码 代码如下:
这样我们页面所要进行的操作就完成了,注释都写入上面了,如果有什么看不明白的,可以联系我哦。下面我就要看看关键的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这个方法的代码,这个比较简单,我也是看它的帮助文档写出来的,代码的详细说明就不说了。
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,在页面里面将数据绑定完成,一气呵成真是不错,看得呈现的数据心里比较美吧,不过这个时候你也许会发现,页面怎么只用一页呢,嘻嘻,别忘了一点---就是取出数据的总数,用过分页的都知道,是根据记录的总数来计算到底有多少页的哦。那么我们该怎么做呢?
其实比较简单哦,在页面的page_load中得到数据的总数就可以了,然后将其进行数据绑定,不信你去看看前面的代码,是不是有句
复制代码 代码如下:
$(#pagination).pagination(这个就是起到了记录总数的作用。
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());
}
至此,整篇介绍如何利用jquery的插件---pagination进行分页就介绍到这里,简单的回顾一下就是声明绑定的table,利用jquery的ajax方法进行数据绑定的,然后在后台得到数据转换为json,整个流程就是这样的,也许你会觉得这样做比较繁琐,不知你有何高见,可以在下面的评论为我点出,我不胜感激哦。^_^。写博客真的是一件挺费神的事情,不过在写的过程中,又让自己巩固了一下这些知识,也是很不错的。就请各位看官评论吧。
经过请教了美工了,把页面中分页的效果做成了gif图片,大家看看图吧。