问使用jQuery、AJAX和PHP将数据加载到动态创建的选项卡中

EN

try {

print '
    <div class="clientTabs">
        <ul class="nav nav-tabs" id="navTabs">
            <li class="active" id="li0"><a href="#client0" role="tab" data-toggle="tab">Alle clienten</a></li>
        </ul>
    </div>';

$selectTabbladen = $gebruiker_data->runQuery("SELECT * FROM clients  ORDER BY clients_id");

if (!$selectTabbladen->execute()) return false;

if ($selectTabbladen->rowCount() > 0) {

print '
<div class="tab-content" id="tabContent">
    <div id="client0" class="tab-pane active">
        <div class="bootstrap-table">
            <div class="fixed-table-toolbar">
                <div class="bars pull-left">
                    <button id="btnTabdel" class="btn btn-danger btn-labeled" disabled="disabled">Vervijderen</button>
                </div>
            </div>
        </div>

        <table class="table table-bordered" id="table"
            data-toolbar="#toolbar"
            data-search="true"
            data-show-refresh="true"
            data-show-toggle="false"
            data-show-columns="true"
            data-show-export="true"
            data-detail-view="true"
            data-detail-formatter="detailFormatter"
            data-pagination="true"
            data-id-field="id"
            data-minimum-count-columns="2"
            data-page-list="[10, 25, 50, 100, ALL]"
            data-show-footer="false">

            <thead>
                <tr>
                    <th class="text-center" width="1">#</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Zip</th>
                    <th>City</th>
                    <th>Tel.</th>
                </tr>
            </thead>
            <tbody>';                       

            while($aRow = $selectTabbladen->fetch(PDO::FETCH_ASSOC)) {

                $id = $aRow['clients_id'];
                $name= $aRow['name'];
                $adress= $aRow['address'];
                $zip= $aRow['zip'];
                $city= $aRow['city'];
                $tel= $aRow['tel'];

                print '<tr class="tabData" id="'.$id.'">
                    <td>
                        <label class="cr-styled">
                            <input type="checkbox" ng-model="todo" class="tabID" value="'.$id.'"/>
                            <i class="fa"></i>
                        </label>
                    </td>
                    <td>'.$name.'</td>
                    <td>'.$address.'</td>
                    <td>'.$zip.'</td>
                    <td>'.$city.'</td>
                    <td>'.$tel.'</td>
                    </tr>';
                }

    //Tabs
$('body').on('dblclick', '.tabData', function () {
    var tab_id = $(this).attr("id");
    addTab(tab_id);
});

function addTab(tab_id) {
    // If tab already exist in the list, return
    if ($("#li"+tab_id).length != 0) {
        $("#navTabs li").removeClass("active");
        $("#client0").removeClass("active");
        $("#li"+tab_id).addClass("active");
        $("#client"+tab_id).addClass('active').show();
        //return;
    } else {
        $("#navTabs li").removeClass("active");
        $("#client0").removeClass("active");

        // add new tab and related content
        $('ul#navTabs li:last-child').after('<li class="active" id="li' + (tab_id) + '"><a href="#client' + (tab_id) + '" role="tab" data-toggle="tab">Client ' + (tab_id) + ' <button type="button" class="btn btn-warning btn-xs" onclick="removeTab(' + (tab_id) + ');"><i class="fa fa-remove"></i></button></a>');

        loadClientData(tab_id);
//$('div#tabContent div:last-child').after('<div class="tab-pane" id="client' + (tab_id) + '"><p>Content tab ' + (tab_id) + '</p></div>');

        // set the newly added tab as current
        $("#client"+tab_id).addClass('active').show();
    }
}

function loadClientData(tab_id) {
    $("#tabContent").empty();
    $.ajax({
        type: "GET",
        url: "clienten_data_load.php?id='+tab_id",

        success: function(data) {
            //empty(data);
            $("#tabContent").text(data);

        }
    });
}