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

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>

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

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>';

用这个..