js+ajax 无刷新分页

最新推荐文章于 2022-11-24 10:34:10 发布

zhudiwoaini

最新推荐文章于 2022-11-24 10:34:10 发布

阅读量3.9k

点赞数

分类专栏： js+ajax 文章标签： ajax function html class xmlhttprequest stylesheet

本文链接：https://blog.csdn.net/zhudiwoaini/article/details/7000026

版权

js+ajax 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

我这个实现的是一个小页面显示7页。点击第七页的时候跳出7-14页。以此类推。因为这个页面实现的功能远比下面的方法多。所以我只是草草的删减了一些东西。虽然文章粗陋。，这毕竟是我自己的成长过程。毕竟是真实的我。我想留下的是思路。而不是代码。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/newsxiao.css" rel="stylesheet" type="text/css" media="all" />
<title>歌曲列表</title>
<script src="js/AC_RunActiveContent.js" type="text/javascript"></script>
    <script src="../js/jquery-1.4.1.min.js" type="text/javascript"></script>
   <style type="text/css">
   .onblurcss
   {
       background-color:#72bce6;
       }
       .mid
       {
           text-align:center;
           margin:0 auto;
           font-size:12px;
           font-weight:bold;
           }
   </style>

<script type="text/javascript">

    var cur = 0;
    var curbl = 0;
    var Msg;
    var curPage = 1;
    var whePge = "";//分页条件
    var pageCount;//每页显示的数量

    function GetXmlHttpObject() {
        var xmlHttp = null;
        try {
            xmlHttp = new XMLHttpRequest();    // Firefox, Opera 8.0+, Safari
        }
        catch (e) {
            try {
                xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");   // Internet Explorer
            }
            catch (e) {
                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        return xmlHttp;

};

//首次加载时候用的。将查询条件以及页码提交给GetPage.aspx，GetPage.aspx调用存储过程查询数据

};

///点击页码或者上一页下一页的时候的根据页码和查询条件分页的。因为当时这个项目的这个页面有其他的功能，所以为了方便我写了两个方法

};

///根据查询条件确定每个标签能分多少页

};

///根据点击的页码实现分页

    function GetPage(pageindex) {
        curPage = pageindex;//更新当前保存的页码
        var pagecount = parseInt(pageCount / 13);
        if (curPage % 7 == 0 && pagecount > curPage) {
            var fenye = document.getElementById("fenye");
            var html = "<a href='#' title='首页' οnclick='firstPage()'><<</a><a href='#' title='上一页' οnclick='prePage();'>|<</a>";
            var j = 0;
            for (var i = curPage; i <= curPage + 7; i++) {
                html += "<a href='#' οnclick='GetPage(" + i + ")' id='num" + j + "'>" + i + "</a>";
                j = j + 1;
            }
            html += "<a href='#' title='下一页' οnclick='nxtPage()'>>|</a><a href='#' title='末页' οnclick='lastPage()'>>></a>";
            fenye.innerHTML = html;
        }
        Check1(whePge, curPage);

};

//点击首页的方法

function firstPage() {
Check(whePge, 1);

};

//点击最后一页的方法

    function lastPage() {
        var pageindex = parseInt(pageCount / 13);
        curPage = pageindex;
        Check1(whePge, pageindex);

};

///点击的页码改变颜色