Twitter Bootstrap Datatable не работает должным образом с АЯКС

Question

Используя этот кусок HTML кода работает отлично, как и ожидалось:

<table class = 'table table-bordered table-striped' id = 'example'> 
    <thead><tr><th>Col1</th><th>Col2</th></tr></thead> 
    <tbody> 
     <tr><td>foo</td><td>foo</td></tr> 
     <tr><td>foo</td><td>foo</td></tr> 
    </tbody> 
</table> 

Вот это:

Но когда я храню тот же фрагмент кода в переменной как:

content = "<table class = 'table table-bordered table-striped' id = 'example'>" + 
    "<thead><tr><th>Col1</th><th>Col2</th></tr></thead>" + 
    "<tbody>" + 
     "<tr><td>foo</td><td>foo</td></tr>" + 
     "<tr><td>foo</td><td>foo</td></tr>" + 
    "</tbody>" + 
"</table>" 

и динамически называть его через AJaX, выход, кажется, отличается, как показано на скриншоте:

пагинацию и поле поиска ушли! В коде нет никакой разницы, но почему вторая таблица не имеет этих функций?

Answer 1

После динамического добавления таблицы. Вы снова должны применить dataTable(). Смотрите этот пример: http://jsfiddle.net/bassjobsen/8GNpf/

Или, например, добавить таблицу, когда кнопка с id="addtable" была нажата:

var content = "<table class = 'table table-bordered table-striped' id = 'example2'>" + 
    "<thead><tr><th>Col1</th><th>Col2</th></tr></thead>" + 
    "<tbody>" + 
     "<tr><td>foo</td><td>foo</td></tr>" + 
     "<tr><td>foo</td><td>foo</td></tr>" + 
    "</tbody>" + 
"</table>" 


$('#addtable').click(function(){$('body').append(content); 

$('body table').last().dataTable({ 
     "sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" 
    });});