Create table dynamically in jQuery Mobile

Question

I am creating table plugin in JQM in html file. It works properly

html page

<table data-role="table" data-mode="columntoggle" class="ui-responsive table" id="service">
....
</table>

But i want to create a table dynamically. when doing this. JQM default plugin isn't apply

My code is

var service_table = $('<table data-role="table" data-mode="columntoggle" class="ui-responsive table" id="service"></table>')


            var service_tr_th = $("<tr><th>Name</th></tr>");
        var service_tr=$('<tr></tr>');
        var service_name_td=$('<td>'+retServiceName+'</td>');
        $(service_name_td).appendTo(service_tr);
        $(service_tr_th).appendTo("#categories");
        $(service_tr).appendTo(service_table);
        $(service_table).appendTo("#categories");

in Html page

<div id="categories"></div>

ezanker · Accepted Answer · 2014-03-13 13:54:20Z

When creating a column toggle table, add THEAD and TBODY, and data-priority="x" to the header cells (see http://demos.jquerymobile.com/1.4.2/table-column-toggle/). Finally call the .table() method to tell jQM to enhance the table:

var service_table = $('<table data-role="table"  data-mode="columntoggle" class="ui-responsive table-stroke" id="service"></table>');


var service_tr_th = $("<thead><tr><th data-priority='1'>Name</th><th>Col2</th data-priority='2'></tr></thead>");
var service_tbody = $('<tbody></tbody>');
var service_tr = $('<tr></tr>');
var service_name_td = $('<td>' + retServiceName + '</td><td></td>');
service_name_td.appendTo(service_tr);
service_tr_th.appendTo(service_table);
service_tr.appendTo(service_tbody);
service_tbody.appendTo(service_table);
service_table.appendTo($("#categories"));

service_table.table();

Here is a DEMO

NOTE: you don't need $() around variables that are already jQuery collections e.g. service_tr, service_name_td, etc.

Collectives™ on Stack Overflow

Create table dynamically in jQuery Mobile

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related