• JQuery的分页插件pagination.js


    在页面分页的方法:

      ajax从后台获取数据后在前台进行分页

          

    $.ajax({
                type: "POST",
                url: API_CONFIG.getNews,
                data: JSON.stringify(params),
                dataType: "json",
                contentType: 'application/json;charset=UTF-8',
                success: function(data) {
                    if(data != null) {
                        if(data.STATUS == true) {
                            var newsList = data.DATA;
                            var count = data.COUNT;
                            var pageCount = Math.ceil(count / pageSize);
                            if(null != newsList && '' != newsList) {
                                var html = "";
                                for(i = 0; i < newsList.length; i++) {
                                    html += '<div class="advisoryCenter_News_mould">';
                                    html += '<div class="advisoryCenter_News_picture">';
                                    html += '<img src="' + newsList[i].imgUrl + '"/>';
                                    html += '</div>';
                                    html += '<div class="advisoryCenter_News_text">';
                                    html += '<div class="advisoryCenter_News_title">';
                                    html += '<a href="news.html?id=' + newsList[i].id + '">' + newsList[i].newsTitle + '</a>';
                                    html += '</div>';
                                    html += '<div class="advisoryCenter_News_information">';
                                    html += '<span>' + newsList[i].newsOriginate + '</span>';
                                    html += '<span></span>';
                                    html += '<span>' + newsList[i].newsType + '</span>';
                                    html += '<span>' + newsList[i].startTime + '</span>';
                                    html += '<span></span>';
                                    html += '</div>';
                                    html += '<div class="advisoryCenter_News_article">' + newsList[i].newsDesc + '</div>';
                                    html += '</div>';
                                    html += '</div>';
                                }
                                html += '<div class="m-style M-box"></div>';
                                $('#newsList').html(html);
                                //分页
                                $(".M-box").pagination({
                                    pageCount: pageCount,
                                    coping: true,
                                    current: pageIndex,
                                    homePage: '首页',
                                    endPage: '末页',
                                    prevContent: '上页',
                                    nextContent: '下页',
                                    callback: function(api) {
                                        pageCallback(api);
                                    }
                                });
                            } else {
                                document.getElementById('newsList').innerHTML = "暂无数据"
                            }
                        } else {
                            layer.msg("", {
                                time: 1500,
                                content: data.MSG
                            });
                        }
                    } else {
                        layer.msg("", {
                            time: 1500,
                            content: '服务异常'
                        });
                    }
                },
                error: function() {
                    layer.msg("", {
                        time: 1500,
                        content: '查询新闻失败'
                    });
                }
            });

      翻页方法

    //翻页调用   
        function pageCallback(api) {
            var pageIndex = api.getCurrent() //获取当前代码
            queryNewsList(pageIndex);
        }
  • 相关阅读:
    团队展示
    平衡二叉树AVLTree
    红黑树原理
    日本楼市崩盘始末
    池化
    Spring配置多数据源
    关于C语言指针几个容易混淆的概念
    .net core 部署 Docker 所遇到的几个问题
    自定义类加载器也是无法实现加载java.lang.String的
    jquery轻量级数字动画插件jquery.countup.js
  • 原文地址:https://www.cnblogs.com/zhou-pan/p/9275248.html
Copyright © 2020-2023  润新知