本节内容:
jquery pagination插件无刷新分页
首先,需要准备文件:jquery.js,jquery.pagination.js,pagination.css,以及table布局的css文件。
引入文件:
接着在页面的body里中加入以下代码:
呈现出来的数据是没有进行控件绑定的,完全是由简单的table来呈现数据的。
代码说明:
设定了一个标准的带有<thead>的表格,然后再加上了使用到的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中得到数据的总数就可以了,然后将其进行数据绑定:
至此,利用jquery的插件---pagination进行分页就介绍完了。
总结:
声明绑定的table,利用jquery的ajax方法进行数据绑定的,然后在后台得到数据转换为json。