在使用mybatis3,并且使用分页,PageHelper 接口,分页还是很好使用的。使用pageInfo的后台分页接口。

  1. /**
  2. *
  3. * @param switchPage方法,切换页码方法
  4. *
  5. * function switchPage(pageNum){
  6. $("input[name='pageNum']").val(pageNum);
  7. $("#blgTable tr:gt(0)").remove();
  8. getLuoJiaoDianResult();
  9.  
  10. }
  11. *
  12. * @getResult() 获取结果集方法
  13. *
  14. * function getLuoJiaoDianResult(){
  15. var dat=serializeObject("#dizhi");
  16. $.post("${BASE_PATH}dz/list",dat,function(data){
  17. $("#blgTable tr:gt(0)").remove();
  18. var option="";
  19. if(data.list.length==0){
  20. option+="<tr><td colspan='6'> 没有符合条件的查询结果!</td></tr>"
  21.  
  22. }else{
  23. $(data.list).each(function(i){
  24. if(this.fenquzhihuibu==null){
  25. this.fenquzhihuibu="";
  26. }
  27. if(this.paichusuo==null){
  28. this.paichusuo="";
  29. }
  30.  
  31. if(i%2==0){
  32. option+="<tr style='background:rgb(243, 248, 251)'>";
  33. }else{
  34. option+="<tr style='background:rgb(226, 237, 247)'>";
  35. }
  36. option+="<td>"+this.xingming+"</td><td>"+
  37. this.shenfenzheng+"</td><td>"+this.dizhi+"</td><td> "+
  38. this.fenquzhihuibu+" </td><td>"+this.paichusuo+"</td><td><a onclick=selectPersonInfo('"+this.personid+"') >详情</a></td></tr>";
  39.  
  40. });
  41. }
  42. pageInfoBar(data,"pagebar");
  43. $("#blgTable").append(option);
  44.  
  45. },"json");
  46. }
  47. *
  48. *
  49. *
  50. * 获取分页导航条
  51. * @param pageInfo
  52. * @param barDivId
  53. */
  54. function pageInfoBar(pageInfo, barDivId) {
  55. var barDiv = $("#" + barDivId);
  56. var context = "<span>当前页:" + pageInfo.pageNum + "&nbsp;总页数:"
  57. + pageInfo.pages + "&nbsp;&nbsp;总记录数:"+pageInfo.total+"</span>";
  58. context += "<div class='query-content-page-btn'><ul>";
  59. if (pageInfo.pageNum > 1) {
  60. context += "<li class='prev-next' onclick=switchPage('"
  61. + pageInfo.prePage + "')>上一页</li>";
  62. }
  63. for (var i = 0; i < pageInfo.navigatepageNums.length; i++) {
  64. if (pageInfo.pageNum == pageInfo.navigatepageNums[i]) {
  65. context += "<li class='query-content-page-cur' onclick=switchPage('"
  66. + pageInfo.navigatepageNums[i]
  67. + "')>"
  68. + pageInfo.navigatepageNums[i] + "</li>"
  69. } else {
  70. context += "<li onclick=switchPage('"
  71. + pageInfo.navigatepageNums[i] + "')>"
  72. + pageInfo.navigatepageNums[i] + "</li>"
  73. }
  74.  
  75. }
  76.  
  77. if (pageInfo.pageNum < pageInfo.pages) {
  78. context += "<li class='bus-border-right prev-next' onclick=switchPage('"
  79. + pageInfo.nextPage + "')>下一页</li>";
  80. }
  81. context += "</ul></div>";
  82. barDiv.html(context);
  83. }

