MENU

ajax分页

前言

这是好早之前自己写的一个功能了,当时本来说去jQuery库找一个.找到几个吧,但是都觉得太麻烦了,不想用(说白了就是懒φ( ̄∇ ̄o))
然后自己就写了一个,毕竟自己写的自己知道怎么用 好了,不说这么多废话了,上正文

正文

$(function () {

//页面加载时调用page方法
page();

/*
* page方法,用于ajax分页
* page:当前页,默认从第一页开始
*/
function page(page=1) {

    //ajax请求触发
    $.ajax({
        url:"./service/pageManage.php",
        type:"POST",
        data:{"page":page},
        async:false, //async,默认为true,代表开启异步,此处关闭
        dataType:"json",

关闭异步,如果不关闭,最后呈现的效果和传统分页一样,会有页面刷新,关闭之后,就跟卡片切换一样

success:function (data) {
            var rows        = data["rows"]; //返回的数据条数
            var totals      = data["totals"]; //返回的总页数
            var currentPage = data["page"]; //返回的当前页数
            var trContent   = null; //定义一个存放tr内容的变量

            if ($(".rowData").length>0) //判断tr是否有内容,如果有则移除
                $(".rowData").remove();

            //根据返回的数据条数添加数据
            for (var i=0;i<rows.length;i++)
            {
                trContent  = "<tr class='rowData'><td>" + (i+1) + "</td>";
                trContent += "<td><img src="true" rows="true" i="true" banner="true" img="true" width="120" height="50">" + "</td>";
                trContent += "<td>" + rows[i].banner_title + "</td>";
                trContent += "<td>" + rows[i].banner_sub_title + "</td>";
                trContent += "<td>" + rows[i].banner_desc.substr(0,10) + "...</td>";
                trContent += "<td><div class='button-group'>";
                trContent += "<a class='button border-main' href='javascript:void(0)'" +
                "onclick='return jumpSaveBanner(" + rows[i].banner_id + ")'>";
                trContent += "<span class='icon-edit'></span>修改</a>";
                trContent += "<a class='button border-red' href='javascript:void(0)'" +
                "onclick='return deleteBanner(" + rows[i].banner_id + ")'>";
                trContent += "<span class='icon-trash-o'></span>删除</a></div></td></tr>";
                $("tr:last").before(trContent); //最后一个tr元素之前添加使用js动态生成的数据
            }

data为一个数组用来存放返回的数据条数,总页数,与当前页数.循环添加这一步可根据自身的实际业务需求进行更改.为什么要清空呢,因为清空之后内容才不会重复叠加,比如我从第一页跳到第二页,没有清空内容的话,就会在同一页显示,但是清空之后,就正常显示了.

注:这里每页显示条数(pageSize)我默认设置的一条,也可根据实际业务需求进行更改


            //判断拥有这个class的元素个数是否等于总页数
            if ($(".pageNum").length == totals)
            {
                /*
                * 循环判断拥有这个class的元素的文本内容是否和当前页一样
                * 如果一样,则追加一个class,代表元素内容与当前页数一致,不一样就移除
                */
                $(".pageNum").each(function () {
                        if (parseInt($(this).text()) == currentPage)
                            $(this).addClass("current2");
                        else
                            $(this).removeClass("current2");
                });
            }

            //当上面条件不成立时,则走入这个分支语句
            else
            {
                //定义一个pageContent变量并为它赋值
                var pageContent = "<a href='javascript:void(0)' id='firstPage'>首页</a>";
                pageContent    += "<a href='javascript:void(0)' id='previous'>上一页</a>";

                /*
                * 循环添加含有页数的标签
                * totals:总页数
                * j:元素内容,这里已经设置好为数字,方便向后台传递进行分页
                */
                for (var j=1;j<=totals;j++)
                {
                   pageContent += "<a href='javascript:void(0)' class='pageNum'>" + j + "</a>";
                }

                //在上方每一页页数添加完后,添加剩下的内容
                pageContent += "<a href='javascript:void(0)' id='next'>下一页</a>";
                pageContent += "<a href='javascript:void(0)' id='lastPage'>尾页</a>";

                //最后将整个内容加入到一个盒子中
                $(".pageList").html(pageContent);

                /*
                * 加入到盒子中后,循环判断拥有这个class的元素的文本内容是否和当前页一样
                * 如果一样,则追加一个class,代表元素内容与当前页数一致,不一样就移除
                */
                $(".pageNum").each(function () {
                    if (parseInt($(this).text()) == currentPage)
                        $(this).addClass("current2");
                    else
                        $(this).removeClass("current2");
                });
            }
        },
        //出错时执行的方法(用于调试)
        error:function (XMLHttpRequest, textStatus, errorThrown) {
            // console.log(XMLHttpRequest);
            // console.log(textStatus);
            // console.log(errorThrown);
        }
    });
    return false;
}

/*
* 当点击拥有这个class的元素时,则调用page方法,将元素中的文本值转换为整型
* 之后调用page方法,将当前页数传递过去
*/
$(".pageNum").click(function () {
    page($(this).text());
});

/*
* 当点击上一页按钮时,当前页数减1
* 后台可以加一个判断,当减去之后的页数小于1时
* 自动将当前页的值变为最后一页的值
*/
$("#previous").click(function () {
    $(".pageNum").each(function () {
        if ($(this).hasClass("current2"))
        {
            page(parseInt($(this).text())-1);
            return false;
        }
    });
});

/*
* 当点击下一页按钮时,当前页数加1
* 后台可以加一个判断,当前页数加1之后如果值大于最后一页
* 自动将当前页的值变为第一页的值
*/
$("#next").click(function () {
    $(".pageNum").each(function () {
        if ($(this).hasClass("current2"))
        {
            page(parseInt($(this).text())+1);
            return false;
        }
    })
});

/*
* 跳到第一页
*/
$("#firstPage").click(function () {
    page();
});

/*
* 跳到最后一页
* i:索引值,判断i是否为最后一个元素,如果是则调用page,之后退出循环
*/
$("#lastPage").click(function () {
    var length = $(".pageNum").length;
    $(".pageNum").each(function (i) {
        if (i == length-1)
        {
            page(parseInt($(this).text()));
            return false;
        }
    });
});
});

尾声

当时根据自己的实际需求来写的ajax分页功能,里面的current2这个class可以根据自己的css样式进行调配,如果想要完整demo,可以向我的邮箱发送信息:1159539137@qq.com(不要在意为什么QQ邮箱,因为方便),备注分页demo

至于ajax的请求地址可以根据自己的实际业务场景进行修改,比如tp的就是/模块/控制器/操作名 java的ssm就是 *.action或者*.do

Leave a Comment

2 Comments
  1. 先占个坑,回头有空再来看一下#(中枪)