删除jQuery DataTables中的排序箭头

2020/12/24 05:51 · jquery ·  · 0评论

我正在使用jQuery DataTables插件。

有没有办法摆脱它们显示在标题中以指示排序选项的小箭头?我想保留通过单击按此列排序的标题的功能,我只是不想显示箭头图标,因为它们会更改我的列标题的布局。

Firebug显示我的标头如下:

<th class="sorting" role="columnheader" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" style="width: 151px;" aria-label="Category: activate to sort column ascending">Category</th>

图标background : url(..)在CSS类上定义通过以下方式禁用它们:

.sorting, .sorting_asc, .sorting_desc {
    background : none;
}

请参阅jsfiddle-> http://jsfiddle.net/5V2Dx/注意:此解决方案适用于1.9.x数据表!


更新使用数据表1.10.x时,用于重置标题图标的CSS略有不同:

table.dataTable thead .sorting, 
table.dataTable thead .sorting_asc, 
table.dataTable thead .sorting_desc {
    background : none;
}

参见-> http://jsfiddle.net/kqpv3ub9/(更新的演示使用dataTables 1.10.11

所提供的解决方案均不适合我。但是我刚刚找到了这个。

.dataTable > thead > tr > th[class*="sort"]:before,
.dataTable > thead > tr > th[class*="sort"]:after {
    content: "" !important;
}

PS.:DataTables版本 "datatables": "~1.10.2"

您可以使用如下所示的datatable属性,它将隐藏datatable列中的排序图标:

"targets": 'no-sort',
"bSort": false,
"order": []

对于新版本的DataTables:

<style>
     .dataTable > thead > tr > th[class*="sort"]::after{display: none}
</style>

(因为DataTables 1.10以来)如果不需要它,禁用顺序是防止箭头控件出现的一种方法。通过将“ ordering”选项指定false在表初始化上执行此操作

范例

$("#example").DataTable({
   "ordering": false
});

JSFiddle

说明文件:

启用或禁用列排序-就这么简单!

注意:完全没有排序。

另一种选择是禁用所有列的排序。然后,您可以使用控制箭头(仅显示在已排序的列上)以编程方式设置顺序

var after = $('#after').DataTable({
  "order": [[1,"asc"]],                       // sorting 2nd column
  "columnDefs": [
    { "orderable": false, "targets": "_all" } // Applies the option to all columns
  ]
});

JSFiddle

快速技巧(这将隐藏排序按钮,但功能仍然有效):-创建CSS:

.no-sort::after { display: none!important; }

.no-sort { pointer-events: none!important; cursor: default!important; }
  • 然后将其添加到表的标题中:
<th class="no-sort">Heading</th>

无论如何,这是一个很长的答案,您可以使用这段代码来禁用特定列的排序功能(base-idx:0),然后删除排序按钮:

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );

但是,如果您在第一列中将orderable设置为false,这将无法完美地工作。排序功能将停止,但按钮仍在那里。因为默认情况下,第一列设置为升序(“ order”:[[0,'asc”])。要禁用此“讨厌的”默认设置,请再添加一个选项:“ order”:

$('#example').dataTable( {
      "columnDefs": [
        { "orderable": false, "targets": 0 }
      ],
      "order": [],  // not set any order rule for any column.
});

箭头具有与之关联的某些类别。您可以使用以下CSS隐藏这些元素。

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    display: none;
}

这一切似乎有点复杂,为什么不在标签data-sortable="false"使用属性<th>,然后removeAttribute("class");在带有click触发器的JS中进行操作呢?

使用CSS:

.DataTables_sort_icon { display:none;}

这对我有用

.dataTable > thead > tr > th[class*=sort]:after{
    display:none;
}

例:

<display:column property="......" title="......" sortable="true"/>

这将使该列可排序而不显示箭头。

在最新版本的数据表/ CDN上,它又有所不同

table.dataTable thead .sorting:after
{
    display: none;
}

隐藏过滤器。

问候

<style>
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    display: none;
}
</style>

可以在我的机器上使用DT 2.2.3

对于DataTables 1.10.7,davidkonrad css样式的一个小变化

table.dataTable thead th.sorting, 
table.dataTable thead th.sorting_asc, 
table.dataTable thead th.sorting_desc {
    background : none;
}

包括“ th”元素。

这将让你改变了默认的排序,自定义图标,这是我从伊尔沙德的后上方,从Suschil的帖子衍生图标这里由于禁用字体渲染的浏览器不得不这样做,这是我们无法控制的。

.dataTable > thead > tr > th[class*="sort"]::after{display: none}

table.dataTable thead .sorting { background: url('/Content/images/sort-both.png') no-repeat center right; }
table.dataTable thead .sorting_asc { background: url('/Content/images/sort-asc-list.png') no-repeat center right; }
table.tabledataTable thead .sorting_desc { background: url('/Content/images/sort-desc-list.png') no-repeat center right; }

就我而言,这很好。

.sorting:after,
.sorting_asc:after,
.sorting_desc:after{
    content: "";
    background: none !important;
}

这对我有用。

 #sample_1>thead>tr>th.sorting, #sample_1>thead>tr>th.sorting_asc, #sample_1>thead>tr>th.sorting_desc {
        background : none;

    }
    #sample_1>thead>tr>th.sorting:after, #sample_1>thead>tr>th.sorting_asc:after, #sample_1>thead>tr>th.sorting_desc::after {
        content: none; 
    }

CSS类sorting_ascsorting_desc带来图标。

对表进行本地化修复的最简单解决方案是在表初始化后,在fnInitComplete中执行以下操作:

$(TABLE).find("thead th").removeClass("sorting_asc");

$('#sample_1 thead tr th:first-child').removeClass('sorting');

放在CSS下方。它只会隐藏图标,但是可以进行排序。

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
  background-image: none!important;
}

将此样式添加到您的页面

table.dataTable thead .sorting::after {
    opacity: 0.2;
    content: "";
}

实际上,您也可以在文件夹中删除图标图像(而不是添加新的CSS):

DataTables-1.10.16\images

在此处输入图片说明

还有另一种解决方案,可以隐藏列中的排序图标,将CSS类应用于标题,例如:

<th class="sorting_disabled"></th>

并定义样式的css类

.sorting_disabled
{
   background-image:none !important;
}

此解决方案针对jquery datatable版本1.10+进行了工作和测试

我没有在以前的答案中看到的一种方法,我相信做到这一点的最佳方法是使用jQuery DataTable。这样,您就可以更好地控制表的事件以及如何与之交互。

$('.tableclass').dataTable({
  "order":[[0,"desc"],[1,"asc"]], //Enable ordering by first column then second
  "aoColumnDefs": [
    { "bSortable": false, "aTargets": [ "_all" ] } //disable ordering events and takeout the icon
   ]
 });

当然,CSS选项仍然是有效的。

本文地址:http://jquery.askforanswer.com/shanchujquery-datatableszhongdepaixujiantou.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!