多tab下ajax动态分页

如下图，多个tab，每个tab下面是图片+文字，每个tab都有分页,ajax动态分页。如何用一个分页函数实现这样的需求？有没有相关的代码可以学习下？

截图

希望达到的效果 http://www.vpnsg.com/ 这个网站的tab切换分页效果
不过它是生成了4个分页。虽然也可以实现目的,但是代码过于多余,有没有可复用的方案？
我用到的是jquery.pagination.js分页插件，ajax动态生成分页。

ajax javascript

阅读 9.6k

7 个回答

得票最新

007wuzehui

501

发布于
2015-12-30

我之前倒是做过一个开启的程序。思路是这样的：当切换上面的分类的时候在生成一个大类的cookie，同时触发ajax，将内容返回到下面的div里面。
而分页是公共的，每次点击换页的时候，首先获取cookie，判断是哪个分类，然后再通过ajax进行传值。
具体代码没有什么复杂的地方。

Showonne

2.8k103547

发布于
2015-12-30

可以把这个分页部分做成一个组件，通过传参数(总数，每页显示数，当前页数等)来动态生成(渲染和绑定事件)这个分页部分，通过ajax获取不同数据后根据不同需求把这个组件生成出来。

jsven

1.4k41323

发布于
2015-12-31

更新于
2015-12-31

菜鸟来写一下简单的实现方法

<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
<body>

</body>
    <!--分类选项卡区域-->
    <div id="title">
        <div flag="dataName" class="title_div">dataName</div>
        <div flag="dataCountry" class="title_div">dataCountry</div>
    </div>

    <div style="border:1px solid red;"></div>
    <!--内容选项卡区域-->
    <div id="context">
        <div id="dataName"></div>
        <div id="dataCountry"></div>
    </div>

    <!--下一页按钮-->
    <div onclick="nextPage()">下一页</div>
<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_div").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>div").hide();
            jQuery("#"+pageFlag).show();
        })
    }
    function handleData(dataHtml){
        var html="";
        jQuery(dataHtml).each(function(){
            html+="<div>"+this+"</div>";
        })
        jQuery("#"+pageFlag).append(html);
    }
    function nextPage(){
        handleData(eval(pageFlag+eval("++"+pageFlag+"Index")));
    }
</script>
</html>

imingyu

816513

发布于
2015-12-31

把四个tab的分页都放在一起才是“多余”！这不利于后期的维护，开发时也更容易出错，四个tab对应四个分页是可以的，因为这个四个tab页中的内容是相互独立的，不存在太多联系，如果联系紧密（如职位列表按照职位类型区分tab），可以考虑使用一个分页控件。
以上是我的建议，另外关于代码实现，你都已经会实现一个分页了，那4个或者是4个合一个，也没什么问题。