Question

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

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

e.g。

$.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调用将返回整个数据集）。

e.g。

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

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

    $.ajax({

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

我不确定在获取用户的搜索字符串输入并从API调用收到响应后如何正确实现过滤。

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

Answer 1

我设法通过构造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

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

1 个答案: