jquery - Reflow table generated in loop not responsive -

-

i generating reflow table in loop in jquery mobile after ajax success. problem table not responsive. on small screens table generated supposed work collapsing table columns stacked presentation looks blocks of label/data pairs each row. when output table markup generate loop , copy/paste separate page, table looks fine , responsive.

the html generate is:

<table data-role="table" id="time-table" data-mode="reflow" class="ui-responsive table-stroke">     <thead>        <tr>          <th>linje</th>          <th>destination</th>          <th>nästa tur (min)</th>          <th>därefter</th>        </tr>     </thead>     <tbody>        <tr>          <th>7</th>          <td>resecentrum</td>          <td>nu</td>          <td>11</td>        </tr>        <tr>          <th>7</th>          <td>Ö lugnet via resecentrum</td>          <td>23</td>          <td>51</td>        </tr>     </tbody> </table>

looks in small screen when copy markup generated , paste in separate file , what need.

enter image description here

however when dynamically code:

success: function(data){     //generate table header , populate. var thdata1 = "<th>"+data[2]+"</th>"; var thdata2 = "<th>"+data[3]+"</th>"; var thdata3 = "<th>"+data[4]+"</th>"; var thdata4 = "<th>"+data[6]+"</th>";      var tblrow = $("<tr></tr>"); var thead = $("<thead></thead>"); var table = $("<table data-role=\"table\" id=\"time-table\" data-mode=\"reflow\" class=\"ui-responsive table-stroke\">");  tblrow.append(thdata1); tblrow.append(thdata2); tblrow.append(thdata3); tblrow.append(thdata4);      thead.append(tblrow); table.append(thead)      //generate table body , populate. var row = $("<tr>"); var flag = 0; var tbody = $('<tbody>'); $.each(data, function(key, val){     if(key >= 8){     if(key%4 != 3){       if(flag == 0)         row.append("<th>"+val+"</th>");       else         row.append("<td>"+val+"</td>");       flag++;     }     else if(key%4 == 3){       row.append("<td>"+val+"</td>");       tbody.append(row);       row = $("<tr>");       flag = 0;     }      }      });    table.append(tbody);    table.appendto("#contbl");    console.log($("#contbl").html()); }

it generates normal layout unresponsive table in image below retains same structure in smaller screen. css looks out of place in layout. using default table class="ui-responsive table-stroke" provided jqm.

enter image description here

the markup generate working fine. cannot figure out problem here.

when create dynamically html in case have update page content using

$('page_id').trigger('pagecreate');

Comments

Post a Comment

Popular posts from this blog

javascript - Laravel datatable invalid JSON response -

-
everything work fine on code below fetch user logs: js: <script> $(document).ready(function () { var table =$('#systemlogs').datatable({ responsive: true, processing: true, serverside: true, "language": { "url": "/datatables/media/plug-in/persian.json" }, ajax: '{!! url('/admin/systemlogs/data/systemlogsdatatable') !!}', columns: [ { data: 'name', name: 'name' }, { data: 'message_text', name: 'message_text' }, { data: 'remote_addr', name: 'remote_addr' }, { data: 'log_created_at', name: 'management_logs.created_at' }, { data: 'log_updated_at', name: 'management_logs.updated_at' }, ] }); }); </script> routes: route::get('/systemlogs/data/systemlogsdatatable','systemlogscontrolle...
Read more

java - Exception in thread "main" org.springframework.context.ApplicationContextException: Unable to start embedded container; -

-
i getting error when run spring application: exception in thread "main" org.springframework.context.applicationcontextexception: unable start embedded container; nested exception org.springframework.context.applicationcontextexception: unable start embeddedwebapplicationcontext due missing embeddedservletcontainerfactory bean. @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.onrefresh(embeddedwebapplicationcontext.java:124) @ org.springframework.context.support.abstractapplicationcontext.refresh(abstractapplicationcontext.java:476) @ org.springframework.boot.context.embedded.embeddedwebapplicationcontext.refresh(embeddedwebapplicationcontext.java:109) @ org.springframework.boot.springapplication.refresh(springapplication.java:691) @ org.springframework.boot.springapplication.run(springapplication.java:320) @ org.springframework.boot.springapplication.run(springapplication.java:952) @ org.springframework.boot.springa...
Read more

sql server 2008 - My Sql Code Get An Error Of Msg 245, Level 16, State 1, Line 1 Conversion failed when converting the varchar value '8:45 AM' to data type int -

-
msg 245, level 16, state 1, line 1 conversion failed when converting varchar value '8:45 am' data type int. script declare @specimenid bigint = 0, @script varchar(max); declare @starttime int = (select convert(int,substring(start_time,0,charindex(':', start_time)) - 12) appt appt._id=112601) --select @starttime set @script = 'select distinct ptlast_name + '', '' + pt.first_name patient_name, dbo.formatdate(pt.dob,''mm/dd/yyyy'') dob, (convert(varchar, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end)) + ''/'' + convert(varchar, (datediff(m, dateadd(yy, (datediff(yy, dob, appt_date) - case when (month(dob) > month(appt_date)) or (month(dob) = month(appt_date) , day(dob) > day(appt_date)) 1 else 0 end), d...
Read more