Ajax jQuery選項卡中的數據表

Question

我想將數據表與動態加載的jquery選項卡結合起來，但不知道該怎么做。

這是我的代碼：

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>

Answer 1

當我們單擊Tab時，它將在動態div中加載ajax/tab.jsp?a=1 。

因此，每次單擊選項卡時都會發生這種情況。

但是您的Datatable代碼只編寫了一次，將在加載jsp文件之前執行

因此，您的數據表不會顯示。

解決這個問題

您需要調用$('#example').DataTable(); 每次單擊選項卡
並確保在加載jsp內容后致電給您。

您可以使用Tabs的tabsbeforeload事件。

注意：

我添加了超時只是為了延遲事情，以便加載jsp。 如果您的jsp需要更多時間來加載，請嘗試增加超時值。

碼：

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

Ajax jQuery選項卡中的數據表

問題描述

1 個解決方案

解決方案1
0 2018-11-15 05:10:15

Ajax jQuery選項卡中的數據表

問題描述

1 個解決方案

解決方案1 0 2018-11-15 05:10:15

解決方案1
0 2018-11-15 05:10:15