ajax jquery选项卡中的datatable

我想将数据表与动态加载的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>