kkpager的改进,Ajax数据变化但是页码不变的问题
kkpager 是一个简单分页展示插件,需要依赖jquery。
下载地址:http://www.oschina.net/action/project/go?id=29450&p=download
官方文档地址:https://github.com/pgkk/kkpager

在线测试链接: 
蓝色皮肤:http://pgkk.github.io/kkpager/example/pager_test.html 
橘色皮肤:http://pgkk.github.io/kkpager/example/pager_test_orange_color.html

click模式:http://pgkk.github.io/kkpager/example/pager_test_clickmode.html

存在的问题:

在用ajax刷新动态转入页码,无论如何更改页码,都是显示第一次的页码

解决办法.

修改js文件

调用

这个方法是网上的办法,可能有的朋友第二步没找到,我写一下我的版本

kkpager.generPageHtml({
pno: pageNo,
//总页码
total: totalPage,
//总数据条数
totalRecords: totalRecords,
mode: 'click',//默认值是link,可选link或者click
click: function (n) {
this.selectPage(n);
LoadWorkitem(n);
return false;
},
getHref: function (n) {
return '#';
}
},true);

在这段代码中,generPageHtml最后加上了true,是为了重新加载config配置

以上方法 可以修改 页码,但是 点击页码时,页数又会变动

可做如下修改:

kkpager的用法。

但是在调用动态数据的时候发现两个问题

1.Ajax数据变化但是页码不变的问题,方法来自网上

2.按查询条件重新生成数据和分页,点击分页事件后totalpage 和totalrecord 和没加条件查询的数据一样。

主要原因是因为客户端不会帮你保留总页码数和总条数,

所以在按查询条件重新生成数据时,用hidden按钮绑定你的总页数和总条数

下面是ajax 调用后台数据,返回的总页数和总条数,都存放在hidden里了

 $.ajax({
type: "get",
dataType: "json",
url: urlStr2,
success: totalOnsuccess
}); //根据返回的total 加载数据和分页
function totalOnsuccess(data) {
var resInfoArray = eval(data); totalRecords = resInfoArray[0].TOTAL; totalPage = Math.ceil(totalRecords / pageSize); //向上取整
$("#totalpages").val(totalPage); //绑定获取的总页数
$("#totalRecords").val(totalRecords);//绑定获取的总条数 if (!pageNo) {
pageNo = 1;
}
if (totalRecords > 0) { FkeepPage(pageNo, totalPage, totalRecords); //调用分页插件
}
else {
$("#kkpager").html("<div style=‘text-align:center‘>没有符合条件的数据</div>") }
queryInfoTable(tablename, pageSize, pageNo, where); //加载表格数据 }
/*
pageNo:当前页
totalPage:总页数
totalRecords:总条数
*/
function FkeepPage(pageNo, totalPage, totalRecords) { //生成分页
//有些参数是可选的,比如lang,若不传有默认值
kkpager.generPageHtml({
pno: pageNo,
//总页码
total: totalPage,
//总数据条数
totalRecords: totalRecords,
mode: ‘click‘,//默认值是link,可选link或者click
click: function (n) { // do something
// this.selectPage(n); //默认的,因为不能符合我的要求改成下面的 this.selectPage(n, $("#totalpages").val(), $("#totalRecords").val());
            queryInfoTable(tablename, pageSize, n, where); //加载表格数据
return false;
}
/*
,lang : {
firstPageText : ‘首页‘,
firstPageTipText : ‘首页‘,
lastPageText : ‘尾页‘,
lastPageTipText : ‘尾页‘,
prePageText : ‘上一页‘,
prePageTipText : ‘上一页‘,
nextPageText : ‘下一页‘,
nextPageTipText : ‘下一页‘,
totalPageBeforeText : ‘共‘,
totalPageAfterText : ‘页‘,
currPageBeforeText : ‘当前第‘,
currPageAfterText : ‘页‘,
totalInfoSplitStr : ‘/‘,
totalRecordsBeforeText : ‘共‘,
totalRecordsAfterText : ‘条数据‘,
gopageBeforeText : ‘&nbsp;转到‘,
gopageButtonOkText : ‘确定‘,
gopageAfterText : ‘页‘,
buttonTipBeforeText : ‘第‘,
buttonTipAfterText : ‘页‘
}*/
},true);//加true 默认没有,因为页码数不更新,所以加上了
}

后面的是修改kkpager.js

主要就是把里面的

//不刷新页面直接手动调用选中某一页码
selectPage: function (n) {
this.generPageHtml(this._config,true);
},

  

改成

//不刷新页面直接手动调用选中某一页码
selectPage: function (n, b, c) {
this._config[‘pno‘] = n;
this._config[‘total‘] = b;
this._config[‘totalRecords‘] = c;
this.generPageHtml(this._config,true);
},

参考:http://www.myexception.cn/ajax/1910086.html

http://www.bubuko.com/infodetail-1906367.html

