ajax jquery选项卡中的datatable

$(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>

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

当我们点击tab时,它将加载 ajax/tab.jsp?a=1 在动态分区中。

所以每次你点击一个标签就会发生这种情况。

但是你的 Datatable 代码只写一次,在 jsp 文件已加载

所以你的数据表不会出现。

解决这个问题

你需要打电话 $('#example').DataTable(); 每次单击选项卡时
并确保在加载jsp内容之后调用if。

你可以用 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>