首页 文章

使用AJAX响应和jQuery动态生成，搜索和过滤表

提问于
浏览 次
0

我正在尝试使用AJAX和jQuery生成，搜索和过滤HTML表 .

我能够生成一个完整的表，对API进行ajax调用（为表提供数据），然后获取结果并使用.append（） .

例如

$.ajax({
    url: 'SomeURL',
    dataType:'jsonp',           
    success: function(data){

    $.each(data, function(key, value) {

        $("#mytable").append($('<tr>')
        .append($('<td>')
        .append(value.name))
        .append($('<td>')
        .append(value.age))
        <etc>

现在我已经生成了表，我试图在jQuery中使用.keyup（）函数来过滤表的结果 . 但是要做到这一点，我有另一个API调用，我可以使用 . 此调用将返回特定于我的输入搜索查询的数据（而初始API调用返回 entire 数据集） .

例如

$("#search").keyup(function() {

    var searchVal = $(this).val();

    $.ajax({

        url: 'SomeURL?query=' + searchVal,
        dataType:'jsonp',           
        success: function(data){
            $.each(data, function(key, value) {
            <etc>

一旦我获取了用户的搜索字符串输入并从API调用接收到响应，我不确定如何正确实现过滤 .

另外，我想知道我目前用于动态生成表的方法是否合适，或者是否有更好的方法来实现它？

javascript jquery html ajax

1 回答

  • 0

    我设法通过构造一个HTML表字符串并用第二个API调用中的值填充它来解决这个问题 .

    在将过滤后的结果附加到它之前，我使用jQuery清空了现有的完整表 . 这允许我在键入搜索查询时动态过滤表格 .

    $("#search").keyup(function() {

    var searchVal = $(this).val();

    // empty table content here before appending filtered data

    $.ajax({

        url: 'SomeURL?query=' + searchVal,
        dataType:'jsonp',           
        success: function(data){
            $.each(data, function(key, value) {
            // construct the table string here
    回复于

相关问题