डेटाटैबल्स - डेटाबॉक्स के बाहर सर्च बॉक्स

Question

मैं DataTables ( datatables.net ) का उपयोग कर रहा हूं और मैं चाहूंगा कि मेरा खोज बॉक्स टेबल के बाहर हो (उदाहरण के लिए मेरे हेडर डिव में)।

क्या यह संभव है ?

Answer 1

आप तालिका को फ़िल्टर करने के लिए DataTables एपीआई का उपयोग कर सकते हैं। तो आप सभी की जरूरत है एक keyup घटना के साथ अपने स्वयं के इनपुट क्षेत्र है कि फिल्टर समारोह के लिए DataTables चलाता है। सीएसएस या jquery के साथ आप मौजूदा खोज इनपुट फ़ील्ड को छिपा / हटा सकते हैं। या हो सकता है कि डेटाटेबल्स में इसे हटाने / न शामिल करने की सेटिंग हो।

इस पर डेटाटैब एपीआई प्रलेखन चेकआउट करें।

उदाहरण:

एचटीएमएल

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

जे एस

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

Comments

आपको .keypress के बजाय .upup का उपयोग जरूर करना चाहिए, अन्यथा आपको परिणाम में देरी का अनुभव होगा

— S Sepvar

मैंने इसे खोजने से पहले लगभग एक घंटे के लिए अपने इनपुट $(".dataTables_filter :input").focus().val(value).keypress();में डाल दिया keyup। हालांकि एपीआई का उपयोग करने के लिए कभी नहीं .. सुरुचिपूर्ण समाधान!

— मैटसिजल

जेएस को fnFilter के स्थान पर .search ($ (यह) .val ()) .draw () के उपयोग के लिए बदलने की आवश्यकता है। देखें: datatables.net/manual/api#Chaining मैंने इसे ठीक करने के लिए इस उत्तर को बदल दिया, लेकिन ऐसा लगता है कि पहले इसकी समीक्षा की जानी चाहिए।

— शेन ग्रांट

टिप्पणी: आपको अभी भी "खोज: सत्य" विकल्प की आवश्यकता होगी, और फिर आप शायद डिफ़ॉल्ट खोज बॉक्स को छिपाना चाहते हैं, इसलिए केवल sDOM विकल्प को शून्य पर सेट करें।

— बैंग

तत्काल $ ()। डेटाटेबल () एक छोटे "डी" के साथ डेटाटेबल्स एपीआई उदाहरण के बजाय एक jQuery ऑब्जेक्ट लौटाएगा। उत्तरार्द्ध को "oTable = $ ('# myTable') कहकर प्राप्त किया जा सकता है। DataTable ();" एक राजधानी "डी" के साथ। यह कॉल करने में सक्षम होने के लिए आवश्यक है। इस पर खोज करें (यदि अन्यथा "फ़ंक्शन अपरिभाषित" त्रुटि को फेंक देगा)। देखें: datatables.net/faqs/#api

— लियोनेल

Answer 2

@Lvkz टिप्पणी के अनुसार:

यदि आप बड़े अक्षर के साथ डेटाटेबल का उपयोग कर रहे हैं d .DataTable()(यह डेटाटेबल एपीआई ऑब्जेक्ट लौटा देगा) इसका उपयोग करें:

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

जो @netbrain उत्तर है।

यदि आप लोअरकेस डी के साथ डिटैटेबल का उपयोग कर रहे हैं .dataTable()(यह एक जेकरी ऑब्जेक्ट लौटाएगा) इसका उपयोग करें:

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

Comments

oTable.fnFilter($(this).val());मेरे लिए भी काम किया,

— shabeer90

