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>

文件下载地址：https://files.cnblogs.com/files/dachuang/jquery.pagination_2.zip

下面直接开始，

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样式部分，可参照http://www.cnblogs.com/dachuang/p/4475329.html这个文章