该文章属于原创:更多详细说明查看:http://www.pm-road.com/index.php/2014/07/24/26/
因为web端经常会展示很多数据,如果一页下来,肯定会看的眼花缭乱,所以肯定会用到分页的方法;网上会有很多分页的方法,但像这种情况, 我都会自己去写这样方法,而不是照网上的搬过来;以下就是自己封装的一个方法,非常容易懂,也用做自己以后开发中的一个方法,代码如下(前提需要引入 JQuery.js):
/**
* 其中会传入三个参数,另外在代码中有一个方法beginPostTestResult(page),
* 该方法是需要自己写的方法,该方法的作用就是向后台发出请求,得回数据的方法;
* @param page 当前页
* @param maxPage 最大页
* @param divId 你要把这个页分的显示放在哪个div中,传入divId
*/
function initPageInfo(page,maxPage,divId){
$("#"+divId).html("");
var kongge = " ";
var firstPage = "首页";
var prePage = "上一页";
var endPage = "末页";
var nextPage = "下一页";
if(page < 1){
page = 1;
}
if(page > maxPage ){
page = maxPage ;
}
if(page == 1 && page < maxPage){
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
}
$(“#”+divId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
}
一般情况下,我都会这样去用此方法:
function beginPostTestResult(page){
$.post(url,{参数},function(data,state,response){
//TODO你的操作
//注意:参数page 都要是整形的,不能是字符型
initPageInfo
(page,maxPage,divId);
},”json”);
}
因为web端经常会展示很多数据,如果一页下来,肯定会看的眼花缭乱,所以肯定会用到分页的方法;网上会有很多分页的方法,但像这种情况, 我都会自己去写这样方法,而不是照网上的搬过来;以下就是自己封装的一个方法,非常容易懂,也用做自己以后开发中的一个方法,代码如下(前提需要引入 JQuery.js):
/**
* 其中会传入三个参数,另外在代码中有一个方法beginPostTestResult(page),
* 该方法是需要自己写的方法,该方法的作用就是向后台发出请求,得回数据的方法;
* @param page 当前页
* @param maxPage 最大页
* @param divId 你要把这个页分的显示放在哪个div中,传入divId
*/
function initPageInfo(page,maxPage,divId){
$("#"+divId).html("");
var kongge = " ";
var firstPage = "首页";
var prePage = "上一页";
var endPage = "末页";
var nextPage = "下一页";
if(page < 1){
page = 1;
}
if(page > maxPage ){
page = maxPage ;
}
if(page == 1 && page < maxPage){
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page >1 && page < maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
endPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+maxPage+”)’>末页</a>”;
nextPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page+1)+”)’>下一页</a>”;
}else if(page > 1 && page == maxPage){
firstPage = “<a href=’javascript:;’ onclick=’beginPostTestResult(1)’>首页</a>”;
prePage = “<a href=’javascript:;’ onclick=’beginPostTestResult(“+(page-1)+”)’>上一页</a>”;
}
$(“#”+divId).html(firstPage+kongge+prePage+kongge+page+kongge+nextPage+kongge+endPage);
}
一般情况下,我都会这样去用此方法:
function beginPostTestResult(page){
$.post(url,{参数},function(data,state,response){
//TODO你的操作
//注意:参数page 都要是整形的,不能是字符型
initPageInfo
(page,maxPage,divId);
},”json”);
}
相关推荐
本例子主要展示了自行封装请求参数和返回数据的用法,对后台的交互没有任何格式和命名限制。 基于Bootstrap 2.3.2,相关的其他插件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版) ...
本例子主要展示了自行封装请求参数和返回数据的用法,对后台的交互没有任何格式和命名限制。 基于Bootstrap 2.3.2,相关的其他插件包括图标控件FontAwesome、等待提示控件Spinjs(修改版)、弹窗控件lhgdialog(修改版) ...
文件page.vue为一个pc端的分页组件,基础的分页功能都有,基本的思路是,页面是用数据来展示的,那就直接操作相关数据来改变视图
主要介绍了JS基于封装函数实现的表格分页,结合完整实例形式分析了javascript针对table表格数据的遍历、读取以及模拟分页显示的相关操作技巧,需要的朋友可以参考下
b):分页一般要传递哪些数据 (总的数据数量,每页固定显示多少条数据,当点击分页时候返回当前的页码…….这三条是必须的) 第一步:先完成指令的封装 我会在 js/directives/pagedir 此文件下完成指令的编写 page...
表格和分页一体,可以选择每一页几条数据,直接ajax调取就可以使用,只需要链接一个js和一个css,在js直接调用,每一个后台需要的参数都很简单的获取,快来下载吧
基于nodejs express mongodb multer 实现的文件上传、存储、分页、管理功能,同时介绍了百度云基础班引擎mongodb部署方案。
使用vue编写的分页器组件,可设置初始页码,支持输入页码跳转
的数据不需要一个个加入js,哪怕你有1万个查询条件,你都不用怕,js中不需要 任何添加任何代码,你只需要把你的各搜索框加上 就能实现功能;偶合性非常低,通用性强;实现一个高级带条件的分页查询最多 10分钟;...
原生JS实现的分页实现的功能之前在做项目的时候需要一个表格插件展示数据,当时用的是jquery datatable这个插件,但这个插件提供的分页功能在面对大数据的时候,过于呆板不够灵活,不能适应我们项目的需求,项目中...
项目中遇到 tab切换列表,每个tab都需要分页的需求,分页流程具有相似性,于是想将分页封装为组件,方便应用。 组件的应用已写成一个小demo,效果如下图所示(数据用mock模拟): 源码可以查看:wxapp-pagination ...
使用paginate方法扩展Knex的查询生成器,这将有助于完成分页任务。 如何设置 要使用此库,首先必须安装它: npm i knex-paginate --save // or yarn add knex-paginate 然后,将以下行添加到您的Knex设置中: ...
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。 效果: 代码: 1.注册一个组件 js Vue.component('pagination',{ template:...
前端获取到数据和数据量后分别对当前页数据进行渲染和展示,同时完成分页信息区的计算和展示。 之后定义后端数据的响应格式,在Result里,然后定义分页结果集的数据格式。 * DAO层:实现分页功能都需要在对应实体的...
项目前端用bootstrap布局,采用angularjs进行客户端同服务器端进行数据交互工作,项目中用到的主要技术有angularjs路由配置,指令封装、过滤器封装、以及对模型和控制器的应用。PS:本项目采用VS2013开发,代码齐全,...
使用 LWC 的数据表 介绍 Lightning Web 组件 (LWC) 是使用 ... 在本文中,我们将专注于创建具有关键功能(如分页、行选择、静态标题和全局搜索)的通用数据表组件。 本文的源代码位于库中。 创建通用组件 首先,我们将
1、该封装的组件包含分页、反选、多选、过滤、排序、树形数据懒加载、单元格绑定事件、行绑定事件、指定行添加背景色等功能,这些功能可以自动控制是否显示; 2、控制列的显示隐藏、表格的高度根据窗口大小自动改变...
分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。 1.注册一个组件 js Vue.component('pagination',{ template:'#paginationTpl'...
分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持...
例如把数据全部读取出来在前端用javascript实现,但这样一次请求全部数据服务器压力很大, 还有就是在后端实现,每一次请求部分数据显示 分页需求: 1. 每页显示的多少条数据 2. 页面显示多少个页码 3. 上一页和...