通用ajax分页

最新推荐文章于 2022-05-07 09:15:56 发布

qq_20898177

最新推荐文章于 2022-05-07 09:15:56 发布

阅读量171

点赞数

本文链接：https://blog.csdn.net/qq_20898177/article/details/77009754

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>

</style>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/base.css">
<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<script>
    //分页
    var curPage = 1; //当前页码
    var pageSize = 10; //当前每页显示条数
    var total,totalPage; //总记录数，总页数
    var eventName;

    $(function () {
        //加载分页中的select
        var pagecount = '<select name="pagecount" id="pagecount">' +
                '<option value="10">10</option>' +
                '<option value="20">20</option>' +
                '<option value="30">30</option>' +
                '<option value="40">40</option>' +
                '</select>';
        $("#tabBar").html(pagecount);
        getList();
    });

    //获取分页条
    function getPageBar(){
        $("#tabBar").find('span').remove();
        $("#tabBar").find('p').remove();
        var pageStr = '';
        var pageStr2 = '';
        //如果当前是第一页
        if(curPage==1){
            pageStr += '<span><a href="javascript:void(0)" rel="1"><i class="iconfont icon-fanyezuo disabled_icon"></i></a></span>';
        }else{
            pageStr += '<span><a href="javascript:void(0)" rel="'+ (curPage-1) +'"><i class="iconfont icon-fanyezuo"></i></a></span>';
        }
        //页码大于最大页数
        if(curPage>totalPage) curPage = totalPage;
        //页码小于1
        if(curPage<1) curPage = 1;
        pageStr += '<p>第&nbsp;<input type="text" placeholder="1" value="'+curPage+'" id="pageNum" οnkeypress="return event.keyCode>=48&&event.keyCode<=57" ng-pattern="/[^a-zA-Z]/">&nbsp;页,共&nbsp;<span>'+totalPage+'</span>&nbsp;页</p>';
        //如果是最后页
        if(curPage>=totalPage){
            pageStr += '<span><a href="javascript:void(0)" rel="'+ totalPage +'"><i class="iconfont icon-fanyeyou disabled_icon"></i></a></span></div>';
        }else{
            pageStr += '<span><a href="javascript:void(0)" rel="'+ (parseInt(curPage)+1) +'"><i class="iconfont icon-fanyeyou"></i></a></span></div>';
        }
        $("#tabBar").append(pageStr);
        //页码改变，按回车后更新列表
        $('#pageNum').bind('keyup',function(event){
            if(event.keyCode == "13") {
                curPage = parseInt($('#pageNum').val());
                if(curPage>totalPage) curPage = totalPage;
                if(curPage<1) curPage = 1;
                funt ();
            }
        });
        //如果是最后页
        console.log(2,curPage,totalPage,pageSize);
        if(curPage>=totalPage){
            console.log(3,(totalPage-1)*pageSize+1);
            pageStr2 += '<p>显示&nbsp;<span>'+ ((totalPage-1)*pageSize+1) +'</span>&nbsp;到&nbsp;<span>'+ total +'</span>&nbsp;条,';
        }else{
            console.log(4,(curPage-1)*pageSize+1,curPage*pageSize);
            pageStr2 += '<p>显示&nbsp;<span>'+ ((curPage-1)*pageSize+1) +'</span>&nbsp;到&nbsp;<span>'+ (curPage*pageSize) +'</span>&nbsp;条,';
        }
        pageStr2 += '共&nbsp;<span>'+ total +'</span>&nbsp;条记录</p></div>';
        pageStr2 += '</p></div>';
        $("#tabBar").siblings("p").html(pageStr2);
    }

    //分页
    function funt() {
        return window[eventName]();
    }

    $(function () {
        //当前每页显示条数改变
        $("#pagecount").change(function () {
            curPage = 1;
            pageSize = parseInt($(this).children('option:selected').val());
            funt ();
        });
        //给span a绑定点击事件
        $("#tabBar").parent().on('click','span a',function(){
            curPage = $(this).attr("rel");
            funt ();
        });
    })

    function getList() {
        $('#aicList').find("*").remove();
        var requestData = {
            "PageInfo": {
                "Index": parseInt(curPage),
                "Size": parseInt(pageSize)
            },
            "action": "AicSee.GetAicSeeSearch"
        };
        $.ajax({
            type: "GET",
            url: "../json/aic.json",
            data: requestData,
            dataType: "json",
            success: function (data) {
                if (data.ResultCode == "1") {
                    var list = data.Data.DataList;
                    var html = '';
                    $("#aicList").html("");
                    for (var i = 0; i < list.length; i++) {
//                        html += '<tr class="'+ bgClass1[list[i].Status] + " " + bgClass2[list[i].IsChecked] +'">' +
                        html += '<tr>' +
                                '<td>' + list[i].RegionName +'<br/>('+ list[i].RegionCode + ')</td>' +
                                '<td>' + list[i].Period + '</td>' +
                                '<td>' + list[i].Title + '</td>' +
                                '<td>' + list[i].StartTime + '</td>' +
                                '<td>' + list[i].StartTime + '</td>' +
                                '<td id="dealPage_'+ i +'">' ;
                        html += '</td>';
                    }
                    if (list.length <= 0) {
                        html += "<tr><td colspan='7'>暂无数据</td></tr>";
                    }
                    $("#aicList").append(html);
                    var pageInfo = data.Data.PageInfo;
                    total = pageInfo.TotalResult; //总记录数
                    totalPage = pageInfo.TotalPage; //总页数
                    eventName = "getList";
                    getPageBar();
                } else {
                    alert("获取标注列表失败");
                }
            },
            error: function () {
                alert("连接错误 获取树结构");
            }
        })
    }
</script>
<body>
<table class="table no-shadow">
    <thead>
    <tr>
        <td>地区</td>
        <td>期号</td>
        <td>标题</td>
        <td>生效开始时间</td>
        <td>当前状态</td>
    </tr>
    </thead>
    <tbody id="aicList">
    </tbody>
</table>
    <div class="tab_tool_wrapper">
        <div id="tabBar"></div>
        <p></p>
    </div>
</body>
</html>
//分页思路：
先 生成列表，在列表方法中调用分页方法，getPageBar() //当前每页显示条数改变，调用生成列表方法。
页面结构 span p span

//如果当前是第一页 页码左边按钮不能点，所以分两种情况，（最后一页同理）
//如果页码大于最大页数，或小于最小页数，均设置为最大或最小值
//给span设置rel属性，通过rel属性确定当前页码

qq_20898177

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
通用ajax分页

aic.htmlscript src="../js/base.js">script>script src="../js/aic.js">script>div class="tab_tool_wrapper"> div id="tabBar"> --> 10--> 20--> 30--> 40-->
复制链接

扫一扫