jQuery DataTables: 3 karakter yazılana VEYA bir düğme tıklanana kadar aramayı erteleyin

Aramayı yalnızca 3 karakter yazıldıktan sonra başlatma seçeneği var mı?

20.000 giriş gösteren meslektaşlarım için bir PHP betiği yazdım ve onlar bir kelimeyi yazarken ilk birkaç harfin her şeyin donmasına neden olduğundan şikayet ediyorlar.

Bir alternatif, aramanın karakter yazarak değil, bir düğmeyle başlatılması olabilir.

Mevcut kodum aşağıdadır:

$("#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":    "<<",
                        "sLast":     ">>",
                        "sNext":     ">",
                        "sPrevious": "<"
                },
                "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'
        }
} );

Sürüm 1.10 için çözüm -

Tam bir cevap için buraya baktıktan ve bir tane bulamadıktan sonra, bunu yazdım (dokümantasyondaki kodu ve buradaki birkaç cevabı kullanarak).

Aşağıdaki kod, en az 3 karakter girilene kadar aramayı geciktirmek için çalışır:

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

Not: Bu, veri tablolarının çok daha eski bir sürümü içindi, lütfen jQuery datatables v1.10 ve üstü için bu yanıta bakın .

Bu, giriş kutusunun davranışını değiştirerek yalnızca return tuşuna basıldığında veya aramada en az 3 karakter olduğunda filtre uygulayacak:

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

Burada çalıştığını görebilirsiniz: http://jsbin.com/umuvu4/2 . DataTables milletinin neden hem tuşa basma hem de tuşa basma için bağlayıcı olduğunu bilmiyorum, ancak keyup'ın yeterli olduğunu düşünmeme rağmen uyumlu kalmaları için ikisini de geçersiz kılıyorum.

Bu yardımcı olur umarım!

Neden Stony'nin cevabının bu genişletilmiş versiyonunu denemiyorsunuz :)

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

});

Bu, kullanıcı yazmayı bırakana kadar aramayı geciktirecektir.

Umarım yardımcı olur.

1.10 sürümündeki API değişikliğiyle nasıl başa çıkılacağı aşağıda açıklanmıştır.

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

Veri tabloları sürümüm 1.10.10

Küçük şeyleri değiştirdim ve şimdi çalışıyor. Yani, paylaşıyorum, çünkü sürüm 1.10.10 için çalışmasını sağlamak zordu. Cale_b, Stony ve Sam Barnes'a teşekkürler. Ne yaptığımı görmek için koda bakın.

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

    });

İşte veri tablolarını genişleten eklenti benzeri bir betik.

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

kullanım:

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

Yapılması gereken, kullanıcı arama kutusuna minimum karakterleri yazdıktan sonra sunucu çağrısını başlatmaktır, Allan'ın önerisini takip edebilirsiniz :

fnSetFilteringDelay () eklenti API işlevini , filtreyi ayarlamadan önce dize uzunluğuna fazladan bir koşul eklemek için özelleştirin , ayrıca filtreyi temizlemek için boş bir dize girişi düşünün

Bu nedenle, minimum 3 karakter için eklentideki 19. satırı şu şekilde değiştirmeniz yeterlidir :

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

Bu, DataTables 1.10.4'te çalışır:

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

1.10 sürümü için bu kodu seçeneklerde javascript'inize ekleyin. İnitComplete, arama yöntemini geçersiz kılar ve 3 karakterin yazılmasını bekleyin. Bana ışık verdiği için http://webteamalpha.com/triggering-datatables-to-search-only-on-enter-key-press/'e teşekkürler .

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

    } );
} );

Bunu kullan

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

orijinal soruyu cevaplamasa da, verilerim üzerinde karmaşık ve yavaş bir arama yaptım. filtre olayı her tuşa basıldıktan sonra tetikleniyordu, bu da 10 karakterden sonra oldukça belirgin bir gecikme anlamına geliyordu. bu yüzden, filtre olayı tetiklenmeden önce bir tuşa basıldıktan sonra kısa bir gecikme getirerek, ardından bir tuşa basıldığında sayacı sıfırladı ve önceki aramayı engellediğinden, aramanın çok daha hızlı görünmesini sağladım. diğerleri bunu faydalı bulabilir.

Stony ve Christian Noel'den gelen cevapları bunu yapmak için kullandım:

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

Sunucuya ajax çağrısını bununla geciktirebilirsiniz.

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

Bu kod, tuşa basma arasındaki süre 300 ms'den azsa ajax çağrısını durduracaktır, bu şekilde bir kelime yazdığınızda sadece bir ajax çağrısı ve sadece yazmayı bıraktığınızda çalışır. Daha fazla veya daha az gecikme elde etmek için gecikme parametresi (300) ile 'oynayabilirsiniz'

Muhtemelen eklentiyi değiştirmeniz gerekecektir.

Ve onu X karakter yapmak yerine, bir gecikme kullanın, böylece 1 saniye kadar yazmayı bıraktıklarında arama başlar.

Dolayısıyla, şu anda aramayı tetikleyen keydown / keyup bağlama bir zamanlayıcı ile değiştirilecektir ...

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

API kullanan veri tabloları 1.10.12 için sabit sürüm ve 'girişin' bağlantısını doğru şekilde çözme. Ayrıca karakter sınırının altında geri boşlukta arama temizliği eklendi.

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

Eski sürümü kullanıyorsanız, öyle görünüyor. Richard'ın çözümü iyi çalışıyor. Ama onu kullandığımda, silme değil, sadece yeni etkinlikler ekledim. Çünkü kod çalıştırıldığında, tablo henüz oluşturulmamıştır. Bu yüzden fnInitComplete yönteminin olduğunu buldum (tablo oluşturulduğunda ateş) ve bunu Ricard'ın çözümüne uyguladım. İşte burada

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

Bu kodu, 3 karakter kullandıktan sonra arama yapmak için Medtronic veri tablosunda veya başka bir kodda kullanabilirsiniz:

        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 ilk gösteri için.

Bir onKeyUp olay işleyicisine eklenen girilen dizenin uzunluğunu test etmek ve minimum uzunluğa ulaşıldığında arama işlevini tetiklemek için kendi işlevinizi yazabilir misiniz?

Şu çizgide bir şey:

input.onKeyUp (function () {
    eğer (input.length> 3) {
        mySearchfunction ();
    }
});

... yani, sözde kod şeklinde ama jist'i elde edersiniz.

Aramayı 3 karaktere kadar kısıtlamak için parametreyi minimum uzunluğa göre kullanabilirsiniz:

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

Data.currentTarget.value.length kullanarak aktarılan verilerin uzunluğunu alabilirsiniz, lütfen aşağıya bakın.

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

ve tabii ki metni kaldırırken bu kodun çalışmasını istersiniz, bu nedenle değeri 0 olarak ayarlayın

Bu, DataTables sürüm 1.10.19 ile çalışır . Yalnızca web sitesi şablonunuza js eklemeyi gerektirir - farklı sayfalarda yapılandırılmış birden çok dataTable'a sahip bir site için yararlıdır. Yavaş xhr yükleme tabloları için de yararlıdır, şu anda çalışan tüm bitene kadar yeni xhr isteklerine izin vermez. Kullanılan arama işlevi, eklentinin arama işlevini orijinal olarak nasıl kurduğuna çok benzer .

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

'Değişim'de uzunluğu kontrol etmemenizin bir nedeni var mı?

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

Jquery.datatables.js'yi değiştirmeniz gerekiyor

----- tabi güncellendi, uzunluk> 3 için bir kontrol yapabilirsiniz, ancak yine de bir zamanlayıcıya ihtiyacınız olduğunu düşünüyorum. Çok fazla veriniz varsa, her karakter güncellemesinden sonra filtrelenmesini istemezsiniz.

Bu yöntem dahilinde:

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

Cevaplardan birinde gösterildiği gibi tuşa bir zamanlayıcı ekleyin.

Ardından bu siteye gidin http://jscompress.com/

Ve değiştirilmiş kodunuzu geçtiğinizde js küçültülür.