深入理解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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
Javascript 同时提交多个Web表单的方法
Feb 19 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
Jun 24 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JavaScript统计网站访问次数的实现代码
Nov 18 Javascript
JavaScript操作select元素和option的实例代码
Jan 29 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
详解Vue2.x-directive的学习笔记
Jul 17 Javascript
使用react context 实现vue插槽slot功能
Jul 18 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
Jul 21 Javascript
手把手带你搭建一个node cli的方法示例
Aug 07 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脚本[带参数]的方法
2010/01/22 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php获取apk包信息的方法
2014/08/15 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
PHP的Yii框架中Model模型的学习教程
2016/03/29 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
js对象关系图 方便dom操作
2012/03/18 Javascript
Web跨浏览器进程通信(Web跨域)
2013/04/17 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
Jquery基础教程之DOM操作
2015/08/19 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
JQuery ztree 异步加载实例讲解
2016/02/25 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
开发Vue树形组件的示例代码
2017/12/21 Javascript
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
js核心基础之构造函数constructor用法实例分析
2019/05/11 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
[55:44]完美世界DOTA2联赛决赛 FTD vs Phoenix 第二场 11.08
2020/11/11 DOTA
Python简单连接MongoDB数据库的方法
2016/03/15 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python3爬楼梯算法示例
2019/03/04 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
公司廉洁自律承诺书
2014/03/27 职场文书
法院信息化建设方案
2014/05/21 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android