jquery 分页控件实分页效果(1/5)

进行修改删除操作的时候能记住当前页;
3:查询后翻页的时候可以可以记住当前查询的条件

3.2实现
html

复制代码 代码如下:
<!--存储数据的容器-->
<div class="tabledata">
</div>
<!--分页控件显示-->
<div class="pagebar"></div>

jquery
为了我们的控件可以随意使用,我们将其写成插件的形式,首先搭个框架,我们将插件命名为simplepage
复制代码 代码如下:
(function($){
$.fn.simplepage=function(o){
var options={
//配置参数
};
return //sth
}
})(jquery)

默认有哪些参数呢?
由于需要发送当前页,每页显示数量,所以需要 currentpage,pagesize 两个基本参数;
由于需要查询表格内容,所以需要一个放置查询条件的表单 form;
由于需要修改删除后记住当前页,所以需要一个标志指示当前进行的是何操作type;
为了使我们的程序更具有灵活性,加上获取数据后需要加载到的container,还有就是分页控件加载的pager,
具体如下
复制代码 代码如下:
var options={
pager: '.pager',//表格控件的容器
container: '.tabledata',//放置表格数据的容器
form: '#form',//放置查询条件的表单
pageform: '#pageform',//放置隐藏与的div
url: '',//发送请求的地址
currentpage: 1,
pagesize: 2
type: null,//可选:action,
pageshow:7
}

为了便于维护,我们声明一个独立的对象来进行获取数据,绑定事件的操作,我们将这个函数命名为$.page
复制代码 代码如下:
$.page = {
//
setpage: function(o){
},
//获取当前页
getcurrentpage: function(o){
},
//获取每页显示数量
getpagesize: function(o){
},
//生成发送所需要的json数据
gendata: function(o){
},
//发送数据
loaddata: function(o){
}

首页 1 2 3 4 5 末页

时间: 2024-09-13 09:40:32

jquery 分页控件实分页效果(1/5)的相关文章

基于Bootstrap仿淘宝分页控件实现代码_javascript技巧

大家都应该上过淘宝的吧,没有上过淘宝的同学估计也没几个了,但是我相信大多数的人都是在淘宝上面买完东西就下线,很少有人会关注淘宝上的设计这类的,但是对于普通人这样还行,但是对于一个程序员这样就可不行了,因为博主本人是从事前端方面的工作,所以就通过仿照淘宝的设计样式,以求在技能上面能够有一个大的突破 一.淘宝分页控件了解 先上一张淘宝的分页图片: 根据上图中对淘宝分页控件的分析,我们大致上可以将淘宝分页控件分成两部分,一部分是核心部分,这一部分主要就是一个分页的核心功能,这个功能同时也是也是不可或缺

winform分页控件 附源码下载_C#教程

以前都是从事B/S开发,由于公司有个比较大的C/S项目,在使用DATAGRIDVIEW的时候,显示数据量比较大,所以才用分页模式,也不知道这样是否正确.  想找个C/S下面的分页控件,都没有什么好的,就自己跟B/S下的分页控件,修改成WINFORM下面的.  首先创建一个用户控件名称为pager,在控件中拖入bindingNavigator和bindingSource,修改bindingNavigator,加入必要的一些控件.  效果如下: 代码实现如下: namespace WindowsAp

Winform分页控件最新版本发布,并提供基于DotNetBar界面的版本

该Winform分页控件很早就开发了,一直在我所有的共享软件项目中使用,并得到很多Winform开发者的热爱和支持,其中逐步完善了一些功能及优化.从较早时期的随笔<WinForm界面开发之"分页控件">中的评论可见该控件是大家在Winform开发中常用到的一个控件.本文主要介绍该分页控件的重要特性,并发布相关最新的版本供用户下载,该控件提供免费版本供大家使用,如果要正式使用到产品中,可以和我联系获得正式授权. 在Winform程序开发中,分页是永恒的话题,因为需要显示的数据

asp.net 数据分页控件(不用存储过程)

asp教程.net 数据分页控件(不用存储过程) 本分页控件原理 分页的方法很多,有用存储过程的,有不用存储过程的,还有在c#中用datagridview的虚拟模式的,目的只有一个,对大数据量进行处理,让用户体验得到提高,软件速度得到提升.本分页控件主要是用了下面的sql语句,我相信你能看懂的,存储过程分页也是用类似的sql代码:    1 /*tablename           :表名            如:tbtestdata  2   sqlwherestatement   :sq

基于JS分页控件实现简单美观仿淘宝分页按钮效果_javascript技巧

最新版本代码请移步到https://github.com/pgkk/kkpager 在线测试链接:http://pgkk.github.io/kkpager/example/pager_test.html 分页按钮思想: 1.少于9页,全部显示 2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码 附件中有完整例子的压缩包下载.已更新到最新版本 先看效果图: 01输入框焦点效果 02效果 模仿淘宝的分页按钮效果控件kkpager JS代码: Js代码 var kkpager = {

自己动手写的jquery分页控件(非常简单实用)_jquery

最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了.写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性不知道怎么没时间测试呢.欢迎有同样需求的小伙伴采用,在使用过程发现有问题欢迎提出批评建议.   css: @charset "utf-"; * { margin:px; padding:px; font-family:"微软雅黑";

深入理解jQuery layui分页控件的使用_jquery

$.getJSON( )的使用方法简介 $.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] ) url是必选参数,表示json数据的地址: data是可选参数,用于请求数据时发送数据参数: success是可参数,这是一个回调函数,用于处理请求到的数据. //内容页面 <br> <div id="notice_div"></div><br> //分页控件 <d

基于jQuery的实现简单的分页控件_jquery

1:效果图 2:素材 3:编码 3.1思考 需要做什么? 1:分页控件需要向后台发送请求,发送的参数包括当前页,每页显示数量,查询条件:并且获取数据加载到当前页面: 2:进行修改删除操作的时候能记住当前页: 3:查询后翻页的时候可以可以记住当前查询的条件 3.2实现 HTML 复制代码 代码如下: <!--存储数据的容器--> <div class="tableData"> </div> <!--分页控件显示--> <div cla

jquery 分页控件实现代码_jquery

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>jquery分页控