如下图，多个tab，每个tab下面是图片+文字，每个tab都有分页,ajax动态分页。如何用一个分页函数实现这样的需求？有没有相关的代码可以学习下？
截图
希望达到的效果 http://www.vpnsg.com/ 这个网站的tab切换分页效果
不过它是生成了4个分页。虽然也可以实现目的,但是代码过于多余,有没有可复用的方案？
我用到的是jquery.pagination.js分页插件，ajax动态生成分页。
阿神2017-04-10 16:48:33
我之前倒是做过一个开启的程序。思路是这样的：当切换上面的分类的时候在生成一个大类的cookie，同时触发ajax，将内容返回到下面的p里面。
而分页是公共的，每次点击换页的时候，首先获取cookie，判断是哪个分类，然后再通过ajax进行传值。
具体代码没有什么复杂的地方。
PHPz2017-04-10 16:48:33
可以把这个分页部分做成一个组件，通过传参数(总数，每页显示数，当前页数等)来动态生成(渲染和绑定事件)这个分页部分，通过ajax获取不同数据后根据不同需求把这个组件生成出来。
黄舟2017-04-10 16:48:33
菜鸟来写一下 简单的实现方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<!--分类选项卡区域-->
<p id="title">
<p flag="dataName" class="title_p">dataName</p>
<p flag="dataCountry" class="title_p">dataCountry</p>
</p>
<p style="border:1px solid red;"></p>
<!--内容选项卡区域-->
<p id="context">
<p id="dataName"></p>
<p id="dataCountry"></p>
</p>
<!--下一页按钮-->
<p onclick="nextPage()">下一页</p>
<script src="jQuery.js"></script>
<script>
var dataNameIndex=0;
var dataCountryIndex=0;
var dataName1=["data1_a","data1_b","data1_c"];
var dataName2=["data2_a","data2_b","data2_c"];
var dataCountry1=["dataCountry1_a","dataCountry1_b","dataCountry1_c"];
var dataCountry2=["dataCountry2_a","dataCountry2_b","dataCountry2_c"];
(function(){load();})();
function load(){
bindEvent();
}
function bindEvent(){
jQuery(".title_p").click(function(){
pageFlag=jQuery(this).attr("flag");
var thisIndex=eval(pageFlag+"Index");
//第一页的时候默认加载数据 其他时候不加载
if(eval(pageFlag+"Index")==0){
handleData(eval(pageFlag+eval("++"+pageFlag+"Index")))
}
jQuery("#context>p").hide();
jQuery("#"+pageFlag).show();
})
}
function handleData(dataHtml){
var html="";
jQuery(dataHtml).each(function(){
html+="<p>"+this+"</p>";
})
jQuery("#"+pageFlag).append(html);
}
function nextPage(){
handleData(eval(pageFlag+eval("++"+pageFlag+"Index")));
}
</script>
</html>
高洛峰2017-04-10 16:48:33
把四个tab的分页都放在一起才是“多余”！这不利于后期的维护，开发时也更容易出错，四个tab对应四个分页是可以的，因为这个四个tab页中的内容是相互独立的，不存在太多联系，如果联系紧密（如职位列表按照职位类型区分tab），可以考虑使用一个分页控件。
以上是我的建议，另外关于代码实现，你都已经会实现一个分页了，那4个或者是4个合一个，也没什么问题。
怪我咯2017-04-10 16:48:33
一般来说，牵涉到这么复杂的tab切换，一般都不可能放在一个页面中来完成的。否则某个出了问题，维护起来很麻烦。
于是，这个时候，使用模块化的方式来解决问题就显得非常重要了。
如果你自己单独搞过静态博客网站的话，比如wordpress，jekyll，hexo，都是通过拼装的方式，将每个页面相同的部分单独存为一个模板，需要的时候，引入就行了。这个需要后端程序配合。
至于模板的前端解决方案，可以使用angular等前端框架。
