javascript - Jquery数据表搜索选项未启用排序图标

Question

我被困在 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;
                    }
                });
            }
        }
    }
}

Answer 1

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

在不止一行上，表格排序和指针恢复“正常”。

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

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类并设置光标。

请注意，当没有结果时，仍然有一行显示“未找到匹配的记录”。但由于本例中只有 1 个 td...除以列数，我们必须考虑“一行或更少的行”。
;)

看看这个 CodePen .