Search jQuery

jQuery Forum

Dynamically Adding Rows to Reflow Table

in jQuery Mobile • 4 months ago

I've started using the 1.3 JQM beta today and I'm having trouble adding rows to a reflow table and getting them to format correctly.

The table starts with a header and a few rows and then I pull some more rows in and add them with JQuery. This looks fine as long as the screen is large enough not to reflow the table into the vertical mode. If the table goes into vertical mode, all the rows that I have added are not given labels like the ones that began.

for(transaction in transactions) {

$("#reflow-basic tbody").append($("<tr>\n")

.append("<th>"+transactions[transaction].date+"</th>\n")

.append("<td>"+transactions[transaction].description+"</td>\n")

.append("<td>$"+transactions[transaction].amount+"</td>\n")

.append("<td>$"+transactions[transaction].matched+"</td>\n")

.append("<td>$"+transactions[transaction].total+"</td>\n")

.append("</tr>"));

}

I figured this was similar to how the listview must be refreshed by calling ".listview("refresh") but the table has no option for a similar refresh. Am I missing something?

Replies(8)

haga0054

Re: Dynamically Adding Rows to Reflow Table

4 months ago

I haven't tested out 1.3 yet but have you tried calling a refresh on the parent? For example if your table is in the div <div class="mydiv"> call $(".mydiv").trigger("refresh"); See if that works.

aaronls

Re: Dynamically Adding Rows to Reflow Table

4 months ago

No dice on just refreshing the div above.

I suppose I could manually insert the <b class="ui-table-cell-label">TEXT HERE</b>

labels to surround each cell, but i would have figured there would be a refresh method to do this automatically.

aaronls

Re: Dynamically Adding Rows to Reflow Table

4 months ago

Anyone else have input on this?

If there is no way to add rows to a table and have proper formatting then this sounds like a bug...

mspisars

Re: Dynamically Adding Rows to Reflow Table

4 months ago

It is in the documentation:

http://jquerymobile.com/demos/1.3.0-beta.1/docs/tables/reflow-methods.html

      $( myTable ).table( "refresh" );

If that does not work, then it's a bug.

haga0054

Re: Dynamically Adding Rows to Reflow Table

4 months ago

Yup, this is it. To be fair, when this post was written that wasn't in the documentation. First place I went to check for the refresh method as well, was quite confused.

spieszak

Re: Dynamically Adding Rows to Reflow Table

4 months ago

Right, except for a call to that method throws
no such method 'refresh' for table widget instance

aaronls

Re: Dynamically Adding Rows to Reflow Table

3 months ago

Same issue as spieszak.

Even using $.("#table-id").table().table("refresh") to make sure it's initialized still throws the same exception. This could be because the refresh method only applies to the tables using column toggle mode.

If you check the documentation for the refresh method, it states: "Updates the checkboxes in the menu to represent the columns that are currently visible"

So it shouldn't be applicable to reflow-mode in the first place.

But reflow-mode obviously needs a refresh mode so that rows can be added and formatted correctly.

spieszak

Re: Dynamically Adding Rows to Reflow Table

3 months ago

Just as an FYI adding the markup works. Just feels unbelievably hacky.
Also note, that what is pasted in below is POC... just to see if it would work.

<!DOCTYPE html> 
<html>
   <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1"> 
   <title>jQuery Mobile Docs - Responsive Table</title> 
   <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile-1.3.0-beta.1.css" />  
   <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>

   <script src="../../js/jquery.js"></script>
   <script src="../../docs/_assets/js/jqm-docs.js"></script>
   <script src="../../js/jquery.mobile-1.3.0-beta.1.js"></script>

</head>
<script type="text/javascript">
    function LogFunction(str) {
        console.log(str);
    }
    function addRow(tableForAppend) {
        LogFunction("addRow");
        var row = document.createElement('tr');
        tableForAppend.appendChild(row);
 
        return row;
    }
    function rowCount(tableForAppend) {
        LogFunction("rowCount");
        var iCount = 0;
        for (var i = 0, row; row = tableForAppend.rows[i]; i++) {
            iCount++;
        }
        return iCount;
    }
    function createDynFlowTblCell(row,stitle) {
        nc = nextCell(row);
        s = document.createElement('b');
        s.textContent = stitle;
        s.className = 'ui-table-cell-label';
        nc.appendChild(s);
        return nc;
    }
    function createDynFlowFirstTblCell(row, title) {
        theTh = document.createElement("th");
        s = document.createElement('b');
        s.textContent = title;
        s.className = 'ui-table-cell-label';
        theTh.appendChild(s);
        return theTh;
    }
    function addInputs(tableForAppend, row) {
        LogFunction("addInputs");
        idNum = rowCount(tableForAppend);
 
 
      
        theTh = createDynFlowFirstTblCell(row, 'Rank');
        theTh.appendChild(createTextElement("", "Qty" + idNum))
        row.appendChild(theTh);
 
        nc = createDynFlowTblCell(row, 'Movie Title');
       
        nc.appendChild(createTextElement("", "Weight" + idNum));
 
 
        nc = createDynFlowTblCell(row, 'Year');
       
        nc.appendChild(createTextElement("", "Length" + idNum));
 
        nc = createDynFlowTblCell(row, 'Rating');
      
        nc.appendChild(createTextElement("", "Width" + idNum));
 
        nc = createDynFlowTblCell(row, 'Reviews');
     
        nc.appendChild(createTextElement("", "Height" + idNum));
        
       
    }
    function nextCell(tableRow) {
        LogFunction("nextCell");
        var cell = document.createElement('td');
        tableRow.appendChild(cell);
        return cell;
    }
    function createTextElement(sValue, sId) {
        LogFunction("createTextElement");
        element = document.createElement("input");
        element.type = "text";
        element.value = sValue;
        element.name = sId;
        element.id = sId;
        element.onchange = function () { freightclass(this); };
        element.onkeydown = function (evt) { NumbersOnly(evt) };
 
        $(element).addClass("dynText");
 
        return element;
    }
 
 
    function addTableRow() {
        LogFunction("addTableRow");
        table = $('#movie-table')[0];
        table = table.tBodies[0]
 
        r = addRow(table);
        addInputs(table, r);
 
        $('.dynButton').button();
        $('.dynButton').buttonMarkup({ mini: true })
        $('.dynText').attr("data-mini", "true");
        
        $('.dynText').textinput();
        
        //$('#content - primary').trigger("create");
        $('#movie-table').table();//"refresh"
 
    }
