jquery - Twitter Bootstrap Datatable not working properly with AJaX -
using piece of html code working fine expected:
<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>
here it:
but when store same snippet in variable as:
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>"
and call dynamically via ajax, output seems different shown in screenshot:
the pagination , search field gone! there no difference in code, why second table lacking features?
after add table dynamically. have apply datatable() again. see example: http://jsfiddle.net/bassjobsen/8gnpf/
or example add table when button id="addtable"
has been clicked:
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>>" });});
Comments
Post a Comment