java jquery 分页插件怎样实现_基于jquery 的分页插件，前端实现假分页效果

上次分享了一款jquery插件，现在依旧分享这个插件，不过上一次分享主要是用于regular框件，且每一页数据都是从后端获取过来的，这一次的分享主要是讲一次性获取完数据 然后手动进行分页。此需求基本上是和前端搜索挂钩的。所有的数据都在页面里只是展示的不同。这样前端搜索就能从全部数据中进行搜索，而不是尴尬的只能从某一页里进行搜索，不过这种需求一般都在数据量较小的情况下才会使用，毕竟搜索功能一般不是前端来实现的。

这次的插件依旧是 http://106.2.44.116/src/javascript/base/jquery.pagination.js这款插件。

至于这个框架的详细用法我就不再说了，上一篇里都写了，现在直接从实现假分页功能入手。

var list =[

{pic:"1",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"2",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"3",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"4",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"5",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"6",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"7",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"8",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"9",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"10",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"11",name:"zhang",number:"1234",section:"企业事业部"},

{pic:"12",name:"zhang",number:"1234",section:"企业事业部"},

];

首先我们假定这组数据是从后端传来的全部数据

接下来定义一个新数组

var dataList =[];

我们假定需求为每页展示4条数据

则第一步初始化分页,具体配置信息见上一遍博客

$('.box').pagination({

totalData:12,//一共的条数

showData:4,//每页展示的条数

coping:true,

jump:true,

keepShowPN:true,

homePage:'首页',

endPage:'末页',

prevContent:'上页',

nextContent:'下页',

callback:function(api){

}

},function(api){

$('.now').text(api.getCurrent());

});

分页的效果为：(可自定义样式，在css文件中写即可，详细见上一篇)

第二步设置页面默认看见的四条信息，在整体回调函数中写

function(api){

$('.now').text(api.getCurrent());

for(var i=0;i<4;i++){

$("

"+

""+list[i].pic+"

"+

""+list[i].name+"

"+