DataTables: صفوف التصفية استنادًا إلى القيمة في العمود

أحتاج إلى تصفية الصفوف من datatable التي لا تحتوي على قيمة معينة في عمود. على سبيل المثال ، مع البيانات أدناه ، أود فقط عرض النتائج في المكان type = "Dog":

<table id="petowners">
<tr>
    <th>Type</th>
    <th>Breed</th>
    <th>Owner</th>
</tr>
<tr>
    <td>Dog</td>
    <td>Doberman</td>
    <td>Peter</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Jaguar</td>
    <td>Paul</td>
</tr>
<tr>
    <td>Dog</td>
    <td>Poodle</td>
    <td>Mary</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Lion</td>
    <td>Ringo</td>
</tr>
<tr>
    <td>Cat</td>
    <td>Tiger</td>
    <td>John</td>
</tr>
</table>

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

$(document).ready(function() {
    $('#petowners').dataTable( {
        "order": [[ 0, "asc" ]],
        "iDisplayLength": -1,
        "oLanguage": 
            {
                "sLengthMenu": 'Display  records'
            },
    } );
} );

أحتاج إلى إضافة رابطين ، أزرار أو مربعات اختيار ، واحدة لـ "Dog" وواحدة لـ "Cat".

عندما ينقر المستخدم على "Dog" ، يتم عرض الصفوف التي تحتوي على "Dog" في عمود "النوع" فقط. وبالمثل عند النقر على "Cat" ، يجب عرض الصفوف التي تشير إلى "Cat" في عمود "النوع" فقط.

يبدو وكأنه ميزة بسيطة إلى حد ما ، ولكن لم أتمكن من العثور على أي شيء في موقع datatables.net الذي يوضح كيف يمكن القيام بذلك.

آمل أن يكون هذا منطقيًا ويمكن لأي شخص المساعدة.

شكرا كثيرا مسبقا wOnkO

0

8 إجابة

باستخدام الإصدار الحالي من DataTables ، يمكنك القيام بذلك باستخدام وظيفة "البحث".

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

إذا كنت تريد التراجع عن الفلتر ، فما عليك سوى تمرير سلسلة فارغة بدلاً من regex.

data_table.columns(column_index).search('', true, false).draw();

أتمنى أن يساعدك هذا.

5
وأضاف
حل نظيفة بالنسبة لي وتحديث الجدول/احصائيات/الحالة بشكل صحيح
وأضاف المؤلف Mayhem, مصدر
يجب أن يكون هذا هو الجواب المقبول.
وأضاف المؤلف jlesse, مصدر

باستخدام الإصدار الحالي من DataTables ، يمكنك القيام بذلك باستخدام وظيفة "البحث".

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

إذا كنت تريد التراجع عن الفلتر ، فما عليك سوى تمرير سلسلة فارغة بدلاً من regex.

data_table.columns(column_index).search('', true, false).draw();

أتمنى أن يساعدك هذا.

5
وأضاف
حل نظيفة بالنسبة لي وتحديث الجدول/احصائيات/الحالة بشكل صحيح
وأضاف المؤلف Mayhem, مصدر
يجب أن يكون هذا هو الجواب المقبول.
وأضاف المؤلف jlesse, مصدر

باستخدام الإصدار الحالي من DataTables ، يمكنك القيام بذلك باستخدام وظيفة "البحث".

var data_table = $('#data-table').DataTable();
var column_index = 0;
data_table.columns(column_index).search('^(?:(?!-).)*$\r?\n?', true, false).draw();

إذا كنت تريد التراجع عن الفلتر ، فما عليك سوى تمرير سلسلة فارغة بدلاً من regex.

data_table.columns(column_index).search('', true, false).draw();

أتمنى أن يساعدك هذا.

5
وأضاف
حل نظيفة بالنسبة لي وتحديث الجدول/احصائيات/الحالة بشكل صحيح
وأضاف المؤلف Mayhem, مصدر
يجب أن يكون هذا هو الجواب المقبول.
وأضاف المؤلف jlesse, مصدر

أتش تي أم أل:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

جافا سكريبت:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
وأضاف
يعمل تماما ، شكرا لك.
وأضاف المؤلف Wonko the Sane, مصدر
جربت حلًا مشابهًا لهذا ولكنه لم يعمل بشكل صحيح. أعتقد أن هذا ربما لا يعمل إلا عندما لا يتم ترقيم جدول البيانات.
وأضاف المؤلف jlesse, مصدر

أتش تي أم أل:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

جافا سكريبت:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
وأضاف
يعمل تماما ، شكرا لك.
وأضاف المؤلف Wonko the Sane, مصدر
جربت حلًا مشابهًا لهذا ولكنه لم يعمل بشكل صحيح. أعتقد أن هذا ربما لا يعمل إلا عندما لا يتم ترقيم جدول البيانات.
وأضاف المؤلف jlesse, مصدر

أتش تي أم أل:

<input type="submit" value="Dog" onclick="Search('Dog')"/>
<input type="submit" value="Cat" onclick="Search('Cat')"/>
<input type="submit" value="Clear" onclick="Clear()"/>

جافا سكريبت:

function Clear() {    
     $('#petowners tr').show();
}

function Search(word) {
     Clear();

     $('#petowners tr > td:first-child').each(function() {
         if ($(this).html() != word) {
              $(this).parent().hide();
         }
      });
 }
2
وأضاف
يعمل تماما ، شكرا لك.
وأضاف المؤلف Wonko the Sane, مصدر
جربت حلًا مشابهًا لهذا ولكنه لم يعمل بشكل صحيح. أعتقد أن هذا ربما لا يعمل إلا عندما لا يتم ترقيم جدول البيانات.
وأضاف المؤلف jlesse, مصدر

جرب هذا:

$ ('# petowners tr'). كل (function() {     var tdVal = $ (this) .find ("td: first"). text ()؛     إذا استمر (tdVal == "Dog") ؛     else $ (this) .hide ()؛ })؛ </القانون>

لها تصل إلى أنك تريد إزالة() أو إخفاء (). أيضًا بالطريقة نفسها التي يمكنك القيام بها من أجل "Cat"

0
وأضاف

جرب هذا:

$ ('# petowners tr'). كل (function() {     var tdVal = $ (this) .find ("td: first"). text ()؛     إذا استمر (tdVal == "Dog") ؛     else $ (this) .hide ()؛ })؛ </القانون>

لها تصل إلى أنك تريد إزالة() أو إخفاء (). أيضًا بالطريقة نفسها التي يمكنك القيام بها من أجل "Cat"

0
وأضاف