Jquery数据表搜索选项不启用排序图标

Jquery Data table Search Option is not enable sorting icon

本文关键字：排序 图标 不启用 选项 数据表 搜索 Jquery      更新时间：2023-09-26

我被困在jquery数据表。如果我们使用jquery数据表，那么它提供默认的搜索选项。但问题是，如果我搜索特定的记录，如果内容不匹配或我发现单个记录。然后我需要删除排序图标。它将工作，但当我按回空间并删除搜索内容，然后像往常一样它显示所有记录。但是现在排序图标是禁用的，它需要再次启用，那么解决方案是什么呢?

这个函数调用:-

$('#datatable-information').on('draw.dt', function () {
    disableSortingSearchOption(oTable, 'datatable-information_filter input');

这是函数定义:-

function disableSortingSearchOption(oTables, tableClass) {
    if (oTables != null) {
        var rowCount = oTables.fnSettings().fnRecordsDisplay();
        {
            if (rowCount == 0 || rowCount == 1) {

                var oSettings = oTables.fnSettings();
                //Remove sort icon
                $('.DataTables_sort_icon').remove();
                //Remove hand cursor
                $('.datatable th').css('cursor', 'default');
                //Iterate through each column and disable sorting 
                $('.' + tableClass + ' th').each(function (index) {
                    if ((oSettings.aoColumns[index]) != undefined) {
                        oSettings.aoColumns[index].bSortable = false;
                    }
                });
            }
        }
    }
}

这是一个简单的方法，可以删除表标题上的排序箭头，并在绘制的表有1行或更少时将指针更改为default。

在多个行上，表排序和指针返回"正常"。

我的解决方案与你提供的代码完全不同。

function disableSortingSearchOption(oTables) {
  if (oTables != null) {
    var colCount = 0;
    $(oTables).find('th').each(function(){
      colCount++;
    });
    //console.log(colCount+" colunms");
    var rowCount = 0;
    $(oTables).find('td').each(function(){
      rowCount++;
    });
    rowCount = rowCount/colCount;
    //console.log(rowCount+" rows");
    if (rowCount <= 1) {
      //Remove hand cursor
      $(oTables).find('th').css('cursor', 'default');
      //Remove sort arrows
      $(oTables).find('th').removeClass('sorting');
    }else{
      //Add hand cursor
      $(oTables).find('th').css('cursor', 'pointer');
      //Add sort arrows
      $(oTables).find('th').addClass('sorting');
    }
  }
}

我们需要知道行数…
为了实现这一点，我们首先计算列的数量和整个表的td的数量。

行数量是td数量除以列数量。
根据这个数字，我们可以在所有th上添加或删除sorting类，并设置光标。

注意，当没有结果时，仍然有一行显示" no matching records found"。但是由于在这种情况下只有1个td…除以列数，我们必须考虑"一行或更少一行"。
;)

看看这个CodePen

相关文章：