jquery+ajax(用ajax.dll)实现无刷新分页

利用ajax.dll那种方式的无刷新,在这就不说了,新朋友可以看下我的另一片文件http://www.cnblogs.com/dachuang/p/3654632.html

首先,这里用的是jquery自带的分页方法,所以要引用下面3个js文件

<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript" src="Scripts/jquery.pagination.js"></script>

下面直接开始,

1、先说后台的,为了简单,我自造了数据

protected void Page_Load(object sender, EventArgs e)
{
Ajax.Utility.RegisterTypeForAjax(typeof(Index));
}

[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
public DataTable ajaxtest()
{
DataTable dt = new DataTable();
dt.Columns.Add("序号", typeof(string));
dt.Columns.Add("姓名", typeof(string));
dt.Columns.Add("年龄", typeof(string));

dt.Rows.Add("1", "周一", "11");
dt.Rows.Add("1", "周一", "11");
dt.Rows.Add("1", "周一", "11");

dt.Rows.Add("2", "周二", "11");
dt.Rows.Add("2", "周二", "11");
dt.Rows.Add("2", "周二", "11");

dt.Rows.Add("3", "周三", "11");
dt.Rows.Add("3", "周三", "11");
dt.Rows.Add("3", "周三", "11");
return dt;
},这里大家一看就懂,不多说

前台:

js部分: 

<script type="text/javascript">
$(function () {
var pageSize = 1;//每页行数
var initPagination = function (data) {
var feedback = "";
$.each(data.Rows, function (index, d) {
var str = "";
str += "<dl class=‘result‘ style=‘display:none;‘>";
str += "<dt><img src=‘/Images/orderedList0.png‘ alt=‘图片‘ width=‘70‘ height=‘70‘ /></dt>";
str += "<dd><a href=‘#‘ title=‘VYyu‘>VYyu</a></dd>";
str += "<dd class=‘gray‘>2009-09-26 </dd>";
str += "<dd>" + d["姓名"] + "</dd>";
str += "</dl>";
feedback += str;
});
$("#feedback").empty().append(feedback); //装载对应分页的内容
var num_entries = data.Rows.length;
// 创建分页
$("#page").pagination(num_entries, {
//num_edge_entries: 1, //边缘页数
//num_display_entries: 5, //主体页数
//callback: pageselectCallback,
//items_per_page: 3, //每页显示1项
//prev_text: "前一页",
//next_text: "后一页"
num_edge_entries: 2, //边缘页数
num_display_entries: 3, //主体页数
callback: pageselectCallback,
items_per_page: pageSize, //每页显示1项
current_page: 4,//当前页
prev_text: "<",
next_text: ">",
show_total_info: true,
show_total_num: num_entries,
show_pager_num: pageSize
});
}
function pageselectCallback(page_index, jq) {
var resultList = $(".result");
$(".result").each(function (index, data) {
$(this).css(‘display‘, ‘none‘);
if (Math.floor(index / pageSize) == page_index) {
$(this).css(‘display‘, ‘block‘);
}
});
return false;
}
//ajax加载
initPagination(Index.ajaxtest().value);
});
</script>

html部分:

<div id="feedback" class="feedback"></div>这个是存放每页的数据部分
<div id="page" class="pager"></div>这里是分页控件

效果图:

 

 技术分享,至于分页控件css样式部分,还有待研究

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。