</script> 
<body> 

   <div data-role="page" class="type-interior">

      <div data-role="header" data-theme="f">
      <h1>Table: Reflow</h1>
      <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
      <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
   </div><!-- /header -->
   
	<div data-role="content">
		<div class="content-primary">
			<h2>Reflow table mode</h2>
			<ul data-role="controlgroup" data-type="horizontal" class="localnav">
				<li><a href="table-reflow.html" data-role="button" data-transition="fade" class="ui-btn-active">Basics</a></li>
				<li><a href="reflow-options.html" data-role="button" data-transition="fade">Options</a></li>
				<li><a href="reflow-methods.html" data-role="button" data-transition="fade">Methods</a></li>
				<li><a href="reflow-events.html" data-role="button" data-transition="fade">Events</a></li>
			</ul>
			<p>The reflow table mode works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row. Since the HTML source order of a table prohibits styling a table to look like this,  the plugin dynamically adds a bit of  markup to make the display work (without affecting accessibility). Here is a demo of a basic table using reflow mode:</p>

    <div id="forTable">
    <table data-role="table" id="movie-table" data-mode="reflow" class="ui-responsive table-stroke ui-responsive">
      <thead>
        <tr>
          <th data-priority="1">Rank</th>
          <th data-priority="persist">Movie Title</th>
          <th data-priority="2">Year</th>
          <th data-priority="3"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
          <th data-priority="4">Reviews</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>1</th>
          <td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-rel="external">Citizen Kane</a></td>
          <td>1941</td>
          <td>100%</td>
          <td>74</td>
        </tr>
        <tr>
          <th>2</th>
          <td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-rel="external">Casablanca</a></td>
          <td>1942</td>
          <td>97%</td>
          <td>64</td>
        </tr>
        <tr>
          <th>3</th>
          <td><a href="http://en.wikipedia.org/wiki/The_Godfather" data-rel="external">The Godfather</a></td>
          <td>1972</td>
          <td>97%</td>
          <td>87</td>
        </tr>
        <tr>
          <th>4</th>
          <td><a href="http://en.wikipedia.org/wiki/Gone_with_the_Wind_(film)" data-rel="external">Gone with the Wind</a></td>
          <td>1939</td>
          <td>96%</td>
          <td>87</td>
        </tr>
        <tr>
          <th>5</th>
          <td><a href="http://en.wikipedia.org/wiki/Lawrence_of_Arabia_(film)" data-rel="external">Lawrence of Arabia</a></td>
          <td>1962</td>
          <td>94%</td>
          <td>87</td>
        </tr>
        <tr>
          <th>6</th>
          <td><a href="http://en.wikipedia.org/wiki/Dr._Strangelove" data-rel="external">Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</a></td>
          <td>1964</td>
          <td>92%</td>
          <td>74</td>
        </tr>
        <tr>
          <th>7</th>
          <td><a href="http://en.wikipedia.org/wiki/The_Graduate" data-rel="external">The Graduate</a></td>
          <td>1967</td>
          <td>91%</td>
          <td>122</td>
        </tr>
        <tr>
          <th>8</th>
          <td><a href="http://en.wikipedia.org/wiki/The_Wizard_of_Oz_(1939_film)" data-rel="external">The Wizard of Oz</a></td>
          <td>1939</td>
          <td>90%</td>
          <td>72</td>
        </tr>
        <tr>
          <th>9</th>
          <td><a href="http://en.wikipedia.org/wiki/Singin%27_in_the_Rain" data-rel="external">Singin' in the Rain</a></td>
          <td>1952</td>
          <td>89%</td>
          <td>85</td>
        </tr>
        <tr>
          <th>10</th>
          <td class="title"><a href="http://en.wikipedia.org/wiki/Inception" data-rel="external">Inception</a></td>
          <td>2010</td>
          <td>84%</td>
          <td>78</td>
        </tr>
      </tbody>
    </table>
    </div>
  <input id="test" onclick="addTableRow();" value="go" />

</body>
</html>

Top Reply

Response title

Attachments

jQuery Forum

Dynamically Adding Rows to Reflow Table

Replies(8)

Re: Dynamically Adding Rows to Reflow Table

Re: Dynamically Adding Rows to Reflow Table

Re: Dynamically Adding Rows to Reflow Table

Re: Dynamically Adding Rows to Reflow Table

Re: Dynamically Adding Rows to Reflow Table

Re: Dynamically Adding Rows to Reflow Table

Re: Dynamically Adding Rows to Reflow Table

Re: Dynamically Adding Rows to Reflow Table

Statistics

Tags

Actions

Related Posts