如何使用Ajax在不同的页面中呈现搜索结果

How to render search results in a different page with Ajax

本文关键字：搜索结果 Ajax 何使用      更新时间：2023-09-26

我有一个网页，在一个php页面中配置了搜索表单，在另一个php页中配置了带有搜索结果的表，我有以下javascript函数，可以用搜索结果渲染表：

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";
    }
});

}

我有更多的JavaScript代码，但我认为这足以说明我的问题。如果搜索表单在另一个php页面中，我该如何呈现该表？

提前感谢！

首先，您可能不希望混合使用三种技术，而尝试只使用一种：

  1. 将HTML写成字符串可以用JQuery代替。例如：

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

  2. 可以用JQuery替换通过本机javascript的Id寻址元素。（第一种技术更快，但这更简单，使用一种技术而不是混合它们。例如：

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

    您可能希望生成这样的寻呼机：

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

  3. 我想你应该至少按照它的类别来称呼表分类器：

    $("table.tablesorter")

  4. 如果你在运行中生成结构，你可能更喜欢使用"实时"绑定器而不是点击绑定器-点击绑定器将只处理那些已经由浏览器构建的结构：

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

您可能会将表/表单传递给具有POST的另一个页面。

相关文章：