How to count the total number of table rows from ajax response? How do I create a search box for this 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>
- How to count the total number of lines from ajax response?
- How do I create a search box for searching 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>';}
source to share
Assuming the response to the request is plain HTML in your second code example, you can put it in a jQuery selector and then the find()
elements tr
in it, like this:
function fetch_data(){
$.ajax({
url: "menu_table.php",
method: "POST",
success: function(data) {
var rowCount = $('#menu_table_data').html(data).find('tr').length;
}
});
}
source to share
Just use Selector.length to get the number of lines. and even you don't need to initialize the variable if u calls directly $('#menu_table_data > tr').length
and that's it. EDITED
$('#menu_table_data tr').length;
EDIT
$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>';
use this.
source to share
How to count the total number of lines from ajax response?
You can use jQuery function .length
after loading content successfully 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;
}
});
}
source to share
after html change
$("#menu_table_data tr")
will give you all the rows of the table
to create a search box
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");
}
});
and you can hide negative results
.hideResult{
display: none;
}
also you can filter the data without adding it at the beginning. The $ function also accepts parameters besides selectors.
eg
var somehtml = '<div>some text</div>';
$(somehtml).text() //this will gives you 'some text'
source to share
If you only want to search on the page, you can use this:
$.extend($.expr[":"], {
"containsIN": function(elem, i, match, array) {
return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
you can use this html onKeyUp:
function searchOnKeyUp(input,selector){
$(selector).each(function(){ $(this).hide(); })
$(selector + ':containsIN('+input.value+')').show();
}
And for another question I can say that I think you can use like this:
$('#menu_table_data').children('tr').length;
source to share