javascript - 多tab下ajax动态分页-PHP中文网问答

微信公众号讲师中心

首页

文章

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发 UI设计计算机基础

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

最近更新

搜索

web3.0 后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程

javascript - 多tab下ajax动态分页

巴扎黑 2017-04-10 16:46:33

[JavaScript讨论组]

857

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

截图

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

巴扎黑

全部回复(7)

阿神2017-04-10 16:48:33 7楼

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

赞 +0

添加回复

PHPz2017-04-10 16:48:33 6楼

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

赞 +0

添加回复

黄舟2017-04-10 16:48:33 5楼

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

<!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>

赞 +0

添加回复

高洛峰2017-04-10 16:48:33 4楼

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

赞 +0

添加回复