分页实现前五后五ajax局部刷新方式分页实现
时间:5年前
作者:庞顺龙
浏览:394
[站内原创,转载请注明出处]
分页实现前五后五ajax局部刷新方式分页实现
1、底层分页代码
///
/// 分页
///
/// 当前页
/// 数据总和
/// 数据总页数
/// 分页页码,超过页码后显示
/// 分页采用的方法 true:JS false:URL拼接
/// 分页的URL
///
public static string GetHtmlPager(long currentPageStr, long totalItems,
long totalPages, long pages, bool blnJs, string strUrl)
{
string URL = string.Empty;
if (blnJs)
{
URL = " href=\"javascript:ajaxList('{0}')\"";
}
else
{
URL = " href=\"" + strUrl + "/{0}\"";
}
//默认当前页是第一页
long currentPage = 1;
if (currentPageStr != 0)
{
currentPage = currentPageStr;
}
long temp = pages / 2;
var output = new StringBuilder();
if (totalItems > 0)
{
long previous = (currentPage - 1) >= 1 ? (currentPage - 1) : 1;
long next = currentPage + 1 <= totalPages ? (currentPage + 1) : totalPages;
output.Append("
output.Append("
output.Append("
- ");
if (totalPages <= 1 || currentPage == 1)
{
output.Append("
首页 ");output.Append("
上一页 ");}
else
{
output.Append("
+ string.Format(URL, 1) + ">首页
");output.Append("
+ string.Format(URL, previous) + ">上一页
");}
long startIndex = currentPage - temp;
if (startIndex + pages > totalPages)
startIndex = totalPages + 1 - pages;
if (startIndex < 1)
startIndex = 1;
long endIndex = startIndex + pages - 1;
if (endIndex > totalPages)
endIndex = totalPages;
output.Append("
");for (long i = startIndex; i <= endIndex; i++)
{
if (i == currentPage)
{
output.Append("" + i + " ");
}
else
{
output.Append("" + i + " ");
}
}
output.Append("
");if (totalPages <= 1 || currentPage == totalPages)
{
output.Append("
下一页 ");output.Append("
末页 ");}
else
{
output.Append("
+ string.Format(URL, next) + ">下一页
");output.Append("
+ string.Format(URL, totalPages) + ">末页
");}
output.Append("
共有" + totalItems + "条记录,当前第"+ currentPage + "/" + totalPages + "页
");output.Append("
");output.Append("
output.Append("
}
return output.ToString();
}
如代码所示,我写的这个是ajax异步调用实现的分页,所以在web页面需要ajax调用ajaxList方法进行分页
2、web页面ajax方法
var page = 1;
var SearchParam = ""; //查询参数
function ajaxList(currentpage) {
if (currentpage != null) {
page = currentpage;
}
//处理查询参数
SearchByConditions();
if (SearchParam == undefined || SearchParam == "") {
SearchParam = '';
}
$.ajax({
type: "GET",
dataType: "",
data: SearchParam,
url: "/xx/xx?time=" + (new Date().getTime()),
error: function (XmlHttpRequest, textStatus, errorThrown) { },
success: function (d) {
$("#tableinfo").html("");
$("#tableinfo").html(d);
}
});
}
//拼接查询条件
function SearchByConditions() {
SearchParam = "&page=" + page + "&x=" + $("#x").val();
return SearchParam;
}
3、底层分页代码
4、效果展示
内容均为作者独立观点,不代表八零IT人立场,如涉及侵权,请及时告知。
本站文章除注明转载外,均为本站原创,欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创和谐网络社区。
转载请注明:文章转载自-八零IT人 [http://www.80iter.com]
本文标题:分页实现前五后五ajax局部刷新方式分页实现
本文地址:http://www.80iter.com/blog/1449103824339517