jquery - tiene - ¿Cómo contar el número total de filas de la tabla de la respuesta ajax? ¿Cómo crear un campo de búsqueda para esa tabla?

contar tr de una tabla javascript

Question

Estoy obteniendo datos de la tabla de una respuesta ajax como esta:

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

Mesa:

<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. ¿Cómo cuento el número total de filas de la respuesta ajax?
2. ¿Cómo puedo crear un campo de búsqueda para buscar desde esta tabla?

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

Si desea buscar solo en la página, puede usar eso:

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

puedes usar ese html onKeyUp:

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

Y para otra pregunta, puedo decir que creo que puedes usar eso:

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

Answer 2

Simplemente use Selector.length para obtener el recuento de filas. e incluso no necesita inicializar una variable si llama directamente a la $(''#menu_table_data > tr'').length y eso es todo. EDITADO

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

EDITAR

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

utilizar esta..

Answer 3

Suponiendo que la respuesta a la solicitud es el HTML simple en el segundo ejemplo de código, puede colocarlo en un selector de jQuery y luego find() los elementos tr en él, como este:

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

Answer 4

después de cambiar html

$("#menu_table_data tr")

le dará todas las filas de la tabla

para crear un campo de búsqueda

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");
}
});

y puedes esconder resultados negativos

.hideResult{
display: none;
}

también puede filtrar datos sin agregarlos al principio. $ function toma otros parámetros además de los selectores.

por ejemplo

var somehtml = ''<div>some text</div>'';
$(somehtml).text() //this will gives you ''some text''

Answer 5

¿Cómo cuento el número total de filas de la respuesta ajax?

Puede usar la función JQuery .length después de cargar con éxito los contenidos de 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;
}
});
}