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

/**
*
* @param switchPage方法,切换页码方法
*
* function switchPage(pageNum){
$("input[name='pageNum']").val(pageNum);
$("#blgTable tr:gt(0)").remove();
getLuoJiaoDianResult(); }
*
* @getResult() 获取结果集方法
*
* function getLuoJiaoDianResult(){
var dat=serializeObject("#dizhi");
$.post("${BASE_PATH}dz/list",dat,function(data){
$("#blgTable tr:gt(0)").remove();
var option="";
if(data.list.length==0){
option+="<tr><td colspan='6'> 没有符合条件的查询结果!</td></tr>" }else{
$(data.list).each(function(i){
if(this.fenquzhihuibu==null){
this.fenquzhihuibu="";
}
if(this.paichusuo==null){
this.paichusuo="";
} if(i%2==0){
option+="<tr style='background:rgb(243, 248, 251)'>";
}else{
option+="<tr style='background:rgb(226, 237, 247)'>";
}
option+="<td>"+this.xingming+"</td><td>"+
this.shenfenzheng+"</td><td>"+this.dizhi+"</td><td> "+
this.fenquzhihuibu+" </td><td>"+this.paichusuo+"</td><td><a onclick=selectPersonInfo('"+this.personid+"') >详情</a></td></tr>"; });
}
pageInfoBar(data,"pagebar");
$("#blgTable").append(option); },"json");
}
*
*
*
* 获取分页导航条
* @param pageInfo
* @param barDivId
*/
function pageInfoBar(pageInfo, barDivId) {
var barDiv = $("#" + barDivId);
var context = "<span>当前页:" + pageInfo.pageNum + "&nbsp;总页数:"
+ pageInfo.pages + "&nbsp;&nbsp;总记录数:"+pageInfo.total+"</span>";
context += "<div class='query-content-page-btn'><ul>";
if (pageInfo.pageNum > 1) {
context += "<li class='prev-next' onclick=switchPage('"
+ pageInfo.prePage + "')>上一页</li>";
}
for (var i = 0; i < pageInfo.navigatepageNums.length; i++) {
if (pageInfo.pageNum == pageInfo.navigatepageNums[i]) {
context += "<li class='query-content-page-cur' onclick=switchPage('"
+ pageInfo.navigatepageNums[i]
+ "')>"
+ pageInfo.navigatepageNums[i] + "</li>"
} else {
context += "<li onclick=switchPage('"
+ pageInfo.navigatepageNums[i] + "')>"
+ pageInfo.navigatepageNums[i] + "</li>"
} } if (pageInfo.pageNum < pageInfo.pages) {
context += "<li class='bus-border-right prev-next' onclick=switchPage('"
+ pageInfo.nextPage + "')>下一页</li>";
}
context += "</ul></div>";
barDiv.html(context);
}

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. 有关html5的history api

    从Ajax翻页的问题说起 请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论.正当你想要停下滚轮细看的时候,手残按到了F5.然后,页面刷新了,评论又回到了第一页 ...

  2. Intellij Idea创建Android项目

    创建工程前请已下载安装好了Intellij Idea和Android SDK. Intellij idea 2016.3.2 步骤 Android SDK设置 在FIle –> Other Se ...

  3. Java基本语法之动手动脑

    1.枚举类型 运行EnumTest.java 运行结果:false,false,true,SMALL,MEDIUM,LARGE 结论:枚举类型是引用类型,枚举不属于原始数据类型,它的每个具体值都引用一 ...

  4. Aspose.Words二 基础

    1.目录样式 doc.Styles[Aspose.Words.StyleIdentifier.Toc1].Font.Size = 14; doc.Styles[Aspose.Words.StyleId ...

  5. 汇编中CMP的作用

    假设现在AX寄存器中的数是0002H,BX寄存器中的数是0003H.执行的指令是:CMP  AX,  BX 执行这条指令时,先做用AX中的数减去BX中的数的减法运算.列出二进制运算式子:      0 ...

  6. Python知识

    1   注释 单行注释:#  内容 多行注释:A   """                   ''' 内容            或    内容 "&quo ...

  7. BZOJ 2733 [HNOI2012]永无乡 - 启发式合并主席树

    Description 1: 查询一个集合内的K大值 2: 合并两个集合 Solution 启发式合并主席树板子 Code #include<cstdio> #include<cst ...

  8. C++11与Unicode及使用标准库进行UTF-8、UTF-16、UCS2、UCS4/UTF-32编码转换

    zt https://blog.poxiao.me/p/unicode-character-encoding-conversion-in-cpp11/ Unicode Unicode是计算机领域的一项 ...

  9. Sliding Window Maximum LT239

    Given an array nums, there is a sliding window of size k which is moving from the very left of the a ...

  10. Django 文章标签功能

    使用第三方框架django-taggit为模型添加标签功能,此模块是一个可复用的应用 首先安装 https://github.com/alex/django-taggit 这是项目主页 pip ins ...