jQuery के डेटाटेबल्स: जब तक 3 वर्ण टाइप नहीं हो जाते, तब तक खोज करें या एक बटन पर क्लिक किया जाए

Question 1

क्या केवल 3 वर्ण टाइप होने के बाद ही खोज शुरू करने का विकल्प है?

मैंने 20,000 प्रविष्टियाँ प्रदर्शित करने वाले सहयोगियों के लिए एक PHP-स्क्रिप्ट लिखी है और वे शिकायत करते हैं, कि जब कोई शब्द टाइप करते हैं, तो पहले कुछ अक्षर सब कुछ जमने का कारण बनते हैं।

एक विकल्प यह होगा कि खोज को एक बटन क्लिक करके शुरू किया जाए न कि चरित्र टाइपिंग द्वारा।

नीचे मेरा वर्तमान कोड है:

$("#my_table").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
        "aoColumns": [
                /* qdatetime */   { "bSearchable": false },
                /* id */          null,
                /* name */        null,
                /* category */    null,
                /* appsversion */ null,
                /* osversion */   null,
                /* details */     { "bVisible": false },
                /* devinfo */     { "bVisible": false, "bSortable": false }
        ],
        "oLanguage": {
                "sProcessing":   "Wait please...",
                "sZeroRecords":  "No ids found.",
                "sInfo":         "Ids from _START_ to _END_ of _TOTAL_ total",
                "sInfoEmpty":    "Ids from 0 to 0 of 0 total",
                "sInfoFiltered": "(filtered from _MAX_ total)",
                "sInfoPostFix":  "",
                "sSearch":       "Search:",
                "sUrl":          "",
                "oPaginate": {
                        "sFirst":    "&lt;&lt;",
                        "sLast":     "&gt;&gt;",
                        "sNext":     "&gt;",
                        "sPrevious": "&lt;"
                },
                "sLengthMenu": 'Display <select>' +
                        '<option value="10">10</option>' +
                        '<option value="20">20</option>' +
                        '<option value="50">50</option>' +
                        '<option value="100">100</option>' +
                        '<option value="-1">all</option>' +
                        '</select> ids'
        }
} );

Question 2

संस्करण 1.10 के लिए समाधान -

एक पूर्ण उत्तर के लिए यहाँ देखने और एक खोजने के बाद, मैंने इसे लिखा है (प्रलेखन से कोड का उपयोग कर रहा है, और यहाँ कुछ उत्तर)।

निम्न कोड कम से कम 3 वर्णों को दर्ज करने तक खोज में देरी करने के लिए काम करता है:

// Call datatables, and return the API to the variable for use in our code
// Binds datatables to all elements with a class of datatable
var dtable = $(".datatable").dataTable().api();

// Grab the datatables input box and alter how it is bound to events
$(".dataTables_filter input")
    .unbind() // Unbind previous default bindings
    .bind("input", function(e) { // Bind our desired behavior
        // If the length is 3 or more characters, or the user pressed ENTER, search
        if(this.value.length >= 3 || e.keyCode == 13) {
            // Call the API search function
            dtable.search(this.value).draw();
        }
        // Ensure we clear the search if they backspace far enough
        if(this.value == "") {
            dtable.search("").draw();
        }
        return;
    });

Question 3

नोट: यह डेटा टेबल के पहले के संस्करण के लिए था, कृपया jQuery डेटाटैबल्स v1.10 और इसके बाद के संस्करण के लिए यह उत्तर देखें ।

यह इनपुट बॉक्स के व्यवहार को केवल फ़िल्टर करने के लिए संशोधित करेगा जब या तो रिटर्न दबाया गया हो या खोज में कम से कम 3 वर्ण हों:

$(function(){
  var myTable=$('#myTable').dataTable();

  $('.dataTables_filter input')
    .unbind('keypress keyup')
    .bind('keypress keyup', function(e){
      if ($(this).val().length < 3 && e.keyCode != 13) return;
      myTable.fnFilter($(this).val());
    });
});

: आप इसे यहाँ काम देख सकते हैं http://jsbin.com/umuvu4/2 । मुझे नहीं पता कि डेटाटेबल्स लोग क्यों कीपर और कीप दोनों के लिए बाध्य हैं, लेकिन मैं दोनों को ओवरराइड करने के लिए संगत हूं, हालांकि मुझे लगता है कि कीप पर्याप्त है।

उम्मीद है की यह मदद करेगा!

Question 4

स्टोनी के उत्तर के इस विस्तारित संस्करण की कोशिश क्यों नहीं की गई :)

var searchWait = 0;
var searchWaitInterval;
$('.dataTables_filter input')
.unbind('keypress keyup')
.bind('keypress keyup', function(e){
    var item = $(this);
    searchWait = 0;
    if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
        if(searchWait>=3){
            clearInterval(searchWaitInterval);
            searchWaitInterval = '';
            searchTerm = $(item).val();
            oTable.fnFilter(searchTerm);
            searchWait = 0;
        }
        searchWait++;
    },200);

});

यह खोज में विलंब करेगा जब तक कि उपयोगकर्ता ने टाइप करना बंद नहीं किया है।

आशा है कि इससे सहायता मिलेगी।

Question 5

यहाँ संस्करण 1.10 में एपीआई परिवर्तन के साथ इसे कैसे संभालना है

var searchbox = $('#promogrid_filter input');
var pgrid = $('#promogrid').DataTable();

//Remove default datatable logic tied to these events
searchbox.unbind();

searchbox.bind('input', function (e) {
   if(this.value.length >= 3) {
      pgrid.search(this.value).draw();
   }
   if(this.value == '') {
      pgrid.search('').draw();
   }
   return;
});

Question 6

डेटेटेबल्स का मेरा संस्करण 1.10.10

मैंने थोड़ी चीजें बदल दीं और यह अब काम करता है। इसलिए, मैं साझा कर रहा हूं, क्योंकि यह संस्करण 1.10.10 के लिए काम करना मुश्किल था। Cale_b, Stony और सैम बार्न्स के लिए धन्यवाद। कोड को देखने के लिए कि मैंने क्या किया।

    var searchWait = 0;
    var searchWaitInterval;
    $('.dataTables_filter input')
    .unbind() // leave empty here
    .bind('input', function(e){ //leave input
        var item = $(this);
        searchWait = 0;
        if(!searchWaitInterval) searchWaitInterval = setInterval(function(){
            if(searchWait >= 3){
                clearInterval(searchWaitInterval);
                searchWaitInterval = '';
                searchTerm = $(item).val();
                oTable.search(searchTerm).draw(); // change to new api
                searchWait = 0;
            }
            searchWait++;
        },200);

    });

Question 7

यहाँ एक प्लगइन की तरह स्क्रिप्ट है जो डेटाटैबल्स का विस्तार करता है

jQuery.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
    var _that = this;

    this.each( function ( i ) {
        $.fn.dataTableExt.iApiIndex = i;
        var
            $this = this, 
            oTimerId = null, 
            sPreviousSearch = null,
            anControl = $( 'input', _that.fnSettings().aanFeatures.f );

            anControl
              .unbind( 'keyup' )
              .bind( 'keyup', function(e) {

              if ( anControl.val().length > 2 && e.keyCode == 13){
                _that.fnFilter( anControl.val() );
              }
        });

        return this;
    } );
    return this;
}

उपयोग:

$('#table').dataTable().fnSetFilteringEnterPress();

Question 8

उपयोगकर्ता बॉक्स में मिनिनम वर्ण टाइप करने के बाद सर्वर कॉल को लागू करना है, तो आप एलन के सुझाव का पालन कर सकते हैं :

फ़िल्टर सेट करने से पहले स्ट्रिंग की लंबाई पर एक अतिरिक्त स्थिति जोड़ने के लिए fnSetFilteringDelay () प्लग-इन API फ़ंक्शन को कस्टमाइज़ करें , फ़िल्टर को खाली करने के लिए रिक्त स्ट्रिंग इनपुट पर भी विचार करें

इसलिए कम से कम 3 वर्णों के लिए, प्लग-इन में लाइन # 19 बदलें :

