本站业务范围:1、PC端软件开发、网站开发 2、移动端APP、网站、微信接口、微商城开发 3、视频教程、毕业设计辅导
 当前位置:文章中心 >> Java_Jsp_Jdk_eclipse_tomcat
立即购买视频教程 jquery实现无刷新分页
夜鹰教程网 来源:www.yyjcw.com 日期:2015/11/16 10:09:51
分享到:
在现在的项目中使用jquery实现无刷新的分页,数据库采用存储过程进行分页,具体代码就不说了,主要看前段的实现 

这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

在现在的项目中使用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中返回到客户端

复制链接 网友评论 收藏本文 关闭此页
上一条: MyEclipse 8.5 汉化方法  下一条: 什么是JSON?
购买夜鹰教程网视频教程
  推荐教程/优惠活动

  热门服务/教程目录

  夜鹰教程网  新手必看,详细又全面。
  夜鹰教程网  购买教程  夜鹰教程网  在线支付-方便
  夜鹰教程网  担保交易-快捷安全   夜鹰教程网  闪电发货
  夜鹰教程网  电话和QQ随时可以联系我们。
  夜鹰教程网 不会的功能都可以找我们,按工作量收费。

客服电话:153 9760 0032

购买教程QQ:1416759661  购买教程
  热点推荐
初学教程:Java Socket网络编程浅…
Java随机数总结
java读取文本文件内容并获取文件大…
字节流和字符流Java
java常用图片读写程序
怎样成为一个优秀的Java程序员
C++程序员转Java容易吗?难点在哪…
思科培训与华为培训在教材和内容方…
Java注释的使用和定义
使用 Java 实现 Comet 风格的 Web…
利用Java实现zip压缩/解压缩
Java Web三层架构的配置详解
Java Socket编程之我见
使用 Java 实现 Comet 风格的 Web…
两种J2ME网络编程的方法之一
  尊贵服务
夜鹰教程网 承接业务:软件开发 网站开发 网页设计 .Net+C#+VS2008+MSsql+Jquery+ExtJs全套高清完整版视频教程
  最近更新
php实现大文件断点续传功能
java实现断点续传功能
Windows Server 2016新功能
MyEclipse 8.5 汉化方法
jquery实现无刷新分页
什么是JSON?
什么是回调函数
jQuery 1.7下载
jquery加载XML文档
什么是MVC(三层架构)
网页中如何实现音乐和歌词同步
初学教程:Java Socket网络编程浅…
思科培训与华为培训在教材和内容方…
Java随机数总结
字节流和字符流Java
  工具下载  需要远程协助? 购买教程

sql2008视频教程 c#视频教程

VIP服务:如果您的某个功能不会做,可以加我们QQ,给你做DEMO!

JQUERY  Asp.net教程

MVC视频教程  vs2012
.NET+sql开发
手机:15397600032 C#视频教程下载
vs2012 vs2008 vs2010 sql2008 sql2005
Asp.Net  

教程咨询QQ:1416759661


这篇文章不能解决你的问题?我们还有相关视频教程哦!

QQ:1416759661 新手QQ群:7835003  加Q远程协助!

在线解答|Demo制作|远程调试| 点击查看相关的视频教程

技术咨询: 购买教程  技术咨询:购买教程  大胆的加QQ咨询。

关于我们 | 广告投放 | 购买教程 | 网站建设 | 技术辅导 | 常见问题 | 联系我们 | 友情链接 | 购买教程

Nighthawk Tutorials Network 快捷购买教程

夜鹰教程网 版权所有 www.yyjcw.com All rights reserved 备案号:蜀ICP备08011740号3

 

出售asp.net系列视频教程 高清原创版 每天晚上20:30--23:00在线 按照编号从简单到高级 http://www.yyjcw.com/list.html