深入理解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 相关文章推荐
用jquery实现等比例缩放图片效果插件
Jul 24 Javascript
jquery 页面滚动到指定DIV实现代码
Sep 25 Javascript
jQuery中delegate和on的用法与区别详细解析
Jan 26 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
原生JS实现图片轮播效果
Dec 26 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
Aug 13 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/12/13 PHP
PHP程序61条面向对象分析设计的经验小结
2008/11/12 PHP
php输出xml格式字符串(用的这个)
2012/07/12 PHP
解析:通过php socket并借助telnet实现简单的聊天程序
2013/06/18 PHP
PHP多进程编程实例详解
2017/07/19 PHP
php实现获取近几日、月时间示例
2019/07/06 PHP
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
关于JavaScript的面向对象和继承有利新手学习
2013/01/11 Javascript
Javascript解析URL方法详解
2014/12/05 Javascript
JQuery中ajax方法访问web服务实例
2015/07/18 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
Nodejs下用submit提交表单提示cannot post错误的解决方法
2016/11/21 NodeJs
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
JS div匀速移动动画与变速移动动画代码实例
2019/03/26 Javascript
vue中node_modules中第三方模块的修改使用详解
2019/05/31 Javascript
js实现烟花特效
2020/03/02 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
2020/07/20 Javascript
详解微信小程序动画Animation执行过程
2020/09/23 Javascript
Python中List.index()方法的使用教程
2015/05/20 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python MD5加密实例详解
2017/08/02 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
python openpyxl使用方法详解
2019/07/18 Python
python的re模块使用方法详解
2019/07/26 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
Python安装OpenCV的示例代码
2020/03/05 Python
科颜氏法国官网:Kiehl’s法国
2019/08/20 全球购物
同步和异步有何异同,在什么情况下分别使用他们?
2012/12/28 面试题
应届毕业生专业个人求职自荐信格式
2013/11/20 职场文书
培训讲师岗位职责
2014/04/13 职场文书
关于环保的建议书
2014/05/12 职场文书
领导班子四风表现材料
2014/08/23 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
六查六看自检自查剖析材料
2014/10/14 职场文书