jquery无刷新分页

  希望有机会能和大家一起交流学习，220897863程序员之家群欢迎大家加入   

  在现在的项目中使用jquery实现无刷新的分页，数据库采用存储过程进行分页，具体代码就不说了，主要看前段的实现

 PageChage.ascx是一个分页用户控件，可以将它直接拖动到页面中使用。以下是html源码，包含一个分页的js和导航div

   <script  src="/CommonModule/Client/SearchPaging.js"  type="text/javascript"></script>
     <div class="sreach14">
                <div id="divPaging">
                    <div class="sreach10">
                        <a id="aFirstPage">首页</a> <a id="aPrevPage">上一页</a> <a id="aNextPage">下一页</a> <a
                            id="aLastPage">末页</a> 转到
                        <select id="selectPageTotal">
                        </select>
                        页</div>
                    <div class="sreach11">共<span id="spanTotalRecord"></span>条
                           当前显示第<span id="spanCurrentTotal"></span>条</div>
                </div>
   </div>

 

SearchPaging.js文件主要完成对服务器的查询请求同时接受到服务器返回信息后呈现数据生成导航信息，PagingInfo对象中包含了查询请求的地址，查询条件以及分页信息
//分页数据*********************************
var PagingInfo =
{
    PageUrl: "",//ajax请求的地址
    Search: "",//查询条件
    TotalRecord: 0,
    PageIndex: 1,
    PageSize: 1,
    OrderKey: "",
    IsAsc: 0,//降序
    IsCount: 1,
    Pages: 0
};

 
//*******************************************

//取得服务器端数据***************************
function GetInfos(btn) {
    if (btn != undefined && btn != null)
        btn.attr("disabled", true);
    $.ajax({
        type: "POST",
        url: PagingInfo.PageUrl,
        cache: false,
        data:
            PagingInfo.Search + "&PageSize=" + escape(PagingInfo.PageSize) + "&PageIndex=" + escape(PagingInfo.PageIndex) + "&OrderKey=" + escape(PagingInfo.OrderKey) + "&isASC=" + escape(PagingInfo.IsAsc) + "&isCount=" + escape(PagingInfo.IsCount)
        ,
        beforeSend: function() {
            $("#InformationItems").html("");
            $("<div class='loading'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 请稍候，正在加载数据...</div>").appendTo($("#InformationItems"));
        },
        dataType: "html",
        success: function(htmlData) {
            //加载取得的数据
            $("#InformationItems").html(htmlData);

            //设置总数据量
            if (PagingInfo.IsCount != 0) {
                PagingInfo.TotalRecord = $("#hidTotalRecord").val();
                $("#spanTotalRecord").text(PagingInfo.TotalRecord);
            }
           
            //是否显示无数据提示
            if (PagingInfo.TotalRecord == 0) {
                $("<div class='zwzpxx' >暂无数据</div>").appendTo($("#InformationItems"));
            }
            //重新设定所有分页数据
            AccountPages();
            //当此页无数据显示时,转到上一页
            NoDataProcess();
            //导航条加载
            Navigation_Init();

            if (btn != undefined && btn != null)
                btn.attr("disabled", false);
        },
        error: function() {
            if (btn != undefined && btn != null)
                btn.attr("disabled", false);
            alert("对不起，您的操作出现了错误，请重新刷新");
        }
    });
 
}

//计算总页数*********************************
function AccountPages() {
    PagingInfo.Pages = Math.floor(PagingInfo.TotalRecord / PagingInfo.PageSize);
    if (PagingInfo.TotalRecord % PagingInfo.PageSize != 0)
        PagingInfo.Pages++;
}
//*******************************************

//当此页无数据显示时,转到上一页*************
function NoDataProcess() {
    if (PagingInfo.TotalRecord != 0 && PagingInfo.PageIndex > PagingInfo.Pages) {
        PagingInfo.PageIndex = PagingInfo.Pages;
        GetInfos();
    }
}
//*******************************************

//导航条加载
function Navigation_Init() {

    //必须在设置导航条时清除克隆的导航条，以防出现多个同名导航元素ID，造成程序出错
    $("#divPagingCopy").text("");

    CurrentRecordBeginAndEnd();
    SelectPageChange_Init();
    PagingInit();

    //克隆一个导航条至需要导航的地方
    $("#divPaging").clone(true).appendTo($("#divPagingCopy"));
}

//当前显示第0000-00000条
function CurrentRecordBeginAndEnd() {

    //计算当前显示的范围
    var recordBegin = PagingInfo.PageSize * (PagingInfo.PageIndex - 1);
    recordBegin = recordBegin <= 0 ? 1 : recordBegin + 1;

    var recordEnd = PagingInfo.PageSize * PagingInfo.PageIndex;
    recordEnd = recordEnd > PagingInfo.TotalRecord ? PagingInfo.TotalRecord : recordEnd;
    $("#spanCurrentTotal").text(recordBegin + "-" + recordEnd);

}

//下拉列表初始化*****************************
function SelectPageChange_Init() {
    var selectPageChange = $("#selectPageTotal");
    selectPageChange.attr("length", "0");
    for (i = 1; i < PagingInfo.Pages + 1; i++) {
        var selected = i == PagingInfo.PageIndex ? "selected" : "";
        $("<option " + selected + " value='" + i + "'>" + i + "</option>").appendTo(selectPageChange);
    }
}
//*******************************************

//下拉列表转页*******************************
function ChangePageIndex() {
    if (/^\d+$/.test($("#selectPageTotal").val()))
        PagingInfo.PageIndex = $("#selectPageTotal").val();
    else
        PagingInfo.PageIndex = 1;
    PagingInfo.IsCount = 0;
    GetInfos($(this));
}
//*******************************************

//分页器初始化*******************************
function PagingInit() {

    var aFirstPage = $("#aFirstPage");
    var aPrevPage = $("#aPrevPage");
    var aNextPage = $("#aNextPage");
    var aLastPage = $("#aLastPage");

    $("#divPaging").find("a").removeClass();
    if (PagingInfo.PageIndex == 1 && PagingInfo.TotalRecord > PagingInfo.PageSize) {

        aFirstPage.removeAttr("href");
        aPrevPage.removeAttr("href");
        aFirstPage.addClass("paging_Unlink");
        aPrevPage.addClass("paging_Unlink");
        aNextPage.attr("href", "javascript:NextPage()");
        aLastPage.attr("href", "javascript:LastPage()");

    } else if (PagingInfo.PageIndex == PagingInfo.Pages) {
        aLastPage.removeAttr("href");
        aNextPage.removeAttr("href");
        aLastPage.addClass("paging_Unlink");
        aNextPage.addClass("paging_Unlink");
        aFirstPage.attr("href", "javascript:FirstPage()");
        aPrevPage.attr("href", "javascript:PrevPage()");
    }
    else {
        aFirstPage.attr("href", "javascript:FirstPage()");
        aNextPage.attr("href", "javascript:NextPage()");
        aPrevPage.attr("href", "javascript:PrevPage()");
        aLastPage.attr("href", "javascript:LastPage()");
    }

    if (PagingInfo.Pages <= 1) {
        $("#divPaging").find("a").removeAttr("href");
        $("#divPaging").find("a").addClass("paging_Unlink");
    }

}
//****************************************

//转到首页********************************
function FirstPage() {
    PagingInfo.IsCount = 0;
    PagingInfo.PageIndex = 1;
    GetInfos($(this));
}
//*****************************************

//上一页*********************************
function PrevPage() {
    PagingInfo.IsCount = 0;
    PagingInfo.PageIndex--;
    GetInfos($(this));
}
//*****************************************

//下一页***********************************
function NextPage() {
    PagingInfo.IsCount = 0;
    PagingInfo.PageIndex++;
    GetInfos($(this));
}
//******************************************

//最后一页*********************************
function LastPage() {
    PagingInfo.IsCount = 0;
    PagingInfo.PageIndex = PagingInfo.Pages;
    GetInfos($(this));
}
//******************************************

 

以下为一个实际使用的列子，此次为了方便就不提供字段查询了

  WebForm1.aspx页面是查询页面，

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script src="/CommonModule/Client/JQuery/jquery-1.3.2.js"></script>
  
