Mehrere Databases auf einer Seite funktionieren nicht

Question

Ich erstellte so einfach wie möglich ein Beispiel von dem, was ich versuche zu tun - das ist dynamisch einige Datentabellen auf meiner Seite generieren.

hier ist a link to jsfiddle example, aber ich mag auch den Kern-Code hier für Klarheit schreiben:

<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 } 
      ] 
     }); 
    } 
}); 

Was ich hier tue, bin ich dynamisch ein paar Datentabellen zu erzeugen. Leider bin ich zu der Erkenntnis gelangt, dass die grundlegenden Ereignisse (wie Suchen und Sortieren) nur auf die zuletzt hinzugefügte angewendet werden.

Korrigieren Sie mich, wenn ich falsch liege, aber dies erinnert an die Probleme mit jquery-Ereignissen, wenn Sie jedes Mal arbeiten wollen (ich meine vor allem die HTML-Elemente generiert nach dem Ereignis zugewiesen wurde), müssen Sie schreiben Code wie:

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

statt

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

, die auf die Frage führt: bin ich zum Scheitern verurteilt und die Datentabellen werden nicht einfach arbeiten und so kann ich nur über die Bearbeitung ein paar Zeilen in die gespeichert werden Quellcode (der eine enorme Menge an t benötigen würde Ich möchte eine Bibliothek verstehen, die ich nicht selbst geschrieben habe) oder ... gibt es einfachere Lösungen?

Answer 1

Use .append() instead of .html() as $('#tables').html($('#tables').html() + tableCode); will remove events from earlier appended elements.

Zum Beispiel document.body.innerHTML += '<br>' ==>document.body.innerHTML = (document.body.innerHTML + '<br>'); zerstören und neu erstellen den Inhalt erneut.

Verwenden $('#tables').append(tableCode); statt $('#tables').html($('#tables').html() + tableCode);

Updated fiddle

Answer 2

Try this:

Trigger-Datentabelle einmal im Code das Attribut Selektor al die divs

Fügen Sie den HTML in eine Zeichenfolge wählen und dann an die Tabelle anhängen

$(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

Vergewissern Sie sich, und Tags in der Tabelle oder Sie erhalten - Uncaught Typeerror: kann Eigenschaft 'mdata' undefinierter