用Jquery写的一个分页插件

$(function(){ var config = { renderTo : "foo" , // 渲染的容器id list : [ // 测试数据列表 {text : 'JQuery表单验证和表单无刷新ajax提交完美结合的插件'} , {text : 'js操作excel的自我总结'} , {text : '[原创]总结三年使用Extjs开发One Page One Application的SSH架构经验'} , {text : '谁能介绍一个jquery开发企业应用的心得'} , {text : '50个Web设计师超便利的工具'} , {text : '如何开发又炫又高效web程序'} , {text : '也来说说jQuery的grid插件Flexigrid的几点重要改进'} , {text : '如何解决不同浏览器图片显示的问题'} , {text : '一个JS做得很炫的WEBOS网站'} , {text : '如何用Qunit测试你的JavaScript代码'} , {text : 'Javascript在IE和FireFox中的不同表现'} , {text : 'NodeJS初探之一——神秘的服务器端JS'} , {text : 'JQuery Mobile开发和试用'} , {text : 'HTML5 换了个新的 Logo'} ] , curPage : "1" , // 当前页码 initPageCount : "8" // 每一页显示的记录数 } ; pageToolkit.load(config) ; }) ; var pageToolkit = function(){ var _list = [] ; var _totalPage = 0 ; var _curPage = 0 ; var _initPageCount = 0 ; var _totalPageCount = 0 ; var _cursor = -1 ; function _validate(config){ // 参数验证 } ; function _getTotalPage(){ return _totalPage ; } ; function _getInitPageCount(){ return _initPageCount ; } ; function _getCurPage(){ return _curPage ; } ; function _getTotalPageCount(){ return _totalPageCount ; } ; function _getCursor(){ return _cursor ; } ; function _render(list,renderTo){ var _renderTo = $(document.getElementById(renderTo)) ; var list = list ; var cursor = _getCursor() ; var initPageCount = _getInitPageCount() ; var curPage = _getCurPage() ; var totalPageCount = _getTotalPageCount() ; var _table = $("<table cellspacing='1' cellpadding='0'></table>") .addClass("page-toolkit") .appendTo(_renderTo) ; var _tbody = $("<tbody></tbody>") .appendTo(_table) ; var _thead = $("<thead></thead>").appendTo(_table) ; var _tr_ = $("<tr></tr>").appendTo(_thead) ; var _th = $("<th></th>") .html("文本信息") .appendTo(_tr_) ; while(cursor < initPageCount * curPage && cursor < totalPageCount){ var data = list[cursor] ; var _tr = $("<tr></tr>").appendTo(_tbody) ; for(var prop in data){ var t = data[prop] ; $("<td></td>") .html(t) .appendTo(_tr) ; } cursor ++ ; } var nt = "共 "+ _getTotalPage() + " 页" ; var _page_note = $("<div></div>") .addClass("note") .html(nt) .appendTo(_renderTo) ; $("<div></div>") .addClass("page-current") .html("当前第 " + _curPage + " 页") .appendTo(_page_note) ; $("<a id='pre' href="#" mce_href="#"></a>") .html("上一页") .appendTo(_page_note) .click( function(){ var cmd = $(this).attr("id") ; _loadData(cmd) ; } ) ; $("<a id='next' href="#" mce_href="#"></a>") .html("下一页") .appendTo(_page_note) .click( function(){ var cmd = $(this).attr("id") ; _loadData(cmd) ; } ) ; } ; function _loadData(cmd){ var _table = $("div#foo").find("table") ; _table.find("tbody").empty() ; var curPage = _getCurPage() ; var totalPage = _getTotalPage() ; if("pre" == cmd){ if(curPage > 1){ _curPage = curPage - 1 ; } else{ _curPage = 1 ; } } else if("next" == cmd){ if(curPage > totalPage - 1){ _curPage = totalPage ; } else{ _curPage = curPage + 1 ; } } var initPageCount = _getInitPageCount() ; var totalPageCount = _getTotalPageCount() ; var cursor = (_curPage -1) * _initPageCount ; var _tbody = $("tbody") ; if(null == _tbody){ _tbody = $("<tbody></tbody>") ; } _tbody .css("display","none") .appendTo(_table) ; while(cursor < initPageCount * _curPage && cursor < totalPageCount){ var data = _list[cursor] ; var _tr = $("<tr></tr>").appendTo(_tbody) ; for(var prop in data){ var t = data[prop] ; $("<td></td>") .html(t) .appendTo(_tr) ; } cursor ++ ; } $(".page-current").html("当前第 " + _curPage + " 页") ; _tbody.fadeIn("slow") ; } ; function load(config){ var _renderTo = config.renderTo ; var list = config.list ; _list = list ; _totalPageCount = list.length ; _curPage = parseInt(config.curPage) ; _initPageCount = parseInt(config.initPageCount) ; _totalPage = (0 == _totalPageCount % _initPageCount) ? parseInt(_totalPageCount / _initPageCount) : parseInt(_totalPageCount / _initPageCount) + 1 ; _cursor = (_curPage -1) * _initPageCount ; _render(list,_renderTo) ; } ; return { load : load } ; }() ;

你可能感兴趣的:(JavaScript,jquery,list,function,cmd,table)