JQuery的分页插件pagination.js

Posted 2020-12-02 zhoupan

在页面分页的方法：

　　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);
    }