table headers not displaying in mobile view(stack only/ stack)

varunrajasekhar commented 7 years ago

I am trying to use the stack only mode for a responsive web design. I tried using the following code, everything seems to work fine but while stacking the table, the headers disppear(they dont even show up in the console).

My table html is as follows:

Congregation Name	Street Address	City	State	ZIP Code	Remove

My js uses Ajax to populate and append rows to the table. The table looks fine in the regular browser. But after getting stacked, the headers disppear. Here below I attached an image. 9-23-2016 10-56-32 am

$('#tblAddRemoveTop tbody').empty(); $.each(congregationStatus, function(i) { var addressLine;
if(congregationStatus[i]['addressLine2']) addressLine = congregationStatus[i]['addressLine1']+"
"+congregationStatus[i]['addressLine2'] ; else addressLine = congregationStatus[i]['addressLine1'];

var populateData =""+ "<td id='"+congregationStatus[i]['churchNumber']+"' >"+congregationStatus[i]['churchLegalName']+""+
""+addressLine+""+ ""+congregationStatus[i]['cityName']+""+ ""+congregationStatus[i]['stateCode']+""+ ""+congregationStatus[i]['zip5Code']; if(congregationStatus[i]['zip4Code']) { populateData = populateData +'-'+congregationStatus[i]['zip4Code']; }

            populateData = populateData+"</td>"+
            '<td style="text-align:center;"><a  onclick="deleteCurrentRow(this)" class="deleteBtn" href="javascript:void(0);">Remove</a></td>'+
                                     "</tr>";

$('#tblAddRemoveTop tbody').append(populateData); $('#tblAddRemoveTop').table().data("table").refresh();

I tried everything - all the below methods(But everything seems to be in vain) $( "#items-index-table" ).table( "refresh" ); $( "#items-index-table" ).table( );

dragonSwords98 commented 7 years ago

i can confirm this issue. When I include tablesaw-jquery.js, I also do not see any headers in stack mode. the error in console reads 'shoestring is undefined' from tablesaw-init.js. Using tablesaw.js worked fine though.

cbornhoft commented 7 years ago

Further to this, when changing ( shoestring || jQuery ) to ( jQuery || shoestring ) on the last line of tablesaw-init.js, the script gives no errors and functions as expected.

Rajeshrules27 commented 6 years ago

hi geeks .. i have the same issue when i use this in my app. please help me to solve this issue . i can't understand how to solve this.

onyxnl commented 5 years ago

Hi All,

I also happen this issue, missing label on mobile view, when I fetch data from ajax. It is working properly with static

zainozzaini commented 4 years ago

Hi All,

I also happen this issue, missing label on mobile view, when I fetch data from ajax. It is working properly with static

I fixed by $('.tablesaw').tablesaw().data("tablesaw").refresh(); after complete loaded

filamentgroup / tablesaw

table headers not displaying in mobile view(stack only/ stack) #238