تصفية البيانات باستخدام تقنية AJAX

و عليكم السلام و رحمة الله . 

أظن أنك تقصد فلترة بيانات معينة بحسب الفئات التي تنتمي لها إعتبارا لهاته العلاقة . 

مثال : 

فلترة المنتجات بحسب الفئات التي تنتمي لها .

لنقم بتجزئة الأمر إلى فكرتين : 

بيانات محدودة

في حالة محدودية الفئات لديك يمكنك الإستغناء عن AJAX تماما و طباعة كامل الفئات مع كامل البيانات , و التعامل مع إخفاء بيانات الفئة الواحدة عن طريق أصناف CSS عادية و بعض الجافاسكربت . 

سيمكن ذلك كالتالي : 

• في ملف المتحكم : جلب كامل الفئات و تمريرها إلى ملف العرض . 

public function index(){
   
   $query = $this->db->get('categories');
   $data['categories'] = $query->result();

   $query = $this->db->get('products');
   $data['products'] = $query->result();

   $this->load->view('categories_view' ,$data);
}

• في ملف العرض , عرض كامل الفئات : 

  <?php foreach($categories as $c):?>
  <div>
      <label for="cat_<?php echo $c['id']; ?>"> <?php echo $c['name']; ?> </label>
      <input type="checkbox" id="cat_<?php echo $c['id']; ?>" value="<?php echo $c['id']; ?>">
  </div>
  <?php endforeach;?>

  مرفقة بكامل المنتجات : 

  <?php foreach($products as $p):?>
  <div class="product c_<?php echo $p['category_id']; ?>">
     <h2><?php echo $p['name']; ?></h2>
  </div>
  <?php endforeach;?>

   

ثم لنقم بإضافة التفاعلية التي تقوم بعمل التالي : 

