Question

I have a web page configured with the search form in one php page and the table with search results in another and I have the following javascript function that renders the table with the search results:

function createRestaurantsTable() {
var table = document.createElement('table');
var str = '<table cellspacing="1" class="tablesorter">'; 
str += '<thead><tr><th>Nome</th><th>Morada</th><th>Distancia</th></tr></thead>';
for ( var i=0; i< restaurantArr.length; i++){
    str += '<tr><td><center class="IDcell">' + restaurantArr[i].name + '</center></td><td><center>' + restaurantArr[i].address + '</center></td><td><center>' + restaurantArr[i].distance.toFixed(2) + ' m</center></td></tr>';
}
str += '</table>';

str += "<div id='pager' class='pager'>";
str += "<form>"
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/first.png' class='first'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/prev.png' class='prev'/>"
str += "<input type='text' class='pagedisplay'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/next.png' class='next'/>";
str += "<img src='Tools/jquery.tablesorter/addons/pager/icons/last.png' class='last'/>";
str += "<select class='pagesize'>"
str += "<option selected='selected'  value='5'>5</option>"
str += "<option value='10'>10</option>";
str += "<option  value='15'>15</option>";
str += "<option  value='20'>20</option>";
str += "<option  value='25'>25</option>";
str += "<option  value='30'>30</option>";
str += "<option  value='35'>35</option>";
str += "<option  value='40'>40</option>";
str += "<option  value='45'>45</option>";
str += "<option  value='50'>50</option>";
str += "</select>";
str += "</form>";
str += "</div>"; 

document.getElementById('restaurants_table').innerHTML = str;

$("table").tablesorter({headers: { 0:{ sorter: false }, 1:{ sorter: false }, 2: { sorter: false }}, widthFixed: true ,widgets: ['zebra']}).tablesorterPager({container: $("#pager")});
$('tr').click(function(event) {
    var id = $(this).find(".IDcell").html();
    if(id) {
        window.location = "index.php?action=register_details&details_view_id=" + id + "&operation=v";
    }

}); 

}

I have a lot more JavaScript code but i think this is enough to show my problem.
How do i render the table if the search form is in another php page?

Thanks in advance!

Answer 1

Firstly, you might want not to mix three techniques and try to use just one:

1. Writing HTML as string can be replaced with JQuery. For instance:

   $("<div>").attr("id", "pager").append(...)   
   

2. Addressing element by Id by native javascript can be replace with JQuery. (The first technique is faster, but this is rather about simplicity and using one technique instead of mixing them. For inst.:

   $("#restaurant_table).html(insertedHtml);
   

   You might event want to generate your pager like this:

   $("<div>").attr("id", "pager").append(...).appendTo("#restaurant_table");
   

3. I guess you should address the tablesorter at least by its class:

   $("table.tablesorter")
   

4. If you generate the structures on-the-fly, you might rather use “live” binder instead of the click binder – the click binder will address only those, which are already constructed by the browser:

   $("table.tablesorter tr").live("click", function(event) {...});