
使用步骤
1、引入以下的js和css文件
<link rel="stylesheet" type="text/css" href="css/jquery.jui_pagination.css">
<link rel="stylesheet" type="text/css" href="themes/dot-luv/jquery-ui.css">
<!-- CUSTOM CLASSES -->
<link rel="stylesheet" href="css/index.css">
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<!-- IF TOUCH EVENT SUPPORT IS NEEDED (MOBILE DEVICES) -->
<script type="text/javascript" src="js/jquery.ui.touch-punch.min.js"></script>
<script type="text/javascript" src="js/jquery.jui_pagination.min.js"></script>
<script type="text/javascript" src="localization/en.js"></script>
2、在head标签中加入以下js代码
<script type="text/javascript">
$(function () {
$("#demo_pag1").jui_pagination({
currentPage: 8,
visiblePageLinks: 5,
totalPages: 103,
containerClass: 'container1',
useSlider: true,
sliderInsidePane: true,
sliderClass: 'slider1',
disableSelectionNavPane: true,
navRowsPerPageClass: 'rows-per-page1 ui-state-default ui-corner-all',
navGoToPageClass: 'goto-page1 ui-state-default ui-corner-all',
onChangePage: function (event, page_num) {
if (isNaN(page_num) || page_num <= 0) {
alert('Invalid page' + ' (' + page_num + ')');
} else {
$("#result").html('Page changed to: ' + page_num);
}
},
onSetRowsPerPage: function (event, rpp) {
if (isNaN(rpp) || rpp <= 0) {
alert('Invalid rows per page' + ' (' + rpp + ')');
} else {
alert('rows per page successfully changed' + ' (' + rpp + ')');
$(this).jui_pagination({
rowsPerPage: rpp
})
}
},
onDisplay: function () {
var showRowsInfo = $(this).jui_pagination('getOption', 'showRowsInfo');
if (showRowsInfo) {
var prefix = $(this).jui_pagination('getOption', 'nav_rows_info_id_prefix');
$("#" + prefix + $(this).attr("id")).text('Total rows: XXX');
}
}
});
$("#result").html('Current page is: ' + $("#demo_pag1").jui_pagination('getOption', 'currentPage'));
});
</script>
搜索发现
-
1
-
2
-
3
- 4 jQuery nav导航(原创)
- 5 轮菜单
- 6 简易使用的导航栏
- 7 类似于Jquery的JS下拉菜单
- 8 jQuery树形组件(原创)
- 9 仿今日头条App顶部导航点击可居中(优化版)
- 10 jQuery仿flash导航代码
- 11 paging 分页插件
- 12 简易的动态生成表格和分页效果(原创)
- 13 jQuery分页插件jQuery.pager.js
- 14 css3回转菜单
- 15 jQuery水平方向菜单导航条 滑块伴随鼠标移动(原创)
-
1
仿浏览器主页搜索(原创)10550
-
2
angularjs日期选择插件10470
-
3
vue2.0实现全选,全不选。10462
- 4 jQuery QWERTY软键盘插件Virtual Keyboard
- 5 js汉字转拼音
- 6 jQuery环型进度倒计时
- 7 jquery表单验证插件form_validation.js
- 8 vue移动端优惠券模板
- 9 前端MD5加密插件md5.pro.js
- 10 jQuery多功能网页键盘插件
- 11 jQuery实现汉字转拼音的插件
- 12 jQuery拖拽插件Magnet.js
- 13 jQuery输入框数值加减调整插件
- 14 vue购物结算页面模板
- 15 jQuery倒计时插件countdown.js