分页插件下载地址和使用案例: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分页插件相关推荐

  1. java ajax jquery分页插件_JQueryPagination分页插件,ajax从struts请求数据

    2017-07-16 学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址 插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说, ...

  2. java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程

    摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...

  3. jQuery 分页插件 jPages 使用

    2019独角兽企业重金招聘Python工程师标准>>> jQuery 分页插件 jPage实现了javascript分页.操作很傻瓜,在此记录一下. 使用方式如下: 1.引入头文件( ...

  4. 很强大的一个jquery分页插件

    jQuery.page.js //分页插件 /** ch **/ (function($){var ms = {init:function(obj,args){return (function(){m ...

  5. jquery分页插件的修改

    前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...

  6. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <link re ...

  7. jQueryPager(JQuery分页插件pagination实现Ajax分页)

    jQueryPager(JQuery分页插件pagination实现Ajax分页) 下载地址 jQueryPager(JQuery分页插件pagination实现Ajax分页).rar 转载于:htt ...

  8. 高仿淘宝分页:jQuery分页插件kkpager-Array-专题视频课程

    高仿淘宝分页:jQuery分页插件kkpager-503人已学习 课程介绍         天底下万能的分页 课程收益     让所有人不再为分页所苦恼 讲师介绍     Array 更多讲师课程   ...

  9. jquery分页插件-sPage.js使用方法

    git地址:https://github.com/jvbei/sPage 这是一个非常小巧灵活的插件,默认效果也挺好看的.如下: 代码如下: jquery分页插件 1,引入样式文件,可以根据实际需要修 ...

  10. jquery php 分页插件,jQuery 分页插件代码

    jQuery 分页插件代码 js代码 var newlist = new Vue({ el: '#app', data: { current_page: 1, //当前页 pages: 50, //总 ...

最新文章

  1. MySQL优化篇:SHOW语法
  2. 对用户信息的模糊查找java_java中对SQL模糊查询通配符%的处理
  3. linux的iso镜像机没有redis,在Linux系统上安装Redis【避坑篇】
  4. 如何设置MySQL的时区?
  5. python3 修改字符串的四种方法 错误 'str' object does not support item assignment 解决方法
  6. 全球及中国水彩调色板行业销售前景与投资商机研究报告2022版
  7. ELK(ElasticSearch+Logstash+ Kibana)搭建实时日志分析平台
  8. 图书馆管理系统怎么做_亚马逊erp管理系统有免费的吗?亚马逊erp管理系统怎么免费做...
  9. Centos7制作局域网http的yum源
  10. 轻量级开源内容管理系统-YzmCMS v6.0源码
  11. python: numpy--函数 shape用法
  12. Django视图层:Django便捷函数,render()函数返回HttpResponse对象,redirect()函数返回HttpResponseRedirect指向传递参数的URL
  13. 20200217:下一个排列(leetcode31)
  14. Ansible详解(一)——Ansible理论基础
  15. Linux不能识别usbasp,USBasp制作资料及全过程(菜鸟版)
  16. 进销存系统测试实战-功能测试
  17. 51单片机用HS0038B读取遥控按键码
  18. 永久免费使用免费20G空间的推荐
  19. PaddleHub创意作品 -无价之姐之三十而已
  20. BZOJ 1951 古代猪文 鲁卡斯定理+费马小定理+中国剩余定理

热门文章

  1. java对象工厂池_[转载]Java对象池技术的原理及其实现
  2. 计算机 课题学科代码,学科分类与代码表课题.doc
  3. stm32for循环几个机械周期_波浪理论之五:循环周期理论
  4. 控制发送的请求条数_一个 HTTP 请求的曲折经历
  5. socket自定义框架
  6. java Socket(二)
  7. 计算机cup容量有什么作用,电脑的cpu和内存条都起什么作用
  8. expect批量执行命令
  9. Hadoop之HDFS文件操作
  10. Scala入门到精通——第二十一节 类型参数(三)-协变与逆变