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


Posted in Javascript onAugust 17, 2016

$.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分页控件的使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
插件:检测javascript的内存泄漏
Mar 04 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
json+jQuery实现的无限级树形菜单效果代码
Aug 27 Javascript
浅析JavaScript声明变量
Dec 21 Javascript
彻底学会Angular.js中的transclusion
Mar 12 Javascript
jQuery实现鼠标经过显示动画边框特效
Mar 24 jQuery
JavaScript运动框架 多值运动(四)
May 18 Javascript
使用原生js编写一个简单的框选功能方法
May 13 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 Javascript
AngularJS 作用域详解及示例代码
Aug 17 #Javascript
jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
Aug 17 #Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
Aug 17 #Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
Aug 17 #Javascript
Node.js中使用jQuery的做法
Aug 17 #Javascript
学习Angular中作用域需要注意的坑
Aug 17 #Javascript
js enter键激发事件实例代码
Aug 17 #Javascript
You might like
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
PHP url的pathinfo模式加载不同控制器的简单实现
2016/08/12 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
固定网页背景图同时保持图片比例的思路代码
2013/08/15 Javascript
Jquery实现显示和隐藏的4种简单方式
2013/08/28 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
vue2利用Bus.js如何实现非父子组件通信详解
2017/08/25 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
详解关于vue2.0工程发布上线操作步骤
2018/09/27 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
原生js+canvas实现贪吃蛇效果
2020/08/02 Javascript
基于JavaScript实现简单抽奖功能代码实例
2020/10/20 Javascript
Map与WeakMap类型在JavaScript中的使用详解
2020/11/18 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Django Rest framework之认证的实现代码
2018/12/17 Python
在Python中使用Neo4j的方法
2019/03/14 Python
python画双y轴图像的示例代码
2019/07/07 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
pycharm运行程序时看不到任何结果显示的解决
2020/02/21 Python
稀有和绝版书籍:Biblio.com
2017/02/02 全球购物
临床医学专业个人的自我评价
2013/09/27 职场文书
工作疏忽检讨书
2014/01/25 职场文书
合作意向书格式及范文
2014/03/31 职场文书
区政府领导班子个人对照检查材料
2014/09/25 职场文书
2014县政府领导班子三严三实对照检查材料思想汇报
2014/09/26 职场文书
民事答辩状格式范文
2015/05/21 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
Java数据结构之链表相关知识总结
2021/06/18 Java/Android