分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

JQuery的分页插件pagination.js

发布时间:2023-09-06 01:26责任编辑:赖小花关键词: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); ???}

JQuery的分页插件pagination.js

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

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved