分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > IT知识

jquery.pagination.js的使用

发布时间:2023-09-06 01:55责任编辑:彭小芳关键词:js

html页面

//要显示内容表格<table id="gifts"> ???????????<tr class=‘first‘> ???????????????<th>时间</th> ???????????????<th>获得奖励</th> ???????????</tr> ???????????<tr> ???????????????<td>2018-01-30 00:00:00</td> ???????????????<td>2000金币</td> ???????????</tr></table>//显示分页的 page是自己定义的样式<div class="liuyanpage page"> ?</div> ??

插件最后生成的html结构

来,开始学习使用这个插件了

1、首先引入

<script type="text/javascript" src="js/jquery-1.8.3.js"></script> ?<script type="text/javascript" src="js/jquery.pagination.js"></script> 

2、自定义插件

$(‘.liuyanpage‘).pagination({ ???????????????pageCount: Math.ceil(counts/one_page_show_nums),//counts为你要显示的数据的总条数,one_page_show_nums为你每页想要显示的条数 ???????????????coping: true, ???????????????homePage: ‘首页‘, ???????????????endPage: ‘末页‘, ???????????????prevContent: ‘上一页‘, ???????????????nextContent: ‘下一页‘, ???????????????count:2});

3、配置的参数

 ???????totalData: 0, //数据总条数 ???????showData: 0, //每页显示的条数 ???????pageCount: 9, //总页数,默认为9 ???????current: 1, //当前第几页 ???????prevCls: ‘prev‘, //上一页class ???????nextCls: ‘next‘, //下一页class ???????prevContent: ‘<‘, //上一页内容 ???????nextContent: ‘>‘, //下一页内容 ???????activeCls: ‘active‘, //当前页选中状态class名 ???????coping: false, //是否开启首页和末页,值为boolean ???????isHide: false, //当前页数为0页或者1页时不显示分页 ???????homePage: ‘‘, //首页节点内容,默认为空 ???????endPage: ‘‘, //尾页节点内容,默认为空 ???????keepShowPN: false, //是否一直显示上一页下一页 ???????count: 3, //当前页前后分页个数 ???????jump: false, //跳转到指定页数 ???????jumpIptCls: ‘jump-ipt‘, //文本框内容 ???????jumpBtnCls: ‘jump-btn‘, //跳转按钮 ???????jumpBtn: ‘跳转‘, //跳转按钮文本 ???????callback: function () { } //回调函数,参数"index"为当前页

api接口

方法参数说明
getPageCount()获取总页数
setPageCount(page)page:页数设置总页数
getCurrent()获取当前页
filling()填充数据,参数为页数

示例用法

$(function () { ???$(‘.liuyanpage‘).pagination({ ???????pageCount: <?# $counts?>/8, ???????coping: true, ???????homePage: ‘首页‘, ???????endPage: ‘末页‘, ???????prevContent: ‘上一页‘, ???????nextContent: ‘下一页‘, ???????count:2, ???????callback:PageCallback ???});//翻页function PageCallback(index, jq) { ???myapi(index);}
//请求function myapi(current) { ???$.post(url,{ ???????page:current ???},function(data){ ???????if(data.code!=0){ ???????}else{ ???????????var htm=‘‘; ???????????for(var i=0;i<data.mylist.length;i++){ ???????????????htm+=‘<tr><td>‘+data.mylist[i][‘createtime‘]+‘</td><td>‘+data.mylist[i][‘name‘]+‘</td></tr>‘ ???????????} ???????????$("#tc5 #gifts tr:not(.first)").remove(); ???????????$("#tc5 #gifts").append(htm);//将返回的数据追加到表格 ??????????} ???},‘json‘);}});

jquery.pagination.js的使用

原文地址:https://www.cnblogs.com/qiufang/p/9020145.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved