html5 ajax实现分页,分页实现前五后五ajax局部刷新方式分页实现

分页实现前五后五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