jquery pagination插件无刷新分页的实现代码
本文导语: 本节内容： jquery pagination插件无刷新分页 首先，需要准备文件：jquery.js,jquery.pagination.js,pagination.css，以及table布局的css文件。 引入文件： 代码示例: 接着在页面的body里中加入以下代码： 呈现出来的数据是没有进行...
本节内容：
jquery pagination插件无刷新分页
首先，需要准备文件：jquery.js,jquery.pagination.js,pagination.css，以及table布局的css文件。
引入文件：
接着在页面的body里中加入以下代码：
呈现出来的数据是没有进行控件绑定的，完全是由简单的table来呈现数据的。
产品名称
产品单价
代码说明：
设定了一个标准的带有的表格，然后再加上了使用到的Jquery的插件—Paination，在这里只需定义一下一个以id为Pagination的层就可以了。
关键的js代码：
var orderby = ""; //进行排序的依据
$(document).ready(function() {
InitData(0); //初始化数据
}); // www.
//这个事件是在翻页时用的
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(, {
callback: pageselectCallback,
prev_text: '< 上一页',
next_text: '下一页 >',
items_per_page: 20,
num_display_entries: 6,
current_page: pageIndex,
num_edge_entries: 2
});
}
如此，页面所要进行的操作就完成了，注释都写入上面了。
关键的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中得到数据的总数就可以了，然后将其进行数据绑定：
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。
您可能感兴趣的文章:
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。