深入理解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 相关文章推荐
如何用js控制css中的float的代码
Aug 16 Javascript
js window.event对象详尽解析
Feb 17 Javascript
js取得url地址参数实例
Feb 22 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
Bootstrap基本插件学习笔记之折叠(22)
Dec 08 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
AngularJS上传文件的示例代码
Nov 10 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
thinkphp 多表 事务详解
2013/06/17 PHP
PHP eval函数使用介绍
2013/12/08 PHP
php实现httpRequest的方法
2015/03/13 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
php 使用curl模拟登录人人(校内)网的简单实例
2016/06/06 PHP
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
AngularJS Phonecat实例讲解
2016/11/21 Javascript
Bootstrap实现渐变顶部固定自适应导航栏
2020/08/27 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
node.js操作mongodb简单示例分享
2017/05/25 Javascript
vue使用drag与drop实现拖拽的示例代码
2017/09/07 Javascript
javascript实现简单打字游戏
2019/10/29 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python getopt模块处理命令行选项实例
2014/05/13 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
python变量不能以数字打头详解
2016/07/06 Python
Python线程指南详细介绍
2017/01/05 Python
Python实现登录接口的示例代码
2017/07/21 Python
Python中的pack和unpack的使用
2018/03/12 Python
python 统计数组中元素出现次数并进行排序的实例
2018/07/02 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
django 自定义过滤器(filter)处理较为复杂的变量方法
2019/08/12 Python
Python实现列表中非负数保留,负数转化为指定的数值方式
2020/06/04 Python
pyMySQL SQL语句传参问题,单个参数或多个参数说明
2020/06/06 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
英国著名书店:Foyles
2018/12/01 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
创业计划书——互联网商机
2014/01/12 职场文书
银行求职信范文怎么写
2015/03/20 职场文书
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers