|
1：效果图 复制代码 代码如下:
<!--存储数据的容器--> <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){ } } 实现以上所声明的函数，当分页第一次加载的时候，我们需要从服务器获取总页数来生成分页控件，所以首先实现loadData函数 复制代码 代码如下:
loadData: function(o){ var that = this; var data = that.genData(o); $.ajax({ url: o.url, data: data, type: 'post', dataType: 'html', cache: false, success: function(result){ var res = $(result).find('tbody').html(); var totalPage = $(result).find('#totalPage').val(); var currentPage = $(result).find('#currentPage').val(); o.currentPage=currentPage; o.pager.empty(); $.line.setLine(totalPage,o); //调用生成分页控件的函数 }, error: function(){ alert("error"); } }) } 下面我们实现上面生成分页控件的函数$.line.setLine (责任编辑：admin) |