</head>
<body>
    <form id="form1" runat="server">
      <div id="InformationItems" style="border:0px solid #666666;  width:100%">
        </div>
      <input  type="button"  id="Searchbtn"    value ="查询"   />
      <uc1:PageChage ID="PageChage1" runat="server" />
         <script  type="text/javascript">
           $(document).ready(initEvent);
             function initEvent() {
                 $.ajaxSetup({ cache: false, timeout: 60000 });
                 PagingInfo.PageUrl = "SearchResult.aspx";//ajax查询请求的处理页面
                 PagingInfo.Search = "";//无查询条件即查询所有数据
                 PagingInfo.PageIndex = 1;
                 PagingInfo.PageSize = 10;
                 PagingInfo.OrderKey = "PersonInfo.PersonNo";//排序字段，必须提供
                 PagingInfo.IsCount = 1;
                 $("#selectPageTotal").change(ChangePageIndex);
                 $("#Searchbtn").click(function() { SaveSearchInfo(); GetInfos($(this)); });
                 GetInfos();
             }
             function SaveSearchInfo() {
                 PagingInfo.Search = ""
                 PagingInfo.PageIndex = 1;
                 PagingInfo.PageSize = 10;
                 PagingInfo.OrderKey = "PersonInfo.PersonNo";
                 PagingInfo.IsCount = 1;
             }

    </script>
    </form>
</body>
</html>

 SearchResult.aspx是查询请求的页面，用于查询生成datatable,并组装html。

  后天代码

       protected DataTable PersonInfos = null;
        protected int TotalRecord = 0;
        protected void Page_Load(object sender, EventArgs e)
        {
            SearchPersonInfo(HttpContext.Current.Request);
        }
        private void SearchPersonInfo(HttpRequest request)
        {
            PersonBF personBF = new PersonBF();
            PersonSearchInfo personSearchInfo = new PersonSearchInfo();//查询条件的实体类

            PageChangingInfo pageChangingInfo = new PageChangingInfo();
            pageChangingInfo.PageIndex = string.IsNullOrEmpty(request["PageIndex"].Trim()) ? 1 : int.Parse(request["PageIndex"].Trim());
            pageChangingInfo.PageSize = string.IsNullOrEmpty(request["PageSize"].Trim()) ? 10 : int.Parse(request["PageSize"].Trim());
            pageChangingInfo.SortExpression = request["OrderKey"].Trim();
            pageChangingInfo.SortDerection = string.IsNullOrEmpty(request["isASC"].Trim()) ? 0 : int.Parse(request["isASC"].Trim());
            pageChangingInfo.IsCount = string.IsNullOrEmpty(request["IsCount"].Trim()) ? true : Convert.ToBoolean(int.Parse(request["IsCount"].Trim()));

            PersonInfos = personBF.GetPersonInfo(personSearchInfo, pageChangingInfo, false);//采用存储过程分页
            TotalRecord = pageChangingInfo.ToalRecordCount;

 

        }

 

前台代码（通过一个隐藏的控件保存记录总数，由客户端js读取）：

<table  id="InformationTable"  class="tab"  style="width:100%"  >
    <tr class="Header"><td  width="4%">
    <input type="checkbox"   id="selectAll" /> </td>
    <td  width="14%"><strong>人员编号</strong></td>
    <td  width="8%"><strong>姓名</strong></td>
    <td width="15%"><strong>身份证号码</strong></td>
    <td width="10%"><strong>社保编号</strong></td>
    <td  width="11%"><strong>户口性质</strong></td>
        <td  width="13%"><strong>户籍所在地</strong></td>
    <td  width="12%"><strong>小区</strong></td>

  </tr>
 <% if (PersonInfos != null && PersonInfos.Rows.Count > 0)
   {%>
<%    foreach (System.Data.DataRow dataRow in PersonInfos.Rows)
      {
%>
<tr class="Content">
<td  align="center"><input type="checkbox"  name="Item" PersonName='<%=dataRow["Name"]%>'  S_Community='<%=dataRow["Community"]%>' id='<%=dataRow["PersonNo"]%>' /> </td>
<td><%=dataRow["PersonNo"]%></td>
<td><%=dataRow["Name"]%></td>
<td><%=dataRow["IdentificationNo"]%></td>
<td><%=dataRow["CInsuranceNo"]%></td>
<td><%=dataRow["Category"]%></td>
<td><%=dataRow["Community"]%></td>
<td><%=dataRow["HousingEstate"]%></td>

</tr>
<%} %>
<%} %>
</table>
<input type="hidden" id="hidTotalRecord" value="<%=TotalRecord%>" />

当然我们也可以采用json的方式返回 ，将datatale 中的数据和记录总数封装到json中返回到客户端

转载于:https://www.cnblogs.com/suchen1314/archive/2012/03/16/2399739.html