简体   繁体   English

Datatables JS-HTML5禁用特定列排序的方法?

[英]Datatables JS - HTML5 Way To Disable Sorting On Specific Column(s)?

You know how you can use HTML5 to initialize some of the options on your table rather than using Javascript to accomplish the same. 您知道如何使用HTML5初始化表上的某些选项,而不是使用Javascript来完成相同的操作。 Whether one way better than the other is outside of the scope of this question. 一种方法是否优于另一种方法不在此问题的范围内。

Please See HTML 5 data attributes To Set Options To Get More Information 请参阅HTML 5数据属性设置选项以获取更多信息


The goal of this question is to find an answer to how can some columns be disabled using HTML5 initialization. 这个问题的目的是找到一个答案,如何使用HTML5初始化来禁用某些列。

The basic Javascript Initializer looks like this: 基本的Javascript初始化程序如下所示:

$(document).ready(function() {
$('#example').DataTable();

} ); });


Then this is for instance how you would set the page length using JS withing the initialization function: 然后,例如,这是您如何使用带有初始化功能的JS设置页面长度的方法:

  $('#example').dataTable( {
      "pageLength": 50
  } );

Ok getting closer - here is a JS way to do disable sorting on column 1 and 3 for instance it for instance - adding this line inside the initialization function: 好吧,接近-这是一种JS方法,例如在第1列和第3列上禁用排序-在初始化函数内添加以下行:

 $('#example').dataTable( {
      "pageLength": 50,
      "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 1, 3 ] }]
  } );

If your table has at least for columns those 2 of them would not be sortable. 如果您的表至少具有用于列的列,则其中的2个列将无法排序。

Now there is also a way for instance to set the page length, (display order...) for a table using HTML5 attribute data-, such as this: 现在,还有一种方法可以使用HTML5属性data-为表设置页面长度(显示顺序...),例如:

<table data-order='[[ 1, "asc" ]]' data-page-length='25'>
<thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th data-class-name="priority">Salary</th>
    </tr>
</thead>



My Question Is: 我的问题是:

How to make for instance column 1 and 3 not sortable USING HTML5 DATA- ATTRIBUTE? 例如,如何使用HTML5数据属性使第1列和第3列不可排序?

I have tried every option I can imagine - this is my last attempt 我尝试了所有我能想到的选择-这是我的最后一次尝试

data-columnDefs="[{"bSortable": false, "Targets": [3]}]"



The fact that I am here indicates that I have tried all the resources I could possibly use, including Datatable JS Official Website , Google, and my indeed most favorite one StackOverflow which although has some somewhat related questions but do not help to solve this specific problem. 我在这里的事实表明我已经尝试了所有可能使用的资源,包括Datatable JS官方网站 ,Google和我确实最喜欢的一个StackOverflow,尽管存在一些相关问题,但无助于解决此特定问题。

And as always - I appreciate every one of you my brothers and sisters for any help and effort on that questions!!! 和往常一样-我感谢您的兄弟姐妹在此问题上的任何帮助和努力! Love & Piece Be With You All My People!!! 爱与碎片与我所有的人在一起!!!

You were very close. 你很亲近 The correct data- attribute is shown below: 正确的data-属性如下所示:

<table id="example" class="display" data-column-defs='[{"sortable": false, "targets": [1,3]}]'>

According to the manual : 根据手册

There are two important points to consider when using data-* attributes as initialization options: 使用data-*属性作为初始化选项时,有两个要注意的要点:

  • jQuery will automatically convert from dashed strings to the camel case notation used by DataTables (eg use data-page-length for pageLength ). jQuery将自动从虚线字符串转换为DataTables使用的驼峰大小写表示法(例如,将data-page-length用于pageLength )。
  • If using a string inside the attribute it must be in double quotes (and therefore the attribute as a whole in single quotes ). 如果在属性内使用字符串,则它必须用双引号引起 (因此,整个属性用单引号引起来 )。 This is another requirement of jQuery's due to the processing of JSON data data. 由于处理JSON数据,这是jQuery的另一个要求。

See this jsFiddle for code and demonstration. 有关代码和演示,请参见此jsFiddle

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM