深入理解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动态调整iframe高度的代码
Apr 10 Javascript
Prototype源码浅析 String部分(四)之补充
Jan 16 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
javascript中sort()的用法实例分析
Jan 30 Javascript
运用js教你轻松制作html音乐播放器
Apr 17 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
Dec 06 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
JS实现小米轮播图
Sep 21 Javascript
Vue中用JSON实现刷新界面不影响倒计时
Oct 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
PHP输出控制功能在简繁体转换中的应用
2006/10/09 PHP
php中{}大括号是什么意思
2013/12/01 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
php 处理png图片白色背景色改为透明色的实例代码
2018/12/10 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
2014/01/27 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
微信小程序开发探究
2016/12/27 Javascript
Vue原理剖析 实现双向绑定MVVM
2017/05/03 Javascript
vue使用mint-ui实现下拉刷新和无限滚动的示例代码
2017/11/06 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
解决 window.onload 被覆盖的问题方法
2020/01/14 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
numpy.delete删除一列或多列的方法
2018/04/03 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Sanic框架流式传输操作示例
2018/07/18 Python
详解python中sort排序使用
2019/03/23 Python
Django ORM 常用字段与不常用字段汇总
2019/08/09 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
用C语言实现文件读写操作
2013/10/27 面试题
C/C++程序员常见面试题二
2015/11/19 面试题
作文评语大全
2014/04/23 职场文书
说明书格式及范文
2014/05/07 职场文书
网站出售协议书范文
2014/10/10 职场文书
2014年乡镇个人工作总结
2014/12/03 职场文书
自我检讨书怎么写
2015/05/07 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang