title: How to count total number of table rows from ajax response? How to create search field for that table?
body: <p>I am getting table data from ajax response like this :</p>
  
  <pre><code>function fetch_data(){
    $.ajax({
      url: "menu_table.php",
      method: "POST",
      success: function(data) {
        $('#menu_table_data').html(data);
      }
    });
  }
  
  fetch_data();
  </code></pre>
  
  <p>Table:</p>
  
  <pre><code>&lt;table id="menu_table"&gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th class="centerText" data-field="item_id"&gt;ID&lt;/th&gt;
        &lt;th class="centerText" data-field="name"&gt;Name&lt;/th&gt;
        &lt;th class="centerText" data-field="price"&gt;Price&lt;/th&gt;
        &lt;th class="centerText" data-field="type"&gt;Type&lt;/th&gt;
        &lt;th class="centerText" data-field="image"&gt;Image&lt;/th&gt;
        &lt;th class="centerText" data-field="description"&gt;Description&lt;/th&gt;
        &lt;th class="centerText" data-field="cooking"&gt;Instructions&lt;/th&gt;
        &lt;th class="centerText" data-field="ingredients"&gt;Ingredients&lt;/th&gt;
        &lt;th class="centerText" data-field="warnings"&gt;Warnings&lt;/th&gt;
        &lt;th class="centerText" data-field="Storage"&gt;Storage&lt;/th&gt;
        &lt;th class="centerText" data-field="Size"&gt;Size&lt;/th&gt;
        &lt;th class="centerText" data-field="edit"&gt;Edit&lt;/th&gt;
        &lt;th class="centerText" data-field="delete"&gt;Delete&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody style="text-align:center;" id="menu_table_data"&gt;&lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <ol>
  <li>How do I count total number of rows from ajax response?</li>
  <li>How can I create a search field to search from this table?</li>
  </ol>
  
  <p><strong>menu_table.php:</strong></p>
  
  <pre><code>while($data = mysqli_fetch_array($search))
  {
  $output .= '&lt;tr&gt;&lt;td&gt;'.$data['id'].'&lt;/td&gt;
              &lt;td&gt;&lt;div class="text_area"&gt;'.$data['name'].'&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;'.$data['price'].'&lt;/td&gt;
              &lt;td&gt;'.$data['type'].'&lt;/td&gt;
              &lt;td&gt;&lt;div id="div_image"&gt;
              &lt;img src="uploaded_images/'.$data['image'].'" class="thumbnail" height="100" width="80" /&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="text_area"&gt;'.$data['description'].'&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="text_area"&gt;'.$data['cooking_instructions'].'&lt;div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="text_area"&gt;'.$data['ingredients'].'&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;&lt;div class="text_area"&gt;'.$data['allergen_warnings'].'&lt;/div&gt;&lt;/td&gt;
              &lt;td&gt;'.$data['storage_instructions'].'&lt;/td&gt;
              &lt;td&gt;'.$data['case_size'].'&lt;/td&gt;   &lt;td&gt;&lt;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'].'`)"&gt;&lt;/a&gt;&lt;/td&gt;   &lt;td&gt;&lt;a class="btn btn-danger glyphicon glyphicon-remove" role="button" onclick="DeleteModal('.$data['id'].')"&gt;&lt;/a&gt;&lt;/td&gt;&lt;tr&gt;';}  
  </code></pre>