在使用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. swift - 3D 视图,截图,关键字搜索

    1.xib 上的 3D效果 按钮 2. import UIKit //1.导入框架 import MapKit class ViewController: UIViewController { @IB ...

  2. List<Map<String, String>>和Map<String, List<String>>遍历

    public void TestM() {     List<Map<String, String>> lm = new ArrayList<>();     Ma ...

  3. ubuntu系统ssh遇到port 22:No route to host问题

    ssh遇到这个port 22:No route to host这个问题 检查防火墙状态 (iptables -L) 检查ssh状态 (ps -elf |grep ssh) 检查网络状态(换根网线)

  4. 28- foreach里面实现一次遍历两个链表

    由于业务需求,要在一个foreach里面实现一次遍历两个链表:后台传来的是连个list:  分别是 <c:set var = "i" value = "0" ...

  5. 关于vue的npm run dev和npm run build

    ├─build │ ├─build.js │ ├─check-versions.js │ ├─dev-client.js │ ├─dev-server.js │ ├─utils.js │ ├─vue- ...

  6. docker-ce-17.09 数据卷和数据卷容器

    docker容器中管理数据两种方式:1.数据卷(Data Volumes)2.数据卷容器(Data Volume Dontainers) 一.数据卷特性:1.数据卷可以在容器之间共享和重用2.对数据卷 ...

  7. 使用RSS订阅

    1.绪论 对某一主题完成一次文献检索后,我们希望能持续了解该主题最新文献,即实现文献追踪. 为此,搜索引擎和数据库厂商(数据源)提供一般两种订阅服务:邮件和RSS.订阅后,数据源会自动推送最新信息,免 ...

  8. Phong和Blinn-Phong光照模型

    Phong和Blinn-Phong是计算镜面反射光的两种光照模型,两者仅仅有很小的不同之处. 1.Phong模型 Phone模型计算中的一个关键步骤就是反射向量R的计算: 上图中的位于表面“下面”的向 ...

  9. 文档根元素 "mapper" 必须匹配 DOCTYPE 根 "configuration"

    该问题是因为xml的头部写错了,一个是configuration,一个是mapper,不能直接复制. 参考链接:http://blog.csdn.net/testcs_dn/article/detai ...

  10. Luogu 3421 [POI2005]SKO-Knights - Exgcd

    Description 给出一个骑士的 $N$种 中行走的方式 $(a_i, b_i)$, 可以使骑士的坐标$(-a,-b)$或$(+a,+b)$. 我们需要找出 第二个骑士的 两种行走方式 $(c_ ...