深入理解jQuery layui分页控件的使用

 更新时间:2016年8月24日 10:00  点击:2005

$.getJSON( )的使用方法简介

$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )

url是必选参数,表示json数据的地址;

data是可选参数,用于请求数据时发送数据参数;

success是可参数,这是一个回调函数,用于处理请求到的数据。

//内容页面 <br>   
<div id="notice_div"></div><br>   //分页控件
<div id="notice_pages"></div>
<script>
var roolurl = "http://" + window.location.host;
var urlAshx = roolurl + "/aa/Ashx/NoticeInfo.ashx";
//var pages = 0;
//获取分页好的公告内容
function GetNoticeList(curr, cid) {
$.getJSON(urlAshx,
{//参数
action: "notice_action",
courseid: cid,
page: curr || 1,//向服务端传的参数,此处只是演示
nums: 3//每页显示的条数
}, function (datajson) {//成功执行的方法
if (datajson != null) {
var norice_content = "";
//alert(datajson.pages);
$(datajson.rows).each(function (n, Row) {
norice_content += " <div class='panel panel-default'>";
norice_content += " <div class='panel-heading'>";
norice_content += " <h3 class='panel-title'>";
norice_content += Row.CreateDate;
norice_content += " ";
norice_content += Row.Creater;
norice_content += " </h3>";
norice_content += " </div>";
norice_content += " <div class='panel-body'>";
norice_content += Row.NoticeContent;
norice_content += " </div>";
norice_content += " </div>";
});
$('#notice_div').html(norice_content);
//alert(11);
//调用分页
laypage({
cont: 'notice_pages',//容器。值支持id名、原生dom对象,jquery对象。【如该容器为】:<div id="page1"></div>
pages: datajson.pages,//总页数
groups: 5, //连续显示分页数
skip: false, //是否开启跳页
skin: '#AF0000',
curr: curr || 1, //当前页,
jump: function (obj, first) {//触发分页后的回调
if (!first) {//点击跳页触发函数自身,并传递当前页:obj.curr
GetNoticeList(obj.curr, cid);
}
}
})
}
});
}
$(document).ready(function () {
GetNoticeList(0, '<%=_courseid%>')
});
</script> 

以上所述是小编给大家介绍的jQuery layui分页控件的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

[!--infotagslink--]

相关文章

  • vue.js 表格分页ajax 异步加载数据

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
  • 基于jquery实现表格无刷新分页

    这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
  • AngularJS实现分页显示数据库信息

    这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
  • vue.js表格分页示例

    这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
  • laypage分页控件使用实例详解

    这篇文章主要为大家详细分享了laypage分页控件使用实例,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-20
  • MySQL分页优化

    这篇文章主要为大家详细介绍了MySQL分页优化,内容思路很详细,有意对MySQL分页优化的朋友可以参考一下...2016-04-22
  • EasyUI Pagination 分页的两种做法小结

    这篇文章主要介绍了EasyUI Pagination 分页的两种做法小结的相关资料,需要的朋友可以参考下...2016-07-25
  • 使用layui实现左侧菜单栏及动态操作tab项的方法

    这篇文章主要介绍了使用layui实现左侧菜单栏及动态操作tab项的方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-12-08
  • 编写PHP脚本来实现WordPress中评论分页的功能

    这篇文章主要介绍了编写PHP脚本来实现WordPress中评论分页的功能的方法,包括上一页下一页和导航式分页功能的添加,需要的朋友可以参考下...2015-12-14
  • 解决JS组件bootstrap table分页实现过程中遇到的问题

    这篇文章主要介绍了JS组件bootstrap table分页实现过程中遇到的问题,感兴趣的小伙伴们可以参考一下...2016-04-23
  • 基于BootStrap的前端分页带省略号和上下页效果

    这篇文章主要介绍了基于BootStrap的前端分页带省略号和上下页效果,需要的朋友可以参考下...2017-05-22
  • 使用vue.js制作分页组件

    本文给大家分享的是个人在使用vue.js制作的文章和评论的分页组件,并使用webpack打包起来,这里推荐给大家,有需要的小伙伴可以参考下...2016-07-01
  • PHP MSSQL 分页实例

    这篇文章主要介绍了PHP MSSQL可刷新分页实例,以及PHP+MSSQL通用分页公式,感兴趣的小伙伴们可以参考一下...2016-04-15
  • jquery DataTable实现前后台动态分页

    本篇文章主要介绍了jquery DataTable实现前后台动态分页。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2017-06-24
  • yii2分页之实现跳转到具体某页的实例代码

    这篇文章主要介绍了yii2分页之实现跳转到具体某页的实例代码的相关资料,需要的朋友可以参考下...2016-06-12
  • jQuery实现的分页功能示例

    这篇文章主要介绍了jQuery实现的分页功能,结合实例形式较为详细的分析了jQuery实现分页功能的具体步骤及相关操作技巧,包括前台样式、布局及jQuery分页插件的调用方法,需要的朋友可以参考下...2017-01-26
  • Angular ui.bootstrap.pagination分页

    这篇文章主要为大家详细介绍了Angular ui.bootstrap.pagination 分页的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-01-23
  • 详解Yii实现分页的两种方法

    本篇文章主要介绍了Yii实现分页的两种方法,一种是用DAO实现,另外一种是在widget实现.有兴趣的可以了解一下。 ...2017-01-25
  • 移动端web滚动分页的实现方法

    这篇文章主要为大家详细介绍了移动端web滚动分页的实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-05-09
  • 基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用

    本文给大家介绍基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用,介绍页面内容常用到的数据分页处理,以及Bootstrap插件JSTree的使用,非常具有参考借鉴价值,感兴趣的朋友一起学习吧...2016-05-14