亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

輸入鍵問題上的數據表單個列搜索

輸入鍵問題上的數據表單個列搜索

ABOUTYOU 2022-06-16 17:24:44
按 Enter 鍵時,我在使用單個列搜索實現數據表時遇到問題。起初,我使用Datatables 指南來實現它,如下所示: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();            }        } );    } );上面的代碼工作正常。但是,由于該表使用服務器端處理,因此在按鍵上進行搜索的成本太高。所以,我正在嘗試更改代碼,以便它在 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,它會按預期進行搜索。但是,如果我寫了一個搜索值column1但按 enter on column2,它不會使用 中的值執行搜索column1。這導致用戶需要在每列上按 Enter 以添加/刪除搜索值。用戶無法先在所需列中寫入搜索值,然后在其中一個列上按 Enter 進行搜索。根據我能夠收集的信息,該表存儲了該值,并且在特定列上按下 Enter 之前它不會更新。我不知道如何解決這個問題。
查看完整描述

2 回答

?
動漫人物

TA貢獻1815條經驗 獲得超10個贊

我能夠在幫助下解決它。我的數據表是服務器端的動態生成列,所以我需要從每個輸入框中獲取輸入值并搜索每一列。當我了解更多時,我會更新這個答案。


這是工作代碼:


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

        }

    });

});


查看完整回答
反對 回復 2022-06-16
?
侃侃無極

TA貢獻2051條經驗 獲得超10個贊

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


用于activeElement查看哪些元素具有焦點,并相應地進行搜索。

在您的原始事件之后設置一個計時器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

    }

  });

});


查看完整回答
反對 回復 2022-06-16
  • 2 回答
  • 0 關注
  • 136 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號