jqPaginator 项目中做分页的应用技巧
最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator##
高度自定义的Html结构###
初始化引用如下:
$("#paginator").jqPaginator({
totalPages: 1,
visiblePages: 10,
totalCounts:1,
pageSize:20,
currentPage: 1,
first: '<li class="first"><a href="javascript:void(0);">首页</a></li>',
prev: '<li class="prev"><a href="javascript:void(0);">前一页</a></li>',
next: '<li class="next"><a href="javascript:void(0);">下一页</a></li>',
last: '<li class="last"><a href="javascript:void(0);">尾页</a></li>',
page: '<li class="page"><a href="javascript:void(0);">{{page}}</a></li>',
onPageChange: function (num) {
reqNum = num;
dataShow(myorgid,mysearchString,reqNum,function(){
changePaginator();
});
}
});
//初始化后,动态修改配置:
//$('#id').jqPaginator('option', options)
function changePaginator(){
$('#paginator').jqPaginator('option', {
totalPages: totalPages,
totalCounts:totalCounts,
currentPage: reqNum
});
}
当时我犯了个逻辑错误,上来先发请求,拿到 totalCounts
,以为totalPages
、totalCounts
这两个属性确实是需要从后台拿到的数据,又因为是异步请求,so 很无奈的将初始化放到了if(data.success){}
,后来才发现初始化时其实是可以随便写的,因为后面还有回调,涉及到到 增、删、改、查 的功能,都需要去调 dataShow()
来刷新页面渲染的数据,回调中计算 totalPages
即可:
//全局需要定义的变量
//fn其实就是回调的changePaginator()
dataShow = function(orgid,searchString,reqNum,fn){
if(!reqNum){
reqNum = 1;
}
//发送请求,获取数据
$.NstsGET(URl, {orgId:orgid,search:searchString,Limit:20,PageNo:reqNum}, function (data) {
if (data.total == 0) {
totalCounts = 1;
totalPages = 1;
}
if (data.success){
//渲染数据操作
}
if(fn){
fn();
}
});
}
具体的api文档可以参考这里#####
jqPaginator 项目中做分页的应用技巧的更多相关文章
- simple高度自定义的jqPaginator 项目中做分页的应用技巧
最近做后台管理系统,分页用到的不少,项目中其实已经有分页功能的组件但是不够高度自定义,于是就找到了 jqPaginator 高度自定义的Html结构 初始化引用如下: $("#paginat ...
- MVC项目中的分页实现例子
在开发项目中,写了一个分页实现的例子,现在把源代码贴上,以供以后写代码时参考 在列表的头部,有如下显示, 这个代表一个页面显示10条记录,总共22条记录. 这个是页面底部的显示 那么如何来显示这个分页 ...
- Python+Selenium进行UI自动化测试项目中,常用的小技巧1:读取excel表,转化成字典(dict)输出
从今天开始我将会把在项目中遇到的问题,以及常用的一些技巧来分享出来,以此来促进自己的学习和提升自己:更加方便我以后的查阅. 现在要说的是:用Python来读取excel表的数据,返回字典(dict), ...
- 项目中DataTables分页插件的使用
在项目开发的过程中,一般都会对表格进行分页处理,大多是情况下会在项目中配置好后台分页插件,提高效率,减轻浏览器的压力.但是有时会遇到有些数据不能直接通过分页插件操作数据库进行分页数据查询,那就需要用到 ...
- Python+Selenium进行UI自动化测试项目中,常用的小技巧4:日志打印,longging模块(控制台和文件同时输出)
在前段时间,为了给项目中加入日志功能,就想到了 logging 模块,百度logging一大推,都是各种复制的,并没有找到自己想要的结果:我的目的很简单,就是:在把日志写入文件的同时在控制台输出,更加 ...
- Python+Selenium进行UI自动化测试项目中,常用的小技巧3:写入excel表(python,xlsxwriter)
我们在项目中可能用到excel表生成,下面的代码就是对excel表的操作: import xlsxwriter import datetime class write_excel(): def __i ...
- Python+Selenium进行UI自动化测试项目中,常用的小技巧2:读取配置文件(configparser,.ini文件)
在自动化测试项目中,可能会碰到一些经常使用的但 很少变化的配置信息,下面就来介绍使用configparser来读取配置信息config.ini 读取的信息(config.ini)如下: [config ...
- 在SSH项目中实现分页效果
在实现分页的时候,我使用的是数据库下面的User表,实现的效果是通过分页查询 能够将表中的数据分页显示,点击相关的按钮实现:首页.上一页.下一页.末页的显示 1新建一个dynamic web proj ...
- 在vue+elementUI项目中使用分页功能
HTML: <div class="mRttt"> <!-- 分页 --> <el-pagination ...
随机推荐
- pacejs进度条监控服务端数据加载是否完毕
记得刚刚入职新公司的时候,公司在做app里面的h5页面.跟之前公司的流程不太一样.之前都是写完静态页面后通过ajax加载接口数据,这公司省事了,写完静态页面直接扔给服务端,他们来填数据,确实给前端省事 ...
- vue2.0自定义指令的使用方法
感觉2.0好坑啊,自定义指令和1.0完全不一样,并且文档写得也不太清晰,下面是我写得一个demo,希望帮助大家更好地理解自定义指令 <!DOCTYPE html> <html lan ...
- js获取url中的参数方法
直接调用函数即可,函数如下: function getURLParam(name) { return decodeURIComponent((new RegExp('[?|&]' + name ...
- IOS开发创建开发证书及发布App应用(七)——在iTunes创建填写应用基本信息
7.在iTunes创建填写应用基本信息 依旧打开苹果的开发者网站 https://developer.apple.com/ 点击Member,如下图 (注意,下面的图示是登录之后的) 点击iTunes ...
- 什么是node.js
1.0什么是nodejs 1.1定义: Node.js是Javascript除了浏览器之外可以运行的另一个环境(runtime).可以为我们提供开启服务功能和提供文件读写功能 1.2特点: 1)基于g ...
- Linux shell指令运行的原理
shell是一种命令行解释器 对于一般用户,我们不能直接使用操作系统(kernel).而是通过 kernel的"外壳"程序,也就是所谓的shell,来与kernel沟通. 为 ...
- Java--JDBC连接数据库
我们知道Java中的jdbc是用来连接应用程序和数据系统的,本篇文章主要就来看看关于JDBC的实现和使用细节.主要包含以下几点内容: JDBC的基本知识(数据驱动程序) JDBC的连接配置 ...
- 7.Redis常用命令:ZSet
Sorted-Sets和Sets类型极为相似,它们都是字符串的集合,都不允许重复的成员出现在一个Set中.它们之间的主要差别是Sorted-Sets中的每一个成员都会有一个分数(score)与之关联, ...
- Grafana中多租户设置
Grafana中通过设置不同的组织,以及将用户分配到不同组织,来做到多租户,类似门户的概念. Grafana默认是不允许非管理员用户创建新的组织的,这个可以通过修改配置文件以允许非管理员用户创建组织: ...
- hdu 2516 取石子游戏 (斐波那契博弈)
题意:1堆石子有n个,两人轮流取.先取者第1次可以取任意多个,但不能全部取完.以后每次取的石子数不能超过上次取子数的2倍. 取完者胜,先取者负输出"Second win",先取者胜 ...