一頁上的多個數據表不起作用

Question

我盡可能簡單地創建了一個示例，該示例可以動態地在頁面中生成一些數據表。

這是jsfiddle示例的鏈接 ，但是為了清楚起見，我也想在此處發布核心代碼：

<div id="tables"></div>

$(document).ready(function() 
{
    var data = [{"MessageId":"e5368264-dd06-403b-85cd-f82c1a0bd685","MessageNumber":"M54740"},{"MessageId":"f6130eb7-2980-4e19-8f4b-d16473add97b","MessageNumber":"M54584"}];

    for(var i = 0; i < 3; i++)
    {
        var tableCode = '<table id="table_' + i + '" class="display" cellspacing="0" width="100%"></table>';  
        $('#tables').html($('#tables').html() + tableCode);

        $('#table_' + i).DataTable
        ({
            data: data,
            columns:
            [
                { data: 'MessageId', title: 'Id', "searchable": true },
                { data: 'MessageNumber', title: 'Number', "searchable": true }
            ]
        });
    }
} );

我在這里所做的是我動態生成一些數據表。 不幸的是，我意識到基本事件（例如搜索和排序）僅應用於最后添加的事件 。

如果我錯了，請指正我，但這提醒了jquery事件的問題，當您希望每次都能正常工作時（我特別是指在分配事件后生成的html元素），您必須編寫如下代碼：

$(document).on('change', '.search-select', function (event){ ... });

而不是

$('.search-select').change(function (event){ ... });

這導致了一個問題：我注定要失敗，數據表將無法正常工作，因此只能通過在源代碼中編輯幾行來保存我（這將花費大量時間來了解不是由我自己編寫的庫）或...是否有更簡單的解決方案？

Answer 1

使用.append()代替.html()作為$('#tables').html($('#tables').html() + tableCode); 將從先前附加的元素中刪除事件。

例如， document.body.innerHTML += '<br>' ==> document.body.innerHTML = (document.body.innerHTML + '<br>'); 將銷毀並重新創建內容。

使用$('#tables').append(tableCode); 而不是$('#tables').html($('#tables').html() + tableCode);

更新的小提琴

Answer 2

嘗試這個 ：

使用屬性選擇器在代碼中一次觸發datatable，以選擇div

將html添加到字符串，然后將其附加到表中

$(document).ready(function() 
{
        var data = [{"MessageId":"e5368264-dd06-403b-85cd-f82c1a0bd685","MessageNumber":"M54740"},{"MessageId":"f6130eb7-2980-4e19-8f4b-d16473add97b","MessageNumber":"M54584"}];


        var tableCode ='';
        for(var i = 0; i < 3; i++)
    {
        tableCode += '<table id="table_' + i + '" class="display" cellspacing="0" width="100%"></table>';  


    }
     $('#tables').html(tableCode);
        $('table[id^="table_"]').DataTable
        ({
            data: data,
            columns:
            [
                    { data: 'MessageId', title: 'Id', "searchable": true },
                    { data: 'MessageNumber', title: 'Number', "searchable": true }
            ]
        });
} );

http://jsfiddle.net/9jnsvam6/1/

Answer 3

確保表中有和標記，否則將得到-未捕獲的TypeError：無法讀取未定義的屬性'mData'