普通网友 2018-11-14 17:20
浏览 37

Ajax jQuery选项卡中的数据表

I would like to combine datatables with dynamically loaded jquery tabs and don't know how to do it.

Here is my code:

index.jsp:

    $(document).ready(function() {
        $( "#tabs" ).tabs({
            beforeLoad: function( event, ui ) {
                ui.jqXHR.fail(function() {
                    ui.panel.html(
                      "Couldn't load this tab. We'll try to fix this as soon as possible. "+ 
                      "If this wouldn't be a demo." );
                });
            }
        });

        $('#example').DataTable();
    });

<div id="tabs">
    <ul>
        <li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
        <li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
        <li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
        <li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
    </ul>
</div>

tab.jsp:

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
        </tr>
    </tbody>
</table>
  • 写回答

1条回答 默认 最新

  • weixin_33725239 2018-11-15 05:10
    关注

    When we click Tab it will load ajax/tab.jsp?a=1 in a dynamic div.

    So this happens each time you click a Tab.

    But your Datatable code is written just once which will get executed before the jsp file is loaded

    So your datatable doest show up.

    To resolve this

    1. You need to call $('#example').DataTable(); each time a Tab is clicked
    2. And make sure you call if after your jsp content is loaded.

    You can use tabsbeforeload event of Tabs.

    Note:

    I have added timeout just to delay things so that jsp is loaded. If yous jsp takes more time to load try increasing timeout value.

    Code:

    <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery UI Tabs - Default functionality</title>
        <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script>
            $(function () {
                $("#tabs").tabs({
                    beforeLoad: function (event, ui) {
                    // load first time
                        setTimeout(function () {
                            $('#example').DataTable();
                        }, 30);

                        ui.jqXHR.fail(function () {
                            ui.panel.html(
                                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                                "If this wouldn't be a demo.");
                        });
                    }
                });

                // before tabload
                $("#tabs").on("tabsbeforeload", function (event, ui) {
                    console.log("dd");
                    $("#example").remove();  // to avoide duplicate id as Datatable will not load for other Tabs
                    setTimeout(function () {
                        $('#example').DataTable();
                    }, 30);
                });
            });
        </script>
    </head>
    <body>
        <div id="tabs">
            <ul>
                <li><a href="ajax/tab.jsp?a=1">Tab 1</a></li>
                <li><a href="ajax/tab.jsp?a=2">Tab 2</a></li>
                <li><a href="ajax/tab.jsp?a=3">Tab 3</a></li>
                <li><a href="ajax/tab.jsp?a=4">Tab 4</a></li>
            </ul>
        </div>
    </body>
</html>
    评论

报告相同问题？

  • jquery ajax选项卡使用jQuery选项卡切换异步加载请求数据
    2019-08-30 22:25
    首先，让我们了解jQuery选项卡的基本结构。通常，选项卡由HTML的`<div>`或`<ul>`元素组成，每个选项卡对应一个内容区域。例如： ```html <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></...
  • jquery+ajax选项卡特效插件下载
    2021-01-23 05:14
    一、jQuery选项卡基础 jQuery的选项卡功能主要通过`$.fn.tabs()`方法实现，它提供了一套完整的选项卡解决方案，包括点击切换、键盘导航等功能。首先，我们需要在HTML中定义选项卡结构，通常包括一个容器元素（用于...
  • jquery ajax tab选项卡.zip
    2022-11-19 19:46
    《jQuery AJAX Tab选项卡技术详解》 在网页开发中，选项卡（Tab）是一种常见的用户界面元素，它能有效地组织和展示大量信息，提供简洁、高效的用户体验。jQuery库结合AJAX技术，使得创建动态加载内容的选项卡变得...
  • jquery带左右按钮的横向导航选项卡
    2021-01-23 05:14
    【标题】"jQuery带左右按钮的横向导航选项卡"是一个网页设计中常见的交互元素，它通常用于呈现多个页面或内容区域，并通过左右按钮实现平滑的水平切换。这种设计模式在现代网页中非常流行，因为它既节省空间又提供了...
  • jQuery实现Ajax选项卡特效插件.zip
    2022-11-21 11:33
    在本文中，我们将深入探讨如何使用jQuery来实现Ajax选项卡特效插件，这是一种常见的前端交互设计，能够提升用户体验。选项卡通常用于展示多个内容区域，用户可以通过点击不同的标签来切换内容，而Ajax技术则允许我们...
  • 使用Bootstrap Tabs选项卡Ajax加载数据实现
    2020-08-31 20:58
    如果选项卡数量较多，可以考虑将数据存储在JSON数组中，简化代码并提高效率： ```javascript var tabsData = [ { "id": "test-paper", "url": "pages/test-paper.jsp" }, { "id": "favorite", "url": "pages/...
  • jQuery机房信息课程表选项卡代码.rar_jQuery机房信息课程表选项卡代码_littlezjy
    2022-09-22 14:09
    在本资源"jQuery机房信息课程表选项卡代码.rar"中，我们聚焦于如何利用jQuery来实现一个功能丰富的机房信息课程表的选项卡切换效果。这个代码实例由开发者littlezjy提供，主要目标是创建一个蓝色主题的、具有滑动...
  • jquery选项卡过滤效果代码
    2021-01-23 05:14
    在jQuery选项卡过滤效果中，主要涉及以下几个关键知识点： 1. **选择器（Selectors）**：jQuery的选择器类似于CSS选择器，用于选取页面中的HTML元素。例如，`$("#id")`选择ID为指定值的元素，`$(".class")`选择所有...
  • jQuery选项卡Tabslet插件.zip
    2022-11-22 17:16
    在jQuery选项卡插件中，JavaScript用于实现选项卡的切换逻辑，监听用户交互，并更新页面内容。 5. **选项卡设计原理**: 选项卡通常由一组可切换的面板组成，每个面板包含不同的内容。在视觉上，只有一个面板是可见...
  • 鼠标滑过jQuery选项卡切换.zip
    2022-11-26 11:03
    在这个“鼠标滑过jQuery选项卡切换”的项目中，我们将探讨如何利用jQuery实现一个基于鼠标悬停的选项卡切换效果。这个效果常见于网站导航、产品展示等场景，能够提供用户友好的交互体验。 首先，我们需要理解HTML5...
  • 没有解决我的问题, 去提问