简单ajax 分页

最新推荐文章于 2021-05-17 16:05:36 发布

weixin_33778778

最新推荐文章于 2021-05-17 16:05:36 发布

阅读量300

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000016949370

版权

简单分页：
效果图：
图片描述
思路：

数据渲染=》数据遍历（每页显示已规定好的条数）.bindList（）和执行分页渲染.initPaginator（）
点击分页和下一页的时候，重新请求数据渲染，对应的数据重新遍历。

代码实现：

html:

<!doctype html>
<html style='' lang="en">
<head>
    <title>分页测试</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0"/>
    <script src="https://cdn.bootcss.com/jquery/2.1.0/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
    <style>
        * {margin: 0;padding: 0;}
        .list li{display: block;}
        .list li img{display: block;width:100px;}
    </style>

</head>
<body>
<div class="list">
    <ul id="listContent">
        <li></li>
    </ul>
</div>
<div id="pagination" style="display: none">
    <ul class="pagination"></ul>
</div>
</body>
</html>

js:

<script type="text/javascript">
    var List = {
        contentId: "listContent", //渲染列表id
        pageId: "pagination",  //渲染分页id
        pageIndex: 1, //第几页开始渲染
        pageSize: 6,//每页渲染多少条数据
        pageSum:0,//共多少条数据
        refreshId: null
    };
    //data.count为总的数据条数，即共多少条数据
    List.loadList = function (pageIndex) {
        var ajaxRequest = function () {
            $.ajax({
                url: "http://123.56.196.192:2000/syxa/news-consult/2/0/1000000",
                type: "GET",
                // data: data,
                error: function () {
                    // console.log(error);
                },
                success: function (data) {
                    console.log(data);
                    console.log(data.data.length);
                    if (data.count == 0) {
                        console.log('当前没有数据记录');
                    }
                    else {
                        if(pageIndex == 1){
                            List.initPaginator(data.count, data.data);
                            $('#' + List.pageId).show();
                            $('.pagination li[data-page="1"]').addClass('active');
                            $('.pagination li.page-first').removeClass('active').addClass('disabled');
                        }
                        List.bindList(pageIndex,data.count,data.data);
                    }
                }
            });
        }
        ajaxRequest();
    };

    //数据遍历
    List.bindList = function (pageIndex,count,data) { 
        var start = (pageIndex - 1) * List.pageSize; // 数据开始点
        var content = '';
        for (var index = start; index < pageIndex*List.pageSize && index < data.length; index++) { //遍历第几页内容，pageIndex也页面顺序
            console.log(data[index]);
            content += List.getListItem(data[index]);
        }
        $('#' + List.contentId).html('');
        $('#' + List.contentId).append(content);
    };

    List.getListItem = function (item) {
        var content = '';
        content += ' <li>';
        content += ' <a href="javascript:;"><img src="' + item.top_img + '" alt="' + item.title + '" /></a>';
        content += ' <h4>' + item.title + '</h4>';
        content += ' </li>';
        return content;
    };
    //分页
    List.initPaginator = function (count, data) {
        var pageSize = List.pageSize;
        var pageTotal = Math.ceil(count / pageSize);
        var pageIndex = List.pageIndex;
        List.pageSum = pageTotal;
        console.log(pageTotal);
        var html = "";
        for (var i = pageIndex; i <= pageTotal; i++) {
            html += '<li class="page" data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>';
        }
        html = '<li data-page="1" class="page-first"><a href="javascript:;">首页</a></li>'
            + '<li data-page="" class="page-prev disabled"><a href="javascript:;" >上一页</a></li>'
            + html
            + '<li data-page="2" class="page-next"><a href="javascript:;">下一页</a></li>'
            + '<li data-page="' + pageTotal + '" class="page-last"><a href="javascript:;">末页</a></li>';
        $('#' + List.pageId).find('ul').html(html);
    };

    //点击页码刷新跳数据
    $('#' + List.pageId).on('click','li',function (e) {
        var pageIndex=parseInt($(this).attr('data-page'));
        var activeIndex=parseInt($('.pagination li.active').attr('data-page'));//当前active状态页码
        $('.pagination li').removeClass('active');
        if($(this).hasClass('page-prev')) {
            List.loadList(activeIndex-1);
            var cur=activeIndex-1;
            $('.page-next,.page-last').removeClass('disabled');
            $('.pagination li.page[data-page=' + cur + ']').addClass('active');
            if(cur == 1){
                $('.page-prev,.page-first').addClass('disabled');
                $('.page-prev').attr('data-page','');
            }else{
                $('.page-prev').attr('data-page',activeIndex-2);
                $('.page-next').attr('data-page',activeIndex);
            }

        }else if($(this).hasClass('page-next')){
            List.loadList(activeIndex+1);
            var cur=activeIndex+1;
            $('.page-prev,.page-first').removeClass('disabled');
            $('.pagination li.page[data-page=' + cur + ']').addClass('active');
            if(cur == List.pageSum){
                $('.page-next,.page-last').addClass('disabled');
                $('.page-next').attr('data-page','');
            }else{
                $('.page-prev').attr('data-page',activeIndex);
                $('.page-next').attr('data-page',activeIndex+2);
            }

        }else if((!$(this).hasClass('page-prev')) &&(!$(this).hasClass('page-next'))){
            $(this).addClass('active');
            List.loadList($(this).attr('data-page'));
        }
        if(!($(this).hasClass('page-first')) && !($(this).hasClass('page-prev'))&& !($(this).hasClass('page-last')) && !($(this).hasClass('page-next'))){
            if(pageIndex == 1){
                $('.page-prev,.page-first').addClass('disabled');
                $('.page-next,.page-last').removeClass('disabled');
                $('.page-next').attr('data-page','2');
            }else if(pageIndex == List.pageSum){
                $('.page-prev,.page-first').removeClass('disabled');
                $('.page-next,.page-last').addClass('disabled');
                $('.page-prev').attr('data-page',List.pageSum-1);
                $('.page-next').attr('data-page','');
            }else{
                $('.page-prev,.page-first').removeClass('disabled');
                $('.page-next,.page-last').removeClass('disabled');
                $('.page-prev').attr('data-page',pageIndex-1);
                $('.page-next').attr('data-page',pageIndex+1);
            }
        }
    });
    //页面初始化
    $(function () {
        List.loadList(List.pageIndex);
    });

</script>

weixin_33778778

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