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

原文地址:https://www.cnblogs.com/zhou-pan/p/9275248.html

时间: 2024-10-24 20:44:35

JQuery的分页插件pagination.js的相关文章

jquery ajax分页插件特效源代码demo完整版

原文:jquery ajax分页插件特效源代码demo完整版 源代码下载地址:http://www.zuidaima.com/share/1550463586798592.htm 网上找的,原版本没有测试数据和建表脚本啥的,我给加上了.

jQuery时间格式插件-moment.js的使用

jQuery时间格式插件-moment.js的使用 moment.js插件的使用,使用之前在页面引入对应的js文件: 详细的操作可见moment中文官网:http://momentjs.cn/ 日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); // 四月 14日 2017, 1:41:52 下午 moment().format('dddd'); // 星期五 moment().format("MMM Do YY"); // 4月 14日

jq的分页插件(pagination.min.js)

首先引入jq,再引pagination.min.js和pagination.css html: <div id="pagingmix" class="page m-style M-box3"> </div> js: function laodPage(pages,alen){ $(".M-box3").whjPaging({ totalSize: alen, totalPage: pages, callBack: func

Ajax分页插件Pagination从前台jQuery到后端java总结

前端代码.html var pageSize = 10;//设置每页显示条数 var total;//数据总条数 function pagination() { $("#Pagination").pagination(total, { callback : PageCallback, prev_text : '上一页', next_text : '下一页', items_per_page : pageSize, num_display_entries : 4, //连续分页主体部分显示

Jquery排序分页插件tablesorter简介

一.简介: Tablesorter?作用于一个标准的HTML表格(有THEAD,TBODY),实现静态排序:主要特点包括: (1) 多列排序: (2) 支持文本.URI地址.数值.货币.浮点数.IP地址.日期.时间以及自定义类型排序: (3) 支持第二个隐藏域排序,例如保持按字母排序时的排序对其他标准(支持两个): (4) 可扩展外观: (5) 程序简小: (6) 支持 TH 元素的 ROWSPAN 和 COLSPAN 属性: (7) 浏览器支持:IE6+,FF2+,Safari2.0+,Ope

一款基于jQuery的分页插件

特别提示:本人博客部分有参考网络其他博客,但均是本人亲手编写过并验证通过.如发现博客有错误,请及时提出以免误导其他人,谢谢!欢迎转载,但记得标明文章出处:http://www.cnblogs.com/mao2080/ 1.效果示例 2.代码样式 /* * 基于jquery 分页插件 * by [email protected] */ $(function (){ window.pageUtil = { /** * 构建分页 * @param {Object} divId 要绑定的容器 * @pa

简单的jquery进度条插件LineProgressbar.js

参考   http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> $(function(){ $('#progressbar1').LineProgressbar({ percentage: 50 }); $('#progressbar2').L

jQuery插件pagination.js源码解读

pagination的github地址:https://github.com/gbirke/jquery_pagination 公司用的是1.2的版本,所以我就读1.2的了. jQuery.fn.pagination = function(maxentries, opts){ opts = $.extend({ isCurrentInfo: false,//是否显示当前页信息: 当前第1页,共10页 currentCls: '.current-info',//当前页class items_per

ajax 分页(jquery分页插件pagination) 小例3

<#macro ajaxPaginte url > <script type="text/javascript"> var PageSize = 10;//每页行数 var IsInit = true;//初始化 var search= function(pageIndex,initFlag) { var url = "${url}"; $.ajax({ type: 'GET', url: url, data: { pageNumber:pa