How to count total number of table rows from ajax response? How to create search field for that table?

I am getting table data from ajax response like this :

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

fetch_data();

Table:

<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. How do I count total number of rows from ajax response?
2. How can I create a search field to search from this table?

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