PageInfo 前台分页js,带分页栏的更多相关文章

  1. js得到分页栏

    自己写的,感觉返回html代码蠢蠢的,但是新手并不知道怎么写更好的,感觉这样子也蛮简单.记录下来,以后来越改越好. //获得分页栏.注意indexSize为奇数,这样也比较好看 //totalNum: ...

  2. JS-网页中分页栏

    原理 三部分 我给分页栏分成了3部分 上一页:调用prePage()函数 下一页:调用nextPage()函数 带有数字标识的部,调用skipPage()函数 prePage函数 function p ...

  3. js 带省略号的分页源码及应用实例

    一.js:pagination.js /*--说明分页div id为:changpage*/var eachPageDataNum = 10;//每页显示记录数var nowPage = 1;//当前 ...

  4. 单篇文章JS模拟分页

    废话部分 前两天做了一个前台分页插件,支持ajax读取数据绑定前台 和 url带页码参数跳转两种方式.于是稍加改动,做了一个单篇文章js模拟分页的代码,为什么说是模拟分页呢?因为在服务器响应HTML请 ...

  5. EasyUI的DataGrid 分页栏英文改中文解决方案

    (一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最 ...

  6. Mvc 分页栏扩展方法

    using System; using System.Collections.Generic; using System.Reflection; using System.Text; using Sy ...

  7. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  8. “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成)

    “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第六篇(图片新闻的添加以及带分页的静态页的生成) 一.这篇文章主要是要实现:图片新闻的添加,无刷新图片的上传,以及添加新闻静 ...

  9. Spring统一返回Json工具类,带分页信息

    前言: 项目做前后端分离时,我们会经常提供Json数据给前端,如果有一个统一的Json格式返回工具类,那么将大大提高开发效率和减低沟通成本. 此Json响应工具类,支持带分页信息,支持泛型,支持Htt ...

随机推荐

  1. 月饼问题PAT B1020(贪心算法)

    月饼是中国人在中秋佳节时吃的一种传统食品,不同地区有许多不同风味的月饼.现给定所有种类月饼的库存量.总售价.以及市场的最大需求量,请你计算可以获得的最大收益是多少. 注意:销售时允许取出一部分库存.样 ...

  2. Linux系统下重启Tomcat

    在Linux系统下,重启Tomcat使用命令操作的! 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看 ...

  3. Java项目生成可执行jar包、exe文件以及在Windows下的安装文件

    1.如何通过eclipse将Java项目生成可执行jar包 首先把在eclipse下的java项目导出jar file 下一步 下一步 下一步 最后点击完成,便生成了可执行的jar文件.可以在刚刚选择 ...

  4. 配置go语言编辑环境 - goland

    快捷键: 移动行 Alt + Shift + up/down 行内(选中)移动(到头尾/删除) Ctrl(Shift) + left/rignt(Home/End/Backspace) 插入新行 Sh ...

  5. Windows删除服务方法

  6. c++中“箭头(->)”和“点号(.)”操作符的区别

    首先介绍一下C++中的结构.对于一个结构: struct MyStruct { int member_a; }; 如果有个变量MyStruct s,那么使用其中的成员元素时可以用: s.member_ ...

  7. 5J - 复习时间

    为了能过个好年,xhd开始复习了,于是每天晚上背着书往教室跑.xhd复习有个习惯,在复习完一门课后,他总是挑一门更简单的课进行复习,而他复习这门课的效率为两门课的难度差的平方,而复习第一门课的效率为1 ...

  8. L1-027 出租(20)(STL-map代码)

    L1-027 出租(20 分) 下面是新浪微博上曾经很火的一张图: 一时间网上一片求救声,急问这个怎么破.其实这段代码很简单,index数组就是arr数组的下标,index[0]=2 对应 arr[2 ...

  9. andorid 列表视图 ListView 之BaseAdapter

    .xml <?xml version="1.0" encoding="utf-8"?> <ListView xmlns:android=&qu ...

  10. kvm介绍 转载

    KVM 介绍(1):简介及安装 学习 KVM 的系列文章: (1)介绍和安装 (2)CPU 和 内存虚拟化 (3)I/O QEMU 全虚拟化和准虚拟化(Para-virtulizaiton) (4)I ...