用jQuery翻页组件yumm . pager . js实现div部分刷新的思路

有很多前端翻页插件。bootstrap的翻页界面看起来不错，也很容易使用。然而，在项目中实施翻页仍然有几个困难，它们是：

如何打包一个翻页插件，比如标题中的yunm.pager.js。

如何对涉及的div进行部分刷新？

在给大家介绍文字之前，先给大家看一下效果图。如果你感觉良好，请继续阅读：

翻页的整个过程涉及到很多知识点。在本文中，我们主要关注以上两点。其余，请自悟问之。

1.如何为本地刷新定义div

翻页时，我们通常只刷新翻页涉及的父div，那么如何定义呢？

form rel=' support _ deal _ page ' target='收费表单' action=' $ { CTX }/initI ' method=' post ' Input type=' hidden ' name=' page ' value=' 1 '/Input type=' hidden ' name=' rows ' value=' 2 '/form div id=' support _ deal _ page ' class=' row '/div为div定义id，如果页面有多个翻页组件，建议为当前页面唯一。

为div创建同级窗体。

rel属性指向div，表示表单属于support_deal_page的div。

目标属性是转盘表单，表示该表单是翻页组件的表单。

动作参数自然是不可或缺的。

定义页面的输入标签，表示是第一页。

定义行的输入标签，表示每页显示两个。

定义了div之后，当页面加载有load的时候，我们可以请求后台(后台的数据怎么处理，这里就不打扰我了)获取第一页的分页数据。

//根据表单的目标属性，获取需要分页的div，发起ajax请求。$(' form[target=收费表单]'，$p)。每个(function(){ var $ this=$(this)；yumm . debug(' form[target=收费表单]' $ this . selector)；var rel=$ this . attr(' rel ')；var $box=$this.parent()。find(' # ' rel)；if(rel){ $ box . aja xurl({ type : ' post '，//记录div :的id URL $ this . attr(' action ')'？rel=' rel，data : $this.serializeArray()，回调函数：(){ } })；}});ajaxUrl :函数(op){ var $ this=$(this)；$.ajax({type : op.type || 'GET '，url : op.url，data : op.data，cache : false，success : function(响应){var json=YUNM.jsonEval(响应)；if(JSON[YUNM . keys . status code]==YUNM . status code . error){ if(JSON[YUNM . keys . message])$。shower(JSON[YUNM . keys . message])；} else {//成功获取Ajax请求后，将部分刷新的内容放入div $this.html(响应)中。initUI()；if ($。is FuncTion(op . callback))op . callback(响应)；}}，错误： yunm。ajaxerror，状态代码： {503 :函数(xhr，ajaxoptions，抛出错误){$。showerr('服务器当前过载或正在维护！'| | thrownError)；}}});}，第一次加载页面的时候，我们把第一页的数据放在div里面，也很简单。

第二，打包翻页组件yumm . pager . js

在第一步之后，如何封装翻页组件成为下一个关键步骤。

（功能% 28% 24% 29% 20% 7B % 24。fn。扩展% 28% 7Bpager % 203360% 20功能% 28选择% 29% 20% 7B % 2F % 2F % 20% E5 % 8F % AF % E5 % 8F % 82% E7 % 85% A7引导% E7 % 9A % 84% E7 % BF % BB % E9 % A1 % B5 % EF % BC % 8C % E4 % B8 % BA %