jQM 1.4 dynamic table with filter

by Tom Scott

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="page1">
    <div data-role="header" data-position="fixed">
         <h1>My page</h1> 
    </div>
    <div role="main" class="ui-content">
        <form>
            <input id="filterTable-input" data-type="search" />
        </form>
        <div id="tableContainer">
        </div>
    </div>
</div>

JavaScript

$(document).on("pagecreate", "#page1", function(){
   
    var thetable = '<table data-role="table" data-filter="true" data-input="#filterTable-input" id="thetable" class="ui-responsive table-stroke">';

    thetable += '<thead><tr><th>Number</th><th>Name</th><th>Address</th><th>Address</th></tr></thead>';
    thetable += '<tbody>';
     for (x = 0; x <= 175; x++)    //Asset.length
            {
               thetable += '<tr>';
               thetable += '<td>' + x + 'a</td>'
               thetable += '<td>' + x + 'b</td>'
               thetable += '<td>' + x + 'c</td>'
               thetable += '<td>' + x + 'd</td>'
               thetable += '</tr>';
            }
    thetable += '</tbody>';
    thetable += '</table>';
    
    $("#tableContainer").empty().append(thetable);    
    $("#thetable").table().filterable( );
});