• عند تحديد أي مربع تحقق يتم تخزين قيمته و تحديدها . 
• يتم إخفاء كامل المنتجات . 
• يتم إظهار تلك التي تمتلك صنفا كالتالي : [c_[category_id . 

مثال عملي : 

• عند تحديد مربع تحقق الفئة بالعنوان "ملابس رجال" يتم تخزين القيمة 5 و تحديدها . 
• يتم إخفاء كامل المنتجات . 
• يتم إظهار تلك التي تمتلك صنفا كالتالي : c_5 .   

ستفي الشيفرة التالية بذات الغرض : 

$("input[type='checkbox']").change(function() {
    if(this.checked) {
        let target_id = $(this).val();
        
        $('product_container').hide();
        $('c_' + target_id).show();
    }
});

بيانات غير محدودة 

سنضطر في هذا إلى إخفاء كامل العناصر (المنتجات مثلا) , و إظهار كامل الفئات : 

• لنقم بتغيير محتوى ملف المتحكم كالتالي : 

  public function index(){
     
     $query = $this->db->get('categories');
     $data['categories'] = $query->result();
  
     $this->load->view('categories_view' ,$data);
  }
  
  
  public function get_products_of_category(){
  
     $c_id = $this->input->get('category_id');
  
     $query = $this->db->get('products')->where('category_id' ,$c_id);
     
     return $query->result();
  
  }

   

• على أن يحتوي ملف العرض الهيكلية التالية : 

  <?php foreach($categories as $c):?>
  <div>
      <label for="cat_<?php echo $c['id']; ?>"> <?php echo $c['name']; ?> </label>
      <input type="checkbox" id="cat_<?php echo $c['id']; ?>" value="<?php echo $c['id']; ?>">
  </div>
  <?php endforeach;?>
  
  
  <div id="products_container" ></div>

   

سنحتاج الان تعديل التفاعلية لتصبح كالتالي :   

• عند تحديد أي مربع تحقق يتم تخزين قيمته و تحديدها . 
• يتم حذف أي عناصر لمنتجات تظهر . 
• يتم إرفاق طلبية AJAX لجلب بيانات المنتجات إلى عنوان URL مرفق بمعرف الفئة .    

مثال عملي : 

• عند تحديد مربع تحقق الفئة بالعنوان "ملابس رجال" يتم تخزين القيمة 5 و تحديدها . 
• يتم حذف أي عناصر لمنتجات تظهر و ذلك تجنبا لإضافة أي بيانات لا تهم الفئة الحالية . 
• يتم إرفاق طلبية AJAX لجلب بيانات المنتجات إلى العنوان التالي : 

  https://domain.info/categories/5/products

   

• عند نجاح الطلبية , يتم عرض كامل المنتجات التي تم جلبها داخل حاوي المنتجات . 

يترجمه : 

$("input[type='checkbox']").change(function() {
    if(this.checked) {
        let target_id = $(this).val();
        
        $('#products_container').empty();
      
        $.get("https://domain.info/categories/"+ target_id +"/products", function(data, status){
            
             data.forEach(function(item){
                 $('#products_container').append('<h2>'+ item['title'] +'</h2>');
             });
            
        });
    }
});

و بالطبع سيجب تعريف المسارات اللازمة في ملف routes.php  و إرفاقها بالمتحكمات و التوابع المتعلقة بها . 

سيمكن تخصيص العملية أكثر و جعلها عملية أكثر , كأن يتم إضافة حاو لكل منتج , و طباعة إسم المنتج بجانب غلافه و تخصيص تصميم هذا الحاو و غيرها من الأفكار .. 

بتاريخ 12 ساعات قال Adnane Kadri:

و عليكم السلام و رحمة الله . 

أظن أنك تقصد فلترة بيانات معينة بحسب الفئات التي تنتمي لها إعتبارا لهاته العلاقة . 

مثال : 

فلترة المنتجات بحسب الفئات التي تنتمي لها .

لنقم بتجزئة الأمر إلى فكرتين : 

اولا شكرا لك و يعطيك العافية على كتابة هذا الشرح .

ولكن في المشروع الذي أعمل عليه , أنا مجبر على استخدام الـ AJAX . فقد بحثت عن عدة طرق و لكن لم افهمها بشكل جيد و لم اعرف من أين سأبدا

أريد من كود الـ ajax أن يكون هكذا 

 $.ajax({

                    type: "POST",

                    url: "CS.aspx/GetCustomers",

                    data: '{searchTerm: "' + text + '"}',

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (response) {

او أية طريقة اخرى .

 الفيديو المرفق لتقريب الصورة , ولكن ببيانات مختلفة  حيث اريد أن أعرض و أفلتر  الجدول الخاص بالـ database حسب الصنف (أي أريد عرض البيانات في ال view)  .

مثال : 

• لدي 5 تصنيفات  :

  fruits 
  vegetables 
  electronics 
  meats 
  clothes

    في جدول البيانات , و كل تصنيف لديه منتجات متعلقة به .

أريد عند الضغط على ال checkbox الخاص لكل تصنيف, عرض  و فلترة المنتجات تبعا للتصنيف , اي إرجاع جدول البيانات الخاص بال، items حسب ال، category الداخلة أو الخاصة بها  .

اقتباس

الفيديو المرفق لتقريب الصورة , ولكن ببيانات مختلفة  حيث اريد أن أعرض و أفلتر  الجدول الخاص بالـ database حسب الصنف (أي أريد عرض البيانات في ال view)  .

مثال : 

• لدي 5 تصنيفات  :

  
  fruits 
  vegetables 
  electronics 
  meats 
  clothes

    في جدول البيانات , و كل تصنيف لديه منتجات متعلقة به .

أريد عند الضغط على ال checkbox الخاص لكل تصنيف, عرض  و فلترة المنتجات تبعا للتصنيف , اي إرجاع جدول البيانات الخاص بال، items حسب ال، category الداخلة أو الخاصة بها  .

في الحقيقة , هذا ما تم وصفه في التعليق السابق . و قد تم تجزئته إلى إحتمالين : 

• في حالة محدودية العناصر المنتمية للفئات : أين تم تفضيل عرض كل المحتوى بالصفحة و التلاعب بإظهاره و إخفاءه بحسب التفاعل مع مربعات التحقق . 
• في حالة كثرتها : أين تم تأويل العمل بالأجاكس لعرض الفئات فقط , و إرسال طلبات الأجاكس عند التحقق من المربعات لجلب بيانات معينة تخص الفئة المحدد مربع تحققها .   

لاحظ تماثل منطق المثالين مع مطلوبك تماما : 

المثال 1 :

بتاريخ 56 دقائق مضت قال Mohammad Kiblawi:

• عند تحديد مربع تحقق الفئة بالعنوان "ملابس رجال" يتم تخزين القيمة 5 و تحديدها . 
• يتم إخفاء كامل المنتجات . 
• يتم إظهار تلك التي تمتلك صنفا كالتالي : c_5 . 

 المثال 2 : 

بتاريخ 55 دقائق مضت قال Mohammad Kiblawi:

عند تحديد مربع تحقق الفئة بالعنوان "ملابس رجال" يتم تخزين القيمة 5 و تحديدها . 

• يتم حذف أي عناصر لمنتجات تظهر و ذلك تجنبا لإضافة أي بيانات لا تهم الفئة الحالية . 
• يتم إرفاق طلبية AJAX لجلب بيانات المنتجات إلى العنوان التالي : 

  
  https://domain.info/categories/5/products

   

• عند نجاح الطلبية , يتم عرض كامل المنتجات التي تم جلبها داخل حاوي المنتجات . 

بتاريخ 57 دقائق مضت قال Mohammad Kiblawi:

أريد من كود الـ ajax أن يكون هكذا 

 $.ajax({

                    type: "POST",

                    url: "CS.aspx/GetCustomers",

                    data: '{searchTerm: "' + text + '"}',

                    contentType: "application/json; charset=utf-8",

                    dataType: "json",

                    success: function (response) {

لا يقترح أن يكون طلب الأجاكس من النوع POST , فهذا الأخير موجود خصيصا لإرسال بيانات من الواجهة الأمامية للخلفية على عكس GET الذي هو موجود لعكسها . 

أظن أن أفضل و أقصر طريق هي ما تم وصفها سابقا , فنحن لا نقوم بإرسال أية بيانات للواجهة الخلفية . على عكس ذلك نحن نقوم بتمرير ما نحتاج في عنوان الـ URL الخاص بنا مباشرة . 

وهو نفس المتبع في الفيديو , على أن صاحب الفيديو يعتمد تخصيص الفلتر و إضافة مميزات أخرى بجانب غرضه الأساسي , و بالطبع يمكنك ذلك فالعملية عملية تطوير إبتداءا من فكرة صغيرة و بدائية.  

بتاريخ 15 ساعات قال Adnane Kadri:

في الحقيقة , هذا ما تم وصفه في التعليق السابق . و قد تم تجزئته إلى إحتمالين : 

• في حالة محدودية العناصر المنتمية للفئات : أين تم تفضيل عرض كل المحتوى بالصفحة و التلاعب بإظهاره و إخفاءه بحسب التفاعل مع مربعات التحقق . 
• في حالة كثرتها : أين تم تأويل العمل بالأجاكس لعرض الفئات فقط , و إرسال طلبات الأجاكس عند التحقق من المربعات لجلب بيانات معينة تخص الفئة المحدد مربع تحققها .   

لاحظ تماثل منطق المثالين مع مطلوبك تماما : 

المثال 1 :

 المثال 2 : 

 

لا يقترح أن يكون طلب الأجاكس من النوع POST , فهذا الأخير موجود خصيصا لإرسال بيانات من الواجهة الأمامية للخلفية على عكس GET الذي هو موجود لعكسها . 

أظن أن أفضل و أقصر طريق هي ما تم وصفها سابقا , فنحن لا نقوم بإرسال أية بيانات للواجهة الخلفية . على عكس ذلك نحن نقوم بتمرير ما نحتاج في عنوان الـ URL الخاص بنا مباشرة . 

وهو نفس المتبع في الفيديو , على أن صاحب الفيديو يعتمد تخصيص الفلتر و إضافة مميزات أخرى بجانب غرضه الأساسي , و بالطبع يمكنك ذلك فالعملية عملية تطوير إبتداءا من فكرة صغيرة و بدائية.  

السلام عليكم 

لم اعرف كيف اطبق ال jquery ajax ولكن عرضت الجداول في ال view

.9840

بتاريخ 47 دقائق مضت قال Mohammad Kiblawi:

السلام عليكم 

لم اعرف كيف اطبق ال jquery ajax ولكن عرضت الجداول في ال view

.9840

لنقم بإستكمال عملك و تحقيق ذات الغرض , ثم سنأتي لطريقة الأجاكس بعد ذلك : 

• في ملف العرض display_items.php : 

نقوم بإستعمال حقل من نوع radio بدلا عن checkbox كونه عملي أكثر , و لنتأكد من إعطاء كامل الحقول ذات الإسم و ذلك كالتالي : 

<?php foreach ($category_data->result_array() as $row) { ?>
<label>
<input name="filter_cats" type="radio" value="<?php echo $row['category_name'];?>">
	<?php echo $row['category_name']?>
</label>
<?php } ?>

لنتأكد من إعطاء كامل أسطر الجدول صنفا عاما كالتالي : 

item

و صنفا اخر خاصا كالتالي : 

item_[category_name]

ليصبح : 

foreach($result as $row):
   echo "<tr class='item item_".$row->category_name."'>";

ثم لنقم بإضافة التفاعلية التالية : 

$("input[type='radio']").change(function() {
        if(this.checked) {
            let target = $(this).val();
            
            $('.item').hide();
            $('.item_' + target).show();
        }
});

يلخص هذا الطريقة الأولى . هاته الطريقة عملية و بسيطة في حالة محدودية المنتجات لديك , و لكن إن كنت مضطرا لإستعمال AJAX فسنلجأ لإستعمال الطريقة الثانية : 

و لكن هاته الطريقة أيضا غير عملية كونك لا تقوم بفصل جدول العناصر عن جدول الفئات , بل تضيف عمودا خاصا لإسم الفئة داخل جدول العناصر , و في هاته الحالة لن يمكنك الإستعلام من جدول منفصل بل من ذات الجدول الذي تريد جلب العناصر منه . و يجعل هذا العملية غير منطقية و غير عملية . فلا يوجد داع من : 

•  الإستعلام مرة أولى من الجدول tbl_items لقراءة أسماء الفئات . 
• الإستعلام مرة ثانية من الجدول tbl_items لقراءة المنتجات الحاملة لإسم فئة معين . 

و بالتالي فإن أفضل حل هو ما تم إعتماده في الطريقة الأولى . خصوصا و أن المسار , ملف العرض و المتحكم يخصون المنتجات . 

بتاريخ On 10/30/2021 at 16:29 قال Adnane Kadri:

لنقم بإستكمال عملك و تحقيق ذات الغرض , ثم سنأتي لطريقة الأجاكس بعد ذلك : 

• في ملف العرض display_items.php : 

نقوم بإستعمال حقل من نوع radio بدلا عن checkbox كونه عملي أكثر , و لنتأكد من إعطاء كامل الحقول ذات الإسم و ذلك كالتالي : 

<?php foreach ($category_data->result_array() as $row) { ?>
<label>
<input name="filter_cats" type="radio" value="<?php echo $row['category_name'];?>">
	<?php echo $row['category_name']?>
</label>
<?php } ?>

لنتأكد من إعطاء كامل أسطر الجدول صنفا عاما كالتالي : 

item

و صنفا اخر خاصا كالتالي : 

item_[category_name]

ليصبح : 

foreach($result as $row):
   echo "<tr class='item item_".$row->category_name."'>";

ثم لنقم بإضافة التفاعلية التالية : 

$("input[type='radio']").change(function() {
        if(this.checked) {
            let target = $(this).val();
            
            $('.item').hide();
            $('.item_' + target).show();
        }
});

يلخص هذا الطريقة الأولى . هاته الطريقة عملية و بسيطة في حالة محدودية المنتجات لديك , و لكن إن كنت مضطرا لإستعمال AJAX فسنلجأ لإستعمال الطريقة الثانية : 

و لكن هاته الطريقة أيضا غير عملية كونك لا تقوم بفصل جدول العناصر عن جدول الفئات , بل تضيف عمودا خاصا لإسم الفئة داخل جدول العناصر , و في هاته الحالة لن يمكنك الإستعلام من جدول منفصل بل من ذات الجدول الذي تريد جلب العناصر منه . و يجعل هذا العملية غير منطقية و غير عملية . فلا يوجد داع من : 

•  الإستعلام مرة أولى من الجدول tbl_items لقراءة أسماء الفئات . 
• الإستعلام مرة ثانية من الجدول tbl_items لقراءة المنتجات الحاملة لإسم فئة معين . 

و بالتالي فإن أفضل حل هو ما تم إعتماده في الطريقة الأولى . خصوصا و أن المسار , ملف العرض و المتحكم يخصون المنتجات . 

السلام عليكم 

عذرا على مطلباتي و استفساراتي الكثيرة و لكنني بحاجة لمساعدة

لقد قمت بعمل جدولين مثل ما طلبت و ايضا اصلحت بعض الاخطاء و قمت بعمل jquery لتصفية ال checkboxes

الفلترة تعمل و لكن غير منطقية حيث عندما اقوم بعمل uncheck لل checkboxes المفروض ان تظهر  بيانات الجدول للcheckboxes checked

كذلك  عند عمل check مرة اخرى لاكثر من checkbox المفروض ان تزداد البيانات في الجدول (اي تقوم بعمل append)

مثال عملي 

https://stackoverflow.com/questions/35809251/jquery-filter-table-rows-by-multiple-checkboxes

هنا في  وسط هذا الموقع هنالك run code snippet لهذا الكود

item_table_cat.zip