在页面分页的方法:
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); ???}
JQuery的分页插件pagination.js
原文地址:https://www.cnblogs.com/zhou-pan/p/9275248.html