kkpager的改进,Ajax数据变化但是页码不变的有关问题的更多相关文章

  1. kkpager的改进,Ajax数据变化但是页码不变的问题,kkpagerajax

    最近做项目用到了kkpager来做分页,在一个页面只是调用一次的时候不会出现问题,但是在一个页面多次调用就出现问题了. 在网上搜集了好久,终于找到了解决方法,记录下来方便以后使用.希望也可以方便需要的 ...

  2. kkpager的改进,Ajax数据变化但是页码不变的问题

    原文:http://blog.csdn.net/xiaojian1018/article/details/45564051 kkpager 是一个简单分页展示插件,需要依赖jquery.下载地址:ht ...

  3. 计算属性 vs 侦听属性 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的

    https://cn.vuejs.org/v2/guide/computed.html#基础例子 计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属 ...

  4. thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么)

    thinkphp5如何使用ajax(变化的核心,也就是ajax作用的核心是什么) 一.总结 一句话总结:ajax的核心在于页面的不刷新而获取后台数据,所以后台的操作还是一样(获取参数,返回数据),只是 ...

  5. flask+sqlite3+echarts2+ajax数据可视化报错:UnicodeDecodeError: 'utf8' codec can't decode byte解决方法

    flask+sqlite3+echarts2+ajax数据可视化报错: UnicodeDecodeError: 'utf8' codec can't decode byte 解决方法: 将 py文件和 ...

  6. .Net客户端监听ZooKeeper节点数据变化

    一个很简单的例子,用途是监听zookeeper中某个节点数据的变化,具体请参见代码中的注释 using System; using System.Collections.Generic; using ...

  7. $scope.$watch()——监听数据变化

    $scope.$watch(watchFn, watchAction, [deepWatch]):监听数据变化,三个参数 --watchFn:监听的对象,一个带有Angular 表达式或者函数的字符串 ...

  8. Ajax --- 数据请求

    下面主要介绍(JS原生)数据请求的主要步骤: Ajax 数据请求步骤: 1.创建XMLHttpRequest对象 2.准备数据发送 3.执行发送 4.指定回掉函数 第一步:创建XMLHttpReque ...

  9. ZooKeeper 笔记(2) 监听数据变化

    ZK中的每个节点都可以存储一些轻量级的数据,这些数据的变化会同步到集群中的其它机器.在应用中程序员可以添加watcher来监听这些数据的变化,watcher只会触发一次,所以触发过后想要继续监听,必须 ...

随机推荐

  1. Linux-非结构化数据同步-Linux下Rsync+Rsync实现非结构化增量差异数据的同步2

    说明: 操作系统:CentOS 5.X 源服务器:192.168.21.129 目标服务器:192.168.21.127,192.168.21.128 目的:把源服务器上/home/www.osyun ...

  2. openstack rpc机制

    一.概述: 在openstack项目中,api的调用规则: 跨项目:如nova调用keystone, glance,cinder等,使用rest api(通过相应的python-XXXclient 库 ...

  3. SQL数据缓存依赖总结

    以前只听过SQL server数据缓存依赖,但一直没使用,由于项目需要,才研究了一番,发现了一个很诡异的问题,竟然是一个操作顺序问题导致的. SQL server数据缓存依赖有两种实现模式,轮询模式, ...

  4. 【Spring】SpringMVC中浅析数据的传递方式

    包括了基本数据类型的传递和 Date数据类型的传递.关于SpringMVC的配置可以参见基于注解实现SpringMVC+MySQL 假设有表单页面如下: <h1>登录</h1> ...

  5. cucumber java从入门到精通(3)简单实现及断言

    cucumber java从入门到精通(3)简单实现及断言 上一节里我们定义了step的java代码实现文件,step就是测试步骤及断言的集合,我们先定义出来,以后可以驱动开发以及在持续集成时重用. ...

  6. Linux版迅雷(Xware)安装配置方法

    Linux版迅雷下载请见:Xware下载 解压下载的压缩包 核对MD5或SHA1校验值 解压得到以下三个文件 安装文件 在/usr/local/下创建thunder文件夹,将上面的三个文件放入,然后运 ...

  7. django -- 用包来组织数据库模型

    默认情况下一个django app的所有模型都保存在一个叫models.py的文件中.这样事实是不方便管理的: 通过包来组织模型是比较方便的. 一.第一步:删除models.py: rm -rf mo ...

  8. 交叉验证(CrossValidation)方法思想简介[zz]

    以下简称交叉验证(Cross Validation)为CV.CV是用来验证分类器的性能一种统计分析方法,基本思想是把在某种意义下将原始数据(dataset)进行分组,一部分做为训练集(train se ...

  9. 支付接口中常用的加密解密以及验签rsa,md5,sha

    一.常用加密类型分类 1.对称加密:采用单钥对信息进行加密和解密,即同一个秘钥既可以对信息进行加密,也可以进行解密.此类型称之为对称加密.特点速度快,常用于对大量数据信息或文件加密时使用.常用例子:D ...

  10. php基础面试题:

    1:print.print_r.echo到底有什么区别? 2:get和post的区别 echo和print都可以做输出,不同的是,echo不是函数,没有返回值,而print是一个函数有返回值,所以相对 ...