JQUery.DataTables自定义过滤器 [英] JQUery.DataTables custom filter

问题描述

在我的ASP.NET MVC应用程序中，我使用jQuery DataTables列出我的客户.我的jQuery版本是3.3.1.我为我的DataTable使用了这段代码，并且效果很好:

In my ASP.NET MVC application I use jQuery DataTables in order to list my clients. My jQuery version is 3.3.1. I use this code for my DataTable and it works fine:

objectif将通过另一个搜索输入来过滤数据表(应用程序的设计由设计者强加). 为此，我使用以下代码

The objectif is to filter the datatable by another search input (Design of the application is imposed by the designer). To achieve this, I use this code

 <input type="text" onkeyup="filterTable(this);" id="txt-search" maxlength="20" placeholder="Rechercher..." class="capron-input-text pull-right" />   


//Sets the value of the search input of the datatable and triggers the keyup event. It works fine.
function filterTable(sender) {
    var filterText = $(sender).val();
    var searchInput = $("#tbl-data_filter").find("input");
    $(searchInput).val(filterText);

    $(searchInput).trigger("keyup");
}

 $(document).ready(function() {
  $('#tbl-data').dataTable();

  // These two lines hides related fields. It works.
  $("#tbl-data_filter").hide();
  $("#tbl-data_length").hide();
});

当我使用此代码转换DataTable时，本地化工作正常，但搜索输入和行数Dropdown仍然可见:

When I translate the DataTable using this code, the localisation works fine but the search input and the row count Dropdown stays visible:

 $(document).ready(function () {
  $('#tbl-data').dataTable({
    "language": {
      "url": "/Resources/Localisation/French.json"
    }
  });

  // It doesn't work.
  $("#tbl-data_filter").hide();
  $("#tbl-data_length").hide();
});

如果我在手动事件中调用这些行，例如任何控件的click事件，它将再次起作用.我认为DataTable()方法是异步的，在完成要隐藏的元素的翻译和创建之前，这些行会执行.

If I call these lines in a manual event, like the click event of any control, it works again. I think the DataTable() method is asynchronous and before it completes the translation and creation of elements that I want to hide, the lines execute.

有人有什么想法吗?

推荐答案

经过一番搜索，我找到了这个解决方案:

After some search, I found this solution:

我在CSS中添加了这些行

I added these lines in my css

#tbl-data_filter{
   display:none;
}

#tbl-data_length{
  display:none;
}

这篇关于JQUery.DataTables自定义过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！