zoukankan      html  css  js  c++  java
  • 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);
        }
  • 相关阅读:
    在JS中如何去掉千分号
    JS中showModalDialog详细使用
    js里的insertCell和appendChild的区别
    js showModalDialog
    js中innerHTML,innerText,outerHTML的用法和区别
    MYSQL入门指导
    对拍程序C语言实现
    人性的弱点
    POJ3207(2SAT)
    期末考试时间安排
  • 原文地址:https://www.cnblogs.com/zhou-pan/p/9275248.html
Copyright © 2011-2022 走看看