Question

我从这样的ajax响应中获取表数据：

function fetch_data(){
  $.ajax({
    url: "menu_table.php",
    method: "POST",
    success: function(data) {
      $('#menu_table_data').html(data);
    }
  });
}

fetch_data();

表：

<table id="menu_table">
  <thead>
    <tr>
      <th class="centerText" data-field="item_id">ID</th>
      <th class="centerText" data-field="name">Name</th>
      <th class="centerText" data-field="price">Price</th>
      <th class="centerText" data-field="type">Type</th>
      <th class="centerText" data-field="image">Image</th>
      <th class="centerText" data-field="description">Description</th>
      <th class="centerText" data-field="cooking">Instructions</th>
      <th class="centerText" data-field="ingredients">Ingredients</th>
      <th class="centerText" data-field="warnings">Warnings</th>
      <th class="centerText" data-field="Storage">Storage</th>
      <th class="centerText" data-field="Size">Size</th>
      <th class="centerText" data-field="edit">Edit</th>
      <th class="centerText" data-field="delete">Delete</th>
    </tr>
  </thead>
  <tbody style="text-align:center;" id="menu_table_data"></tbody>
</table>

如何计算ajax响应的总行数？
如何创建搜索字段以从此表中搜索？

menu_table.php：

while($data = mysqli_fetch_array($search))
{
$output .= '<tr><td>'.$data['id'].'</td>
            <td><div class="text_area">'.$data['name'].'</div></td>
            <td>'.$data['price'].'</td>
            <td>'.$data['type'].'</td>
            <td><div id="div_image">
            <img src="uploaded_images/'.$data['image'].'" class="thumbnail" height="100" width="80" /></div></td>
            <td><div class="text_area">'.$data['description'].'</div></td>
            <td><div class="text_area">'.$data['cooking_instructions'].'<div></td>
            <td><div class="text_area">'.$data['ingredients'].'</div></td>
            <td><div class="text_area">'.$data['allergen_warnings'].'</div></td>
            <td>'.$data['storage_instructions'].'</td>
            <td>'.$data['case_size'].'</td>   <td><a class="btn btn-primary glyphicon glyphicon-edit" role="button" onclick="EditModal(`'.$data['id'].'`,`'.$data['name'].'`,`'.$data['price'].'`,`'.$data['description'].'`,`'.$data['type'].'`,`'.$data['cooking_instructions'].'`,`'.$data['ingredients'].'`,`'.$data['allergen_warnings'].'`,`'.$data['storage_instructions'].'`,`'.$data['case_size'].'`,`'."uploaded_images/".$data['image'].'`)"></a></td>   <td><a class="btn btn-danger glyphicon glyphicon-remove" role="button" onclick="DeleteModal('.$data['id'].')"></a></td><tr>';}

Answer 1

只需使用Selector.length获取行数。如果您直接调用$('#menu_table_data > tr').length并且那就是它，那么即使您不需要初始化变量。已编辑

$('#menu_table_data tr').length;

修改

$output .= '<tr><td>'.$data['id'].'</td> <td><div class="text_area">'.$data['name'].'</div></td> <td>'.$data['price'].'</td> <td>'.$data['type'].'</td> <td><div id="div_image"> <img src="uploaded_images/'.$data['image'].'" class="thumbnail" height="100" width="80" /></div></td> <td><div class="text_area">'.$data['description'].'</div></td> <td><div class="text_area">'.$data['cooking_instructions'].'<div></td> <td><div class="text_area">'.$data['ingredients'].'</div></td> <td><div class="text_area">'.$data['allergen_warnings'].'</div></td> <td>'.$data['storage_instructions'].'</td> <td>'.$data['case_size'].'</td> <td><a class="btn btn-primary glyphicon glyphicon-edit" role="button" onclick="EditModal(`'.$data['id'].'`,`'.$data['name'].'`,`'.$data['price'].'`,`'.$data['description'].'`,`'.$data['type'].'`,`'.$data['cooking_instructions'].'`,`'.$data['ingredients'].'`,`'.$data['allergen_warnings'].'`,`'.$data['storage_instructions'].'`,`'.$data['case_size'].'`,`'."uploaded_images/".$data['image'].'`)"></a></td> <td><a class="btn btn-danger glyphicon glyphicon-remove" role="button" onclick="DeleteModal('.$data['id'].')"></a></td></tr>';

使用此.. ..

Answer 2

假设对您的请求的响应是第二个代码示例中的纯HTML，您可以将它放在jQuery选择器中，然后find()中的tr元素，如下所示：

function fetch_data(){
  $.ajax({
    url: "menu_table.php",
    method: "POST",
    success: function(data) {
      var rowCount = $('#menu_table_data').html(data).find('tr').length;
    }
  });
}

Answer 3

如何计算ajax响应的总行数？

您可以在成功加载.length内容后使用JQuery tbody函数。

function fetch_data(){ $.ajax({ url: "menu_table.php", method: "POST", success: function(data) { $('#menu_table_data').html(data); var no_of_rows = $('#menu_table_data').find('tr').length; } }); }

Answer 4

更改html后

$("#menu_table_data tr")

将为您提供所有表格行

创建搜索字段

var searchKey = "some given key in some form";
$("#menu_table_data tr").each(function(item){
 if(item.text().indexOf(searchKey)>=0){
     item.addClass("hideResult");
 }else{
     item.removeClass("hideResult");
 }
});

您可以隐藏否定结果

.hideResult{
    display: none;
}

你也可以过滤数据而不必在开头附加数据。 $ function也会选择除选择器之外的参数。

例如

var somehtml = '<div>some text</div>';

$(somehtml).text() //this will gives you 'some text'

Answer 5

如果您只想在页面上搜索，可以使用：

$.extend($.expr[":"], {
        "containsIN": function(elem, i, match, array) {
            return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
        }
    });

你可以使用那个html onKeyUp：

function searchOnKeyUp(input,selector){
        $(selector).each(function(){ $(this).hide(); })
        $(selector + ':containsIN('+input.value+')').show();
    }

对于其他问题，我可以说我认为你可以这样使用：

$('#menu_table_data').children('tr').length;

如何计算ajax响应中的表行总数？如何为该表创建搜索字段？

5 个答案: