Question

我创建了一个简单的示例，因为我可能会尝试做什么 - 这是在我的页面中动态生成一些数据表。

这里是a link to jsfiddle example，但为了清晰起见，我还想在此处发布核心代码：

<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>' ==＆gt; document.body.innerHTML = (document.body.innerHTML + '<br>');将再次破坏并重新创建内容。

使用$('#tables').append(tableCode);代替$('#tables').html($('#tables').html() + tableCode);

Updated fiddle

Answer 2

试试这个：

使用属性选择器在代码中触发一次数据，以选择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'

一个页面上的多个数据表无法正常工作

3 个答案: