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:

correct view of twitter bootstrap datatable

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:

enter image description here

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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -