深入理解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 相关文章推荐
让textarea控件的滚动条怎是位与最下方
Apr 20 Javascript
JQuery 遮罩层实现(mask)实现代码
Jan 09 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
javascript单例模式的简单实现方法
Jul 25 Javascript
js判断子窗体是否关闭的方法
Aug 11 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
JavaScript实现图片切换效果
Aug 12 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
JS前端基于canvas给图片添加水印
Nov 11 Javascript
JavaScript小技巧带你提升你的代码技能
Sep 15 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
全国FM电台频率大全 - 21 海南省
2020/03/11 无线电
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
通过js脚本复制网页上的一个表格的不错实现方法
2006/12/29 Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
关于jquery css的使用介绍
2013/04/18 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
jquery 多行文本框(textarea)高度变化
2013/07/03 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JS实现仿新浪黄色经典滑动门效果代码
2015/09/27 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
js实现下一页页码效果
2017/03/07 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
浅谈vue中使用图片懒加载vue-lazyload插件详细指南
2017/10/23 Javascript
JavaScript canvas实现围绕旋转动画
2017/11/18 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
详解vue-cli下ESlint 配置说明
2018/09/03 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
python opencv 图像尺寸变换方法
2018/04/02 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
2013/07/11 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
办公室副主任岗位职责
2013/11/25 职场文书
工程业务员工作职责
2013/12/07 职场文书
秋季红领巾广播稿
2014/01/27 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
2014年销售部工作总结
2014/12/01 职场文书
市语委办2016年第十九届“推普周”活动总结
2016/04/05 职场文书
MySQL 逻辑备份 into outfile
2022/05/15 MySQL