jquery - كيفية حساب إجمالي عدد صفوف الجدول من استجابة أجاكس؟ كيفية إنشاء حقل بحث لهذا الجدول؟




html ajax (4)

إذا كنت تريد البحث فقط في الصفحة يمكنك استخدام ذلك:

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

يمكنك استخدام هتمل أونكيوب:

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

وبالنسبة لسؤال آخر أستطيع أن أقول أنني أعتقد أنه يمكنك استخدام مثل هذا:

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

أنا الحصول على بيانات الجدول من استجابة أجاكس مثل هذا:

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. كيف يمكنني حساب العدد الإجمالي للصفوف من استجابة أجاكس؟
  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>';}  

بعد تغيير هتمل

$("#menu_table_data tr")

سوف تعطيك جميع الصفوف الجدول

لإنشاء حقل بحث

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

ويمكنك إخفاء النتائج السلبية

.hideResult{
    display: none;
}

كما يمكنك تصفية البيانات دون إلحاق ذلك في البداية. $ وظيفة يأخذ أبراميترز أخرى من محددات أيضا.

فمثلا

var somehtml = '<div>some text</div>';

$(somehtml).text() //this will gives you 'some text'

ما عليك سوى استخدام Selector.length للحصول على عدد الصفوف. وحتى أنك لا تحتاج إلى تهيئة متغير إذا ش استدعاء مباشرة $('#menu_table_data > tr').length وهذا كل شيء. EDITED

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

استخدم هذا..


كيف يمكنني حساب العدد الإجمالي للصفوف من استجابة أجاكس؟

هل يمكن استخدام مسج .length الدالة بعد بنجاح تحميل محتويات 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;
    }
  });
}




datatables