3

AJAX を使用して DataTables を更新するときに、以前の DataTable から残った列ヘッダーをどのように削除するのか疑問に思っていました。テーブルを描画するために両方の関数で bDestroy を true に設定していますが、テーブルの 1 つは他のテーブルよりも列が少なく、大きなテーブルを読み込んだ後に小さなテーブルを読み込むと、大きなテーブルから残りの列ヘッダーが取得されます。 .

ここに私の2つの機能があります：

function combinedAgeGender() {
(function($) {
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
    $('#data-entry').dataTable({
        "bProcessing": true,
        "bScrollInfinite": true,
        "bScrollCollapse": true ,
        "bAutoWidth": false,    
        "iDisplayLength": -1,
        "bDestroy": true,
        "sDom": '<"top">rt<"bottom">',
        "aaSorting": [],
        "sAjaxSource": "/CensusDatabase/database_scripts/CombinedAgeGender.php",
        "aoColumns": [
            { "sTitle": "Age group" },
            { "sTitle": "National total population (both genders)" },
            { "sTitle": "National male population" },
            { "sTitle": "National female population" },
            { "sTitle": "National % (both genders)" },
            { "sTitle": "National male %" },
            { "sTitle": "National female %" },
            { "sTitle": "National males per 100 females" },
            { "sTitle": "Arizona total population (both genders)" },
            { "sTitle": "Arizona male population" },
            { "sTitle": "Arizona female population" },
            { "sTitle": "Arizona % (both genders)" },
            { "sTitle": "Arizona male %" },
            { "sTitle": "Arizona female %" },
            { "sTitle": "Arizona males per 100 females" }

        ]

    });
})(jQuery);
}

function nationalAgeGender() {
(function($) {
    $('#data').html('<table width="100%" cellspacing="3" cellpadding="0" id="data-entry"></table>');
    $('#data-entry').dataTable({
        "bProcessing": true,
        "bScrollInfinite": true,
        "bScrollCollapse": true ,
        "bAutoWidth": false,
        "bDestroy": true,   
        "iDisplayLength": -1,   
        "sDom": '<"top">rt<"bottom">',
        "aaSorting": [],
        "sAjaxSource": "/CensusDatabase/database_scripts/NationalAgeGender.php",
        "aoColumns": [
            { "sTitle": "Age group" },
            { "sTitle": "Total population (both genders)" },
            { "sTitle": "Male population" },
            { "sTitle": "Female population" },
            { "sTitle": "% (both genders)" },
            { "sTitle": "Male %" },
            { "sTitle": "Female %" },
            { "sTitle": "Males per 100 females" }
        ]

    });
})(jQuery);
}

私の問題のスクリーンショット

4

3 に答える 3

0

データテーブルはそれを処理していないようです。どうやら bDestroy パラメータはテーブル データ専用です。

これは私のために働いた：

$('#myDataTableZone').empty();
$('#myDatatableZone').html('<table id="myDataTable"></table>');
$.getJSON('url', data, function(json) {
    $('#myDataTable'.datatable({
        "aaData": json.aaData,
        "aoColumns": json.aoColumns
    });
});
于 2013-06-10T15:06:27.050 に答える