दोनों विधियां मान्य हैं, आप कैसे डेटा को कॉल कर रहे हैं, इस पर निर्भर करता है: `oTable.search ($ (यह) ()) (ड्रा) (;) आप इसे कॉल करते समय उपयोग करते हैं: .DataTable()और यह एक: oTable.fnFilter($(this).val());जब आप .dataTable() अंतर का उपयोग करते हैं । राजधानी डी पर है। आशा है कि यह मदद करता है!

— ल्वीच

"है एक समारोह oTable.fnFilter नहीं" datatables संस्करण 1.10.5 के लिए त्रुटि देता है एक

— Ege Bayrak

बस अनुमान है कि jQuery के साथ आप भी इस तरह से डेटाबेस एपीआई का उपयोग कर सकते हैं: oTable.api().search($(this).val()).draw();यह उपयोगी हो सकता है, खासकर यदि आप lengthoTable.api().page.len($(this).val()).draw();

— Ghis

Answer 3

आप इसके लिए 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 को ले सकता है।

Comments

@ मारकस: वास्तव में मुझे लगता है कि sDom का उपयोग करने के लिए काफी सुरुचिपूर्ण नहीं है, इस तथ्य को अलग रखें कि हम खोज बॉक्स को पूरी तरह से अनुकूलित नहीं कर सकते हैं (उस बॉक्स में एक हार्डकोड "खोज" पाठ है)।

— होन्ग लॉन्ग

लेकिन इसके अंदर अभी भी div.datatables_Wrapper, किसी भी तरह से इसे बाहर ले जाने के लिए?

— Artur79

@ Artur79 दुख की बात है कि नहीं। Datatables के स्रोत को हैक किए बिना नहीं, कम से कम।

— mekwall

<333 यह वाक्यविन्यास '<"search-box"r><"H"lf>t<"F"ip>'सुनिश्चित नहीं है कि अगर कुछ और खराब हो

— क्रिस्टियन ई।

@ HoàngLong आप वास्तव में इस तरह के विकल्पों का उपयोग करके खोज बॉक्स को अनुकूलित कर सकते हैं:language: { search: "example", searchPlaceholder: "example" }

— फ़्लिम

Answer 4

यह एक मुझे DataTables संस्करण 1.10.4 के लिए मदद करता है, क्योंकि इसकी नई एपीआई

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

Comments

"Var oTable = $ ('# myTable') की राजधानी" D "पर ध्यान दें। DataTable ();" ( datatables.net/faqs/#api )

— लियोनेल

Answer 5

अधिक हाल के संस्करणों में एक अलग वाक्यविन्यास है:

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

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

ध्यान दें कि tableजब datatables पहली बार आरम्भ किया गया है, तो यह उदाहरण निर्दिष्ट चर का उपयोग करता है। यदि आपके पास यह चर उपलब्ध नहीं है, तो बस उपयोग करें:

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

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

चूंकि: डेटाटेबल्स 1.10

- स्रोत: https://datatables.net/reference/api/search ()

Answer 6

यह आपके लिए काम होना चाहिए: (डेटाटेबल्स 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();
})

Answer 7

मुझे भी यही समस्या थी।

मैंने पोस्ट किए गए सभी विकल्पों की कोशिश की, लेकिन कोई काम नहीं किया, मैंने एक ऐसा तरीका इस्तेमाल किया जो सही नहीं है लेकिन यह पूरी तरह से काम करता है।

उदाहरण खोज इनपुट

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

jquery कोड

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

Answer 8

यदि आप सर्वर-साइड प्रोसेसिंग ( सर्वरसाइड विकल्प देखें ) का उपयोग करते हैं, तो मैं @ netbrain के उत्तर में एक और बात जोड़ना चाहता हूं ।

डिफ़ॉल्ट रूप से डेटाटैबल्स द्वारा खोज किए गए क्वेरी थ्रॉटलिंग ( सर्चडेल ऑप्शन देखें ) .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);
});

Answer 9

जब आप fnDrawCallbackफ़ंक्शन का उपयोग करके तालिका खींची जाती है तो आप div को स्थानांतरित कर सकते हैं ।

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

Comments

या यदि आप एक नया संस्करण उपयोग करने योग्य है, तो आपके पास होगा:"drawCallback": function (settings) { $(".dataTables_filter").each(function () { $(this).appendTo($(this).parent().siblings(".panel-body")); }); },

— डैनियल दुदास

Answer 10

$('#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आप प्राप्त मूल्य प्राप्त हो सकता है:

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

Answer 11

यदि आप JQuery डेटाटैबल का उपयोग कर रहे हैं तो आपको बस जोड़ने की आवश्यकता है "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
        });    

Comments

सवाल गतिशील रूप से बनाई गई स्थिति को बदलने का था। इसे टेबल पर रखकर

— MC