【问题标题】:Column filtering DataTable, remove specific column filter列过滤DataTable,去掉特定列过滤
【发布时间】:2021-07-22 01:08:13
【问题描述】:

我正在使用 DataTables 库中的列过滤器,它为我的表中的每一列添加了一个过滤器,问题和我需要从第一列中删除过滤器,因为它是一个复选框。我尝试了一些没有成功的事情,我将留下我正在使用的代码。

链接数据表:https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

我的桌子:

<table id="table" class="table table-sm table-responsive display text-center" style="width:100%">
            <thead>
                <tr>
                    <th><input type="checkbox" id="selectAll" /></th>
                    <th>Id</th>
                    <th>Filial</th>
                    <th>Serie</th>
                    <th>Documento</th>
                    <th>Nop</th>
                </tr>
            </thead>
           
        </table>

JS:

     $(document).ready(function () {
    $("#selectAll").click(function () {
        let select = $(this).is(":checked")
        $("[type=checkbox]").prop('checked', select)
    })
});

$(document).ready(function () {
    $('#table thead tr').clone(true).appendTo('#table thead');
    $('#table thead tr:eq(0) th').each(function (i) {
            $(this).html('<input type="text" />');

            $('input', this).on('keyup change', function () {
                if (table.column(i).search() !== this.value) {
                    table
                        .column(i)
                        .search(this.value)
                        .draw();
                }
            });         
    });

【问题讨论】:

  • 您好,我需要从第一列中删除搜索输入,此链接显示如何在不删除过滤器的情况下禁用列中的搜索
  • 首先要避免绘制&lt;input&gt; 控件,请查看以下行:$('#table thead tr:eq(0) th').each( function (i) {。这里,i 代表一个循环计数器。当计数器为0 时,您正在为列索引0(第一列)构建输入控件。因此,您可以在该函数内使用 if(i &gt; 0) { ... } 语句来忽略循环的第一次迭代。
  • 这可以从第一列中删除输入,但它删除了我在第一列中放置的复选框,我上传了之前和之后的图像,我需要保留此复选框第一个选择所有字段
  • 你可以edit你的问题来展示你更新的方法(给我们看代码!)并解释发生了什么。否则,我们真的不知道您做了哪些更改。

标签: javascript datatables


【解决方案1】:

为了避免一开始就绘制控件,请看一下这一行:

$('#table thead tr:eq(0) th').each( function (i) { 

这里,i 代表一个循环计数器。当计数器为 0 时,您正在为列索引 0(第一列)构建输入控件。因此,您可以在该函数内使用 if(i &gt; 0) { ... } 语句来忽略循环的第一次迭代。

由于您要克隆的标题行已经包含第一列中的复选框,因此您可能还需要使用$( this ).empty(); 删除“克隆”复选框。

$('#table thead tr:eq(0) th').each(function(i) {

  if (i == 0) {
    $( this ).empty();
  } else {
    var title = $(this).text();

    $(this).html('<input type="text" />');

    $('input', this).on('keyup change', function() {
      if (table.column(i).search() !== this.value) {
        table
          .column(i)
          .search(this.value)
          .draw();
      }
    });
  }

});

【讨论】:

    猜你喜欢
    • 2019-09-20
    • 2017-10-04
    • 2011-10-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多