Soru herhangi bir tuşa basma yerine enter tuşuna basıldığında global aramalar için global arama


Ben kullanıyorum datatables jQuery eklentisi. ASP.Net projem için sunucu tarafı işlem işlevini kullanıyorum.

Küresel aramada her yazdığımda, yazdığım her harfle, sunucu tarafı yöntemini çağırdığında ve bana sonuç getirdiğinde, sinir bozucu olur.

Filtre edilecek veriler büyük olduğunda daha fazla sinir bozucu olur.

Herhangi bir tuşa basmadan, tuşa basıldığında, arama yöntemini çağırmak için herhangi bir seçenek veya yol var mı?


16
2018-01-31 06:08


Menşei




Cevaplar:


Yapmanız gereken sadece, DataTables'ın giriş kutusuna koydukları tuşa basma olay işleyicisini açmak ve daha sonra kendi arayacağınız şeyi eklemektir. fnFilter Dönüş tuşu (keyCode 13) algılandığında.

$("div.dataTables_filter input").keyup( function (e) {
    if (e.keyCode == 13) {
        oTable.fnFilter( this.value );
    }
} );

Başka

$(document).ready(function() {
   var oTable = $('#test').dataTable( {
                    "bPaginate": true,
                "bLengthChange": true,
                "bFilter": true,
                "bSort": true,
                "bInfo": true,
                    "bAutoWidth": true } );
   $('#test_filter input').unbind();
   $('#test_filter input').bind('keyup', function(e) {
       if(e.keyCode == 13) {
        oTable.fnFilter(this.value);   
    }
   });     
} );

16
2018-01-31 06:16



teşekkürler @Dasun. Çalışıyor. - Prasad Jadhav
firebug hatası: oTable.fnFilter bir işlev değil - user6890
İlk seçenekte yanılmadığım sürece hatalı ) sonra this.value. - DavidT
zamanımı çok fazla kurtardı. Başka bir bölüm kullandım. Sadece kimliği değiştirildi. :-) Benim için sihir gibi çalıştı. :) - webcoder


Ben de Techie'nin kodunu denedim. Tabii ki hata mesajını da aldım fnFilter is not a function. Aslında, hattın değiştirilmesi oTable.fnFilter(this.value); vasitasiyla oTable.search( this.value ).draw(); işi yapardı, ama benim durumumda, sunucu tarafındaki aranan tablonun ilklendirilmesinden önce, yok / bağla işlevleri çalıştırıldı. Bu yüzden, unbind / bind işlevlerini initComplete geri arama işlevi ve her şey iyi çalışıyor:

$(document).ready(function() {
    var oTable = $('#test').dataTable( {
        "...": "...",
        "initComplete": function(settings, json) {
            $('#test_filter input').unbind();
            $('#test_filter input').bind('keyup', function(e) {
                if(e.keyCode == 13) {
                    oTable.search( this.value ).draw();
                }
            }); 
        }
    });    
});

14
2018-06-19 11:48



nasıl geçebilirsin oTable gibi oTable.search(...) ne zaman initComplete aslında son bölüm olarak çalıştırılıyor oTable başlatma? - CodeBurner
Ne demek istediğini anlama, @ Tall'jeezzy? DataTable'ın başlatılması bittiğinde, arama alanına enter tuşu için anahtar dinleyiciyi ekliyorum ve oTable başlatılması bittiğinden bu yana nesne ... - Jan
Çalışmayı başlatan initComplete hakkında özel olan nedir? - Dejell
Açıklamamda açıklamaya çalıştım. Sizin için tam olarak net olmayan nedir? - Jan


1.10 sürümündeki api değişimi ile bunun nasıl yapılacağı aşağıda açıklanmıştır.

    //prevents form submissions if press ENTER in textbox
    $(window).keydown(function (event) {
        if (event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });

    var searchbox = $('#ordergrid_filter input');
    searchbox.unbind();
    searchbox.bind('keyup', function (e) {
        if (e.keyCode == 13) {
            ogrid.search(this.value).draw();
        }
    });

    var uitool = '';
    searchbox.on("mousedown", function () {
        uitool = 'mouse';
    });
    searchbox.on("keydown", function () {
        uitool = 'keyboard';
    });

    //Reset the search if the "x" is pressed in the filter box
    searchbox.bind('input', function () {
        if ((this.value == "") && (ogrid.search() != '') && (uitool == 'mouse')) {
            ogrid.search('').draw();
            return;
        }
    });

4
2018-05-15 20:42



Benim için çalışıyor, ama "ogrid" yerine "tablo" kullandığımı farketmem biraz zaman aldı. - Laurence Cope
Benim için çok zaman kaydettim. Teşekkürler @LaurenceCope - abdalla arbab


Bunu Datatables'de (v1.10.15) yapıyorum. Ayrıca, giriş boşsa, geri boşluğu ve silme düğmesinin arama isteğini göndermesini engellerim.

$.extend( $.fn.dataTable.defaults, {
    "initComplete": function(settings, json) {
        var textBox = $('#datatable_filter label input');
        textBox.unbind();
        textBox.bind('keyup input', function(e) {
            if(e.keyCode == 8 && !textBox.val() || e.keyCode == 46 && !textBox.val()) {
                // do nothing ¯\_(ツ)_/¯
            } else if(e.keyCode == 13 || !textBox.val()) {
                table.search(this.value).draw();
            }
        }); 
    }
});

3
2017-08-15 06:05



Nereden table nesne geldi mi - Prashant Pokhriyal
@PrashantPokhriyal Uzun zaman oldu. Hatırlamıyorum ama bence DataTable örneği olmalı. var table = $('#datatable').DataTable({ /* ... */ }); - abdalla arbab


Sonunda bu şekilde kullanarak çalıştı

var oTable = $('#table-name').dataTable({
    processing: true,
    serverSide: true,
    ajax: "file.json",
    initComplete: function() {
        $('#table-name_filter input').unbind();
        $('#table-name_filter input').bind('keyup', function(e) {
            if(e.keyCode == 13) {
                oTable.fnFilter(this.value);
            }
        });
    },
    ....

Şerefe


0
2018-04-28 10:51



Çalışmayı başlatan initComplete hakkında özel olan nedir? - Dejell
initComplete işlevi, varsayılan tetikleyiciyi engeller ve kendimden birini ekler - Jaume Bosch


JQuery ile kullanabilirsiniz.

// get the global text
var globalSearch = $("#txtGlobal").val();

// then put them in the search textboxes
$("input[type='search']").val(globalSearch);
// trigger keyup event on the datatables
$("input[type='search']").trigger("keyup.DT");

$("input[type='search']") Tüm arama metin kutularını alır.


0
2017-10-06 17:48