if ((anControl.val().length == 0 || anControl.val().length >= 3) && (sPreviousSearch === null || sPreviousSearch != anControl.val())) {

Question 9

यह DataTables 1.10.4 पर काम करता है:

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

$(".dataTables_filter input")
    .unbind()
    .bind('keyup change', function(e) {
        if (e.keyCode == 13 || this.value == "") {
            table
                .search(this.value)
                .draw();
        }
    });

JSFiddle

Question 10

1.10 संस्करण के लिए विकल्पों में इस कोड को अपनी जावास्क्रिप्ट में जोड़ें। InitComplete खोज विधि को ओवरराइड करता है और 3 वर्णों के लिए प्रतीक्षा लिखी जाती है। मुझे प्रकाश देने के लिए http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/ का धन्यवाद ।

    var dtable= $('#example').DataTable( {
        "deferRender": true,
        "processing": true,
        "serverSide": true,


        "ajax": "get_data.php",
        "initComplete": function() {
            var $searchInput = $('div.dataTables_filter input');

            $searchInput.unbind();

            $searchInput.bind('keyup', function(e) {
                if(this.value.length > 3) {
                    dtable.search( this.value ).draw();
                }
            });
        }

    } );
} );

Question 11

इसे इस्तेमाल करो

   "fnServerData": function (sSource, aoData, fnCallback, oSettings) {

            if ($("#myDataTable_filter input").val() !== "" && $("#myDataTable_filter input").val().length < 3)
                return;
            oSettings.jqXHR = $.ajax({
                "dataType": 'json',
                "timeout":12000,
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        }

Question 12

यद्यपि यह मूल प्रश्न का उत्तर नहीं देता है, लेकिन मेरे डेटाटैबल्स पर एक जटिल और धीमी खोज थी। प्रत्येक ईवेंट के बाद फ़िल्टर ईवेंट फायरिंग कर रहा था, जिसका मतलब 10 वर्णों के बाद काफी ध्यान देने योग्य विलंब था। इसलिए फ़िल्टर इवेंट को निकाल दिए जाने से पहले एक कीपर के बाद एक छोटी देरी शुरू करने से, जहाँ एक बाद वाले कीपर ने काउंटर को रीसेट कर दिया और पिछली खोज को रोक दिया, मैं खोज को और तेज़ बनाने में सक्षम था। दूसरों को यह मददगार लग सकता है।

मैंने इसे बनाने के लिए स्टोनी और क्रिस्टियन नोएल के उत्तरों का उपयोग किया:

var dataTableFilterTimeout;
var dataTableFilterWait = 200; // number of milliseconds to wait before firing filter

$.fn.dataTableExt.oApi.fnSetFilteringEnterPress = function ( oSettings ) {
    var _that = this;
    this.each( function ( i ) {
        $.fn.dataTableExt.iApiIndex = i;
        var $this = this;
        var oTimerId = null;
        var sPreviousSearch = null;
        anControl = $( 'input', _that.fnSettings().aanFeatures.f );
        anControl.unbind( 'keyup' ).bind( 'keyup', function(e) {
            window.clearTimeout(dataTableFilterTimeout);
            if ( anControl.val().length > 2 || e.keyCode == 13){
                dataTableFilterTimeout = setTimeout(function(){
                    _that.fnFilter( anControl.val() );
                },dataTableFilterWait);
            }
        });
        return this;
    } );
    return this;
}

Question 13

आप इसके द्वारा सर्वर को अजाक्स कॉल में देरी कर सकते हैं

var search_thread = null;
    $(".dataTables_filter input")
        .unbind()
        .bind("input", function(e) { 
            clearTimeout(search_thread);
            search_thread = setTimeout(function(){
                var dtable = $("#list_table").dataTable().api();
                var elem = $(".dataTables_filter input");
                return dtable.search($(elem).val()).draw();
            }, 300);
        });

यह कोड ajax कॉल को रोक देगा यदि कुंजी प्रेस के बीच का समय कम है तो 300 ms, इस तरह से जब आप एक शब्द लिखते हैं, तो केवल एक ajax कॉल चलेगी और केवल तब जब आप लिखना बंद कर देंगे। आप अधिक या कम विलंब प्राप्त करने के लिए विलंब परम (300) के साथ 'खेल' सकते हैं

Question 14

आपको शायद प्लगइन को संशोधित करना होगा।

और इसे एक्स अक्षर बनाने के बजाय, एक देरी का उपयोग करें, इसलिए खोज शुरू होती है एक बार जब उन्होंने 1 सेकंड या तो लिखना बंद कर दिया।

तो कीडाउन / कीप बाइंडिंग जो वर्तमान में खोज को ट्रिगर कर रहा है एक टाइमर के साथ संशोधित किया जाएगा ...

var timer;
clearTimeout(timer);
timer = setTimeout(searchFunctionName, 1000 /* timeToWaitInMS */);

Question 15

डेटाटैबल्स का निश्चित संस्करण 1.10.12 एपीआई का उपयोग करके और 'इनपुट' को सही ढंग से अनबाइंड करने के लिए। चरित्र सीमा के तहत बैकस्पेस पर खोज को भी जोड़ा।

    // Create the Datatable
    var pTable = $('#pTable').DataTable();

    // Get the Datatable input box and alter events
    $('.dataTables_filter input')
    .unbind('keypress keyup input')
    .bind('keypress keyup input', function (e) {
        if ($(this).val().length > 2) {
            pTable.search(this.value).draw();
        } else if (($(this).val().length == 2) && (e.keyCode == 8)) {
            pTable.search('').draw();
        }
    });

Question 16

यदि आप पुराने संस्करण का उपयोग कर रहे हैं, तो यह ऐसा दिखता है। रिचर्ड का समाधान ठीक काम करता है। लेकिन जब मैं इसका इस्तेमाल करता हूं, तो मैंने सिर्फ नई घटनाओं को जोड़ा है, न कि डिलीट करने के लिए। क्योंकि कोड चलाने पर, तालिका अभी तक नहीं बनाई गई है। तो मैंने पाया कि fnInitComplete तरीका (आग जब टेबल बनाया गया) है और मैंने इसे रिकार्ड के समाधान के लिए लागू किया है। यह रहा

$("#my_table").dataTable( {
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bAutoWidth": false,
         ...
         ...,
         "fnInitComplete": function (oSettings, json) {
                    var activeDataTable = $(this).DataTable();
                    $("#my_table_filter input")
                        .unbind('keypress keyup')
                        .bind('keypress keyup', function (e) {

                        if ($(this).val().length < 3 || e.keyCode !== 13) return;
                        activeDataTable.fnFilter($(this).val());
                    });
                }

Question 17

आप 3 वर्णों का उपयोग करने के बाद खोज के लिए इस कोड का उपयोग मेडट्रॉनिक डिटैटेबल या अन्य कोड पर कर सकते हैं:

        onDataLoad: function (RequestGrid) {
            // execute some code on ajax data load
            var searchInput = $('div.dataTables_filter input').val();
            if (searchInput.length() > 3 || searchInput.length() ==0) {
                alert(searchInput);
                dt.draw();
            }
            else {
                return false;
            }
        },

पहले शो के लिए searchInput.length () == 0।

Question 18

क्या आप onKeyUp ईवेंट हैंडलर से जुड़ी इनपुट स्ट्रिंग की लंबाई की जांच करने के लिए अपना फ़ंक्शन लिख सकते हैं और न्यूनतम लंबाई पहुंचने के बाद खोज फ़ंक्शन को ट्रिगर कर सकते हैं?

की तर्ज पर कुछ:

input.onKeyUp (फ़ंक्शन () {
    अगर (input.length> 3) {
        mySearchfunction ();
    }
});

... यह एक छद्म कोड तरह का है, लेकिन आपको जिस्ट मिलता है।

Question 19

आप 3 वर्णों तक खोज को प्रतिबंधित करने के लिए मिनिमल नाम से पैरामीटर का उपयोग कर सकते हैं:

function(request, response) {
    $.getJSON("/speakers/autocomplete", {  
        q: $('#keywordSearch').val()
    }, response);
}, minLength: 3

Question 20

आप उस डेटा की लंबाई प्राप्त कर सकते हैं जो data.currentTarget.value.length का उपयोग करके पारित किया जा रहा है, कृपया नीचे देखें।

$('[id$="Search"]').keyup(function (data) {
            if (data.currentTarget.value.length > 2 || data.currentTarget.value.length == 0) {
                if (timoutOut) { clearTimeout(timoutOut); }
                timoutOut = setTimeout(function () {
                    var value = $('[id$="Search"]').val();
                    $('#jstree').jstree(true).search(value);
                }, 250);
            }
        });

और जाहिर है आप चाहते होंगे कि यह कोड पाठ को हटाते समय चले ताकि मान 0 पर सेट हो जाए

Question 21

यह DataTables संस्करण 1.10.19 के साथ काम करता है । इसे केवल आपके वेबसाइट टेम्पलेट में js शामिल करने की आवश्यकता है - एक ऐसी साइट के लिए उपयोगी जिसमें विभिन्न पृष्ठों पर कई डेटाटेबल कॉन्फ़िगर किए गए हैं। किसी भी धीमी xhr लोडिंग टेबल के लिए भी उपयोगी है, किसी भी नए xhr अनुरोध की अनुमति नहीं देगा जब तक कि सभी वर्तमान में खत्म नहीं हो जाते। खोज फ़ंक्शन का उपयोग बहुत ही समान है कि प्लगइन मूल रूप से खोज फ़ंक्शन कैसे सेट करता है ।

(function(window, document, $){
var xhring = 0;

$(document).on( 'preXhr.dt', function () {
    xhring++;
} );
$(document).on( 'xhr.dt', function () {
    xhring--;
} );

//at a minimum wait the full freq, and wait for any pending XHR requests to finish before calling fn
function choke( fn, freq ) {
    var
        frequency = freq !== undefined ? freq : 200,
        last,
        timerFn,
        timer;

    return function () {
        var
            that = this,
            args = arguments;

        timerFn = function () {
            if (xhring || +new Date() < last + frequency) {
                clearTimeout( timer );
                timer = setTimeout( timerFn, frequency);
            } else {
                fn.apply( that, args );
            }
        }
        last = +new Date();

        clearTimeout( timer );
        timer = setTimeout( timerFn, frequency );
    };
}

//See https://github.com/DataTables/DataTables/blob/156faa83386460c578e00c460eca9766e38a0c5f/media/js/jquery.dataTables.js
//See https://github.com/DataTables/Plugins/blob/master/features/searchHighlight/dataTables.searchHighlight.js
$(document).on( 'preInit.dt', function (e, settings, json) {
    var previousSearch = settings.oPreviousSearch;

    var searchFn = function() {
        /* Update all other filter input elements for the new display */
        var val = !this.value ? "" : this.value; // mental IE8 fix :-(

        /* Now do the filter */                                                                                                  
        if ( val != previousSearch.sSearch && (val.length >= 3 || val == "")) {
            $.fn.dataTable.ext.internal._fnFilterComplete( settings, {
                "sSearch": val,
                "bRegex": previousSearch.bRegex,
                "bSmart": previousSearch.bSmart ,
                "bCaseInsensitive": previousSearch.bCaseInsensitive
            } );

            // Need to redraw, without resorting
            settings._iDisplayStart = 0;
            $.fn.dataTable.ext.internal._fnDraw( settings );
        }
    };

    var searchDelay = settings.searchDelay !== null ?                                                                            
        settings.searchDelay :
        $.fn.dataTable.ext.internal._fnDataSource( settings ) === 'ssp' ?
            700 :
            200;

    var jqFilter = $( 'input', settings.aanFeatures.f )
        .off('keyup.DT search.DT input.DT paste.DT cut.DT')
        .on('keyup.DT search.DT input.DT paste.DT cut.DT', choke(searchFn, searchDelay))
        ;
} );

})(window, document, jQuery);

Question 22

क्या कोई कारण है जो आप केवल 'परिवर्तन' पर लंबाई की जांच नहीं करेंगे?

$('.input').change(function() {
  if( $('.input').length > 3 ) {
     //do the search
  }
});

Question 23

आपको jquery.datatables.js को संशोधित करना होगा

----- अद्यतित आप lenght> 3 पर एक चेक कर सकते हैं, लेकिन मुझे लगता है कि आपको अभी भी टाइमर की आवश्यकता है। यदि आपके पास बहुत अधिक डेटा है, तो आप हर वर्ण अद्यतन के बाद इसे फ़िल्टर करना नहीं चाहते हैं।

इस विधि के भीतर:

jqFilter.keyup( function(e) {
            if ( **this.value**.length > 3) {
                var n = oSettings.aanFeatures.f;
                for ( var i=0, iLen=n.length ; i<iLen ; i++ )
                {
                    if ( n[i] != this.parentNode )
                    {
                        $('input', n[i]).val( this.value );
                    }
                }
                /* Now do the filter */
                _fnFilterComplete( oSettings, { 
                    "sSearch": this.value, 
                    "bRegex":  oSettings.oPreviousSearch.bRegex,
                    "bSmart":  oSettings.oPreviousSearch.bSmart 
                } );
         }
        } );

की-अप में टाइमर जोड़ें, जैसे उत्तर में दिखाया गया है।

फिर इस साइट पर जाएँ http://jscompress.com/

और आपके संशोधित कोड और js wil के अतीत को छोटा कर दिया जाता है।