jQuery分页插件
分页插件下载地址和使用案例:http://www.jq22.com/yanshi5697
效果图:
缺点:插件没有自带每页显示多少条的设置,如果有此需求可自己设置input下拉框 然后把下拉框中选中的参数传入插件中即可
html页面:
<div style="text-align:center"><div class="M-Pages m-style" style="margin: 10px auto;" ></div></div>
js代码:
function getParamList() {var paramTypeId = getRequest("paramTypeId");var idSite = getRequest("idSite");//站点id$("#siteId").val(idSite);$("#paramTypeId").val(paramTypeId);var PrmPageNo = $("#PrmPageNo").val();var paramCode = $("#searchParam").val();var PrmItemsPerPage = $("#PrmItemsPerPage").val();layer.load(2,{shade:[0.5,'#fff']});$.ajax({url: baseUrl+'/sysParam/paramList.thtml',type: 'post',data:{"paramTypeId":paramTypeId,"PrmItemsPerPage":PrmItemsPerPage,"PrmPageNo":PrmPageNo,"siteId":idSite,"paramCode":paramCode,},success: function(data) {layer.closeAll('loading');if (data.code=='0') {var paramList = data.paramList;//先清空数据$("#tbody").html("");for(var i=0;i<paramList.length;i++){var param = paramList[i];var OTr = $("<tr></tr>");//将tr放在tbody里面$("#tbody").append(OTr);var otdBox = $("<td class=\"column\" style=\"width:150px;text-align:left\"></td>")otdBox.html("<div class=\"col s12 m6\">\n" +"<div class=\"checkbox \">\n" +"<input type=\"checkbox\" id=\"a"+i+"\" name=\"ids\" class=\"ng-pristine ng-untouched ng-valid ng-empty\" value=\""+param.paramId+"\">\n" +"<label for=\"a"+i+"\" class=\"ng-binding\"></label>\n" +"</div> \n" +"</div> ")var Otd1 = $("<td class=\"column\"></td>");Otd1.html(param.paramCode);var Otd2 = $("<td class=\"column\"></td>");Otd2.html(param.paramValue);var Otd3 = $("<td class=\"column\"></td>");Otd3.html(param.createTime.substring(0,10));//将td放在tr下面OTr.html(otdBox)OTr.append(Otd1);OTr.append(Otd2);OTr.append(Otd3);}//设置分页数据var page = data.page;var current = page.pageNo;var total = page.totalPage;$('.M-Pages').pagination({pageCount:total,//总页数current:current,jump: true,//是否开启跳转到指定页数,值为boolean类型coping: true,//是否开启首页和末页,值为booleanhomePage: '首页',endPage: '末页',prevContent: '上页',nextContent: '下页',callback: function (api) {//回调函数$("#PrmPageNo").val(api.getCurrent());getParamList();}});}else{$("#tbody").html("<div class='pk-emptyDataTable' style='text-align: center'>此报表沒有数据。</div>");$('.dataTableFeatures').hide();}}});}
完整调用代码
转载于:https://www.cnblogs.com/lxk233/p/10232777.html
jQuery分页插件相关推荐
- java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据
2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...
- java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
- jQuery 分页插件 jPages 使用
2019独角兽企业重金招聘Python工程师标准>>> jQuery 分页插件 jPage实现了javascript分页.操作很傻瓜,在此记录一下. 使用方式如下: 1.引入头文件( ...
- 很强大的一个jquery分页插件
jQuery.page.js //分页插件 /** ch **/ (function($){var ms = {init:function(obj,args){return (function(){m ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <link re ...
- jQueryPager(JQuery分页插件pagination实现Ajax分页)
jQueryPager(JQuery分页插件pagination实现Ajax分页) 下载地址 jQueryPager(JQuery分页插件pagination实现Ajax分页).rar 转载于:htt ...
- 高仿淘宝分页:jQuery分页插件kkpager-Array-专题视频课程
高仿淘宝分页:jQuery分页插件kkpager-503人已学习 课程介绍 天底下万能的分页 课程收益 让所有人不再为分页所苦恼 讲师介绍 Array 更多讲师课程 ...
- jquery分页插件-sPage.js使用方法
git地址:https://github.com/jvbei/sPage 这是一个非常小巧灵活的插件,默认效果也挺好看的.如下: 代码如下: jquery分页插件 1,引入样式文件,可以根据实际需要修 ...
- jquery php 分页插件,jQuery 分页插件代码
jQuery 分页插件代码 js代码 var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总 ...
最新文章
- MySQL优化篇:SHOW语法
- 对用户信息的模糊查找java_java中对SQL模糊查询通配符%的处理
- linux的iso镜像机没有redis,在Linux系统上安装Redis【避坑篇】
- 如何设置MySQL的时区?
- python3 修改字符串的四种方法 错误 'str' object does not support item assignment 解决方法
- 全球及中国水彩调色板行业销售前景与投资商机研究报告2022版
- ELK(ElasticSearch+Logstash+ Kibana)搭建实时日志分析平台
- 图书馆管理系统怎么做_亚马逊erp管理系统有免费的吗?亚马逊erp管理系统怎么免费做...
- Centos7制作局域网http的yum源
- 轻量级开源内容管理系统-YzmCMS v6.0源码
- python: numpy--函数 shape用法
- Django视图层:Django便捷函数,render()函数返回HttpResponse对象,redirect()函数返回HttpResponseRedirect指向传递参数的URL
- 20200217:下一个排列(leetcode31)
- Ansible详解(一)——Ansible理论基础
- Linux不能识别usbasp,USBasp制作资料及全过程(菜鸟版)
- 进销存系统测试实战-功能测试
- 51单片机用HS0038B读取遥控按键码
- 永久免费使用免费20G空间的推荐
- PaddleHub创意作品 -无价之姐之三十而已
- BZOJ 1951 古代猪文 鲁卡斯定理+费马小定理+中国剩余定理