第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

數(shù)據(jù)表單列搜索輸入鍵問題

數(shù)據(jù)表單列搜索輸入鍵問題

拉風(fēng)的咖菲貓 2023-11-13 14:52:31
當(dāng)按 Enter 鍵時,我在使用單列搜索實現(xiàn)數(shù)據(jù)表時遇到問題。首先,我使用數(shù)據(jù)表指南實現(xiàn)它,如下所示:table.columns().every( function () {        var that = this;        $( 'input', this.footer() ).on( 'keyup change clear', function () {            if ( that.search() !== this.value ) {                that                    .search( this.value )                    .draw();            }        } );    } );上面的代碼工作正常。但是,由于該表使用服務(wù)器端處理,因此通過按鍵進行搜索的成本太高。因此,我嘗試更改代碼,以便它按 Enter 鍵進行搜索:table.columns().every(function () {    var that = this;    $('input', this.footer()).keypress(function (e) {        if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls            e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this            if (that.search() !== this.value) {                that                    .search(this.value)                    .draw();            }        }    });});使用上面的代碼,如果我編寫一個搜索值并按 Enter 鍵,它將按預(yù)期進行搜索。但是,如果我為 編寫搜索值column1但按 Enter 鍵column2,則不會使用 中的值執(zhí)行搜索column1。這會導(dǎo)致用戶需要在每一列上按 Enter 鍵才能添加/刪除搜索值。用戶無法先在所需列中寫入搜索值,然后在其中一列上按 Enter 進行搜索。據(jù)我所知,該表存儲了該值,并且只有在特定列上按 Enter 鍵后才會更新該值。我不知道如何解決這個問題。
查看完整描述

2 回答

?
慕無忌1623718

TA貢獻1744條經(jīng)驗 獲得超4個贊

我在幫助下解決了這個問題。我的數(shù)據(jù)表是服務(wù)器端的,具有動態(tài)生成的列,因此我需要從每個輸入框獲取輸入值并搜索每個列。當(dāng)我了解更多時,我會更新這個答案。


這是工作代碼:


table.columns().every(function () {               

    $('input', this.footer()).keypress(function (e) {

        if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls

            e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this

            var header = table.table().header(); //header because I moved search boxes to header

            var inputBoxes = header.getElementsByTagName('input');

            $.each(data.columns, function (index) {

                var inputBoxVal = inputBoxes[index].value;

                table.column(index).search(inputBoxVal);

            });

            table.draw();

        }

    });

});


查看完整回答
反對 回復(fù) 2023-11-13
?
萬千封印

TA貢獻1891條經(jīng)驗 獲得超3個贊

有兩種方法可以解決這個問題:

  • 用于activeElement查看哪些元素具有焦點,并進行相應(yīng)的搜索。

  • 在原始事件發(fā)生后設(shè)置一個計時器keyup,并在幾秒鐘后進行搜索:

var searchTimer;


table.columns().every( function () {

? var that = this;

? $( 'input', this.footer() ).on( 'keyup change clear', function () {

? ? if ( that.search() !== this.value ) {

? ? ? clearTimeout(searchTimer); // Reset timer

? ? ? var value = this.value;

? ? ? searchTimer = setTimeout(function() {

? ? ? ? that.search(value).draw();

? ? ? }, 3000); // Wait 3 seconds

? ? }

? });

});


查看完整回答
反對 回復(fù) 2023-11-13
  • 2 回答
  • 0 關(guān)注
  • 148 瀏覽

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號