it-swarm.dev

Datatables - مربع البحث خارج datatable

أنا أستخدم DataTables ( datatables.net ) وأريد أن يكون مربع البحث الخاص بي خارج الجدول (على سبيل المثال في عنوان div الخاص بي).

هل هذا ممكن ؟

101
Athanasios Emmanouilidis

يمكنك استخدام api DataTables لتصفية الجدول. كل ما تحتاجه هو حقل الإدخال الخاص بك مع حدث keyup الذي يشغل وظيفة التصفية إلى DataTables. باستخدام css أو jquery ، يمكنك إخفاء/إزالة حقل إدخال البحث الحالي. أو ربما يحتوي DataTables على إعداد لإزالة/عدم تضمينه.

تحقق من وثائق API Datatables في هذا الشأن.

مثال:

HTML

<input type="text" id="myInputTextField">

JS

oTable = $('#myTable').DataTable();   //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as @Lionel said
$('#myInputTextField').keyup(function(){
      oTable.search($(this).val()).draw() ;
})
194
netbrain

حسب تعليق lvkz:

إذا كنت تستخدم datatable مع الأحرف الكبيرة d .DataTable() (سيؤدي ذلك إلى إرجاع كائن API Datatable) ، استخدم هذا:

 oTable.search($(this).val()).draw() ;

وهو الجوابnetbrain.

إذا كنت تستخدم datatable مع الأحرف الصغيرة d .dataTable() (سيؤدي ذلك إلى إرجاع كائن jquery) ، استخدم هذا:

 oTable.fnFilter($(this).val());
31
zizoujab

يمكنك استخدام الخيار sDom لهذا الغرض.

افتراضي مع إدخال البحث في div الخاص به:

sDom: '<"search-box"r>lftip'

إذا كنت تستخدم jQuery UI ((bjQueryUI لتعيين true):

sDom: '<"search-box"r><"H"lf>t<"F"ip>'

ما سبق سوف يضع عنصر البحث/التصفية input في div الخاص به مع فئة تسمى search-box خارج الجدول الفعلي.

على الرغم من أنه يستخدم بناء جملة الاختصار الخاص به ، إلا أنه يمكن أن يأخذ أي HTML ترميه في الواقع.

14
mekwall

ساعدني هذا الإصدار 1.10.4 من DataTables لأن API الجديدة الخاصة به

var oTable = $('#myTable').DataTable();    
$('#myInputTextField').keyup(function(){
   oTable.search( $(this).val() ).draw();
})
8
cinnamonbear

الإصدارات الأحدث تحتوي على بناء جملة مختلف:

var table = $('#example').DataTable();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

لاحظ أن هذا المثال يستخدم المتغير table الذي تم تعيينه عند تهيئة قواعد البيانات لأول مرة. إذا لم يكن لديك هذا المتغير متاح ، فما عليك سوى استخدام:

var table = $('#example').dataTable().api();

// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
    table.search(this.value).draw();
});

منذ: DataTables 1.10

- المصدر: https://datatables.net/reference/api/search ()

6
Jonny

يجب أن يكون هذا الأمر مناسبًا لك: (DataTables 1.10.7)

oTable = $('#myTable').dataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.api().search($(this).val()).draw();
})

أو

oTable = $('#myTable').DataTable();

$('#myInputTextField').on('keyup change', function(){
  oTable.search($(this).val()).draw();
})
4
Sky Yip

أرغب في إضافة شيء آخر إلى @ netbrain 's مناسب في حالة استخدامك للمعالجة من جانب الخادم (انظر serverSide الخيار).

لا ينطبق اختناق الاستعلام الذي يتم تنفيذه افتراضيًا بواسطة قواعد البيانات (راجع searchDelay الخيار) على استدعاء API .search(). يمكنك استعادته باستخدام $ .fn.dataTable.util.throttle () بالطريقة التالية:

var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
    function(val) {
        table.search(val).draw();
    },
    400  // Search delay in ms
);

$('#mySearchBox').keyup(function() {
    search(this.value);
});
3
citxx

كان لي نفس المشكلة.

جربت جميع البدائل المنشورة ، لكن لا عمل ، استخدمت طريقة غير صحيحة لكنها نجحت تمامًا.

مثال المدخلات البحث

<input id="serachInput" type="text"> 

كود مسج

$('#listingData').dataTable({
  responsive: true,
  "bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input

$("#serachInput").on("input", function (e) {
   e.preventDefault();
   $('#listingData').DataTable().search($(this).val()).draw();
});
3
Bruno Ribeiro
$('#example').DataTable({
   "bProcessing": true,
   "bServerSide": true,
   "sAjaxSource": "../admin/ajax/loadtransajax.php",
   "fnServerParams": function (aoData) {
        // Initialize your variables here
        // I have assign the textbox value for "text_min_val"
        var min_val = $("#min").val();  //Push to the aoData
        aoData.Push({name: "text_min_val", value:min_val});
   },
   "fnCreatedRow": function (nRow, aData, iDataIndex) {
       $(nRow).attr('id', 'tr_' + aData[0]);
       $(nRow).attr('name', 'tr_' + aData[0]);
       $(nRow).attr('min', 'tr_' + aData[0]); 
       $(nRow).attr('max', 'tr_' + aData[0]); 
   }
});

في loadtransajax.php ، قد تتلقى قيمة get:

if ($_GET['text_min_val']){
    $sWhere = "WHERE ("; 
    $sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
    $sWhere .= ')';
}
1
Senanayaka

يمكنك نقل div عند رسم الجدول باستخدام دالة fnDrawCallback.

    $("#myTable").dataTable({
    "fnDrawCallback": function (oSettings) {
        $(".dataTables_filter").each(function () {
            $(this).appendTo($(this).parent().siblings(".panel-body"));
        });
    }
});
1
ebrown

إذا كنت تستخدم JQuery dataTable ، فأنت بحاجة فقط لإضافة "bFilter":true. سيؤدي ذلك إلى عرض مربع البحث الافتراضي خارج الجدول وأعماله ديناميكيًا ... كما هو متوقع

$("#archivedAssignments").dataTable({
                "sPaginationType": "full_numbers",
                "bFilter":true,
                "sPageFirst": false,
                "sPageLast": false,
                "oLanguage": {
                "oPaginate": {
                    "sPrevious": "<< previous",
                    "sNext" : "Next >>",
                    "sFirst": "<<",
                    "sLast": ">>"
                    }
                },
            "bJQueryUI": false,
            "bLengthChange": false,
            "bInfo":false,
            "bSortable":true
        });    
0
Nikhil Thombare