我正在使用DataTable来显示一些数据,它工作得很好,但我想稍微自定义它,不确定如何自定义。我想做的是当用户点击一个列标题来排序该列时,我希望它最初是降序而不是升序。有什么方法可以做到这一点吗?
piztneat1#
看看这个:DataTables sorting direction control example您可以执行以下操作:
$(document).ready(function() { $('#example').dataTable( { "aoColumns": [ { "asSorting": [ "desc", "asc" ] }, //first sort desc, then asc ] } ); } );
bsxbgnwa2#
DataTables的当前版本(1.10)提供了以下方法,通过columnDefs下的属性orderSequence(或columns,但灵活性较低)切换此默认排序顺序。这是关于orderSequence的文档。
columnDefs
orderSequence
columns
"columnDefs": [ { "orderSequence": [ "desc", "asc"], "targets": [ 1 ] }, ]
正如它还提到的,当单击DESC或ASC时,您可以强制一个列 * 仅 * 排序,这对您的界面很有好处。在我的例子中,我需要让列在第一次单击时按降序排序,因为列的数量不确定,所以我决定将示例切换为指向列标题的class名称,而不是将每个列显式定义为"targets":[1],"targets":[2],...[n],或者通过编程构建我所关心的列的索引数组。您可以通过多种方式定位列according to here。最终结果是一个如下所示的表定义:
class
"targets":[1],"targets":[2],...[n]
<table><thead><tr> <th class='descendFirst'>DESCend when first clicked</th> <th>a normally sorted ASC->DESC->... column</th> ... </tr></thead></table>
数据表的功能如下:
$("#table").dataTable({ "columnDefs": [ {"orderSequence": ["desc","asc"], "targets":"descendFirst" }, ] });
瞧!首先在所有列上单击降序排序,其中<th>标记有类'descendFirst'(任意选择的描述性类名)。
<th>
jgzswidk3#
作为对最后排序空白的回应,我想到了(我只是讨厌先把空格排序!!)
// custom sort functions jQuery.fn.dataTableExt.oSort['text-blankslast-asc'] = function (x, y) { x = (x == "") ? String.fromCharCode(255) : x; y = (y == "") ? String.fromCharCode(255) : y; return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }; jQuery.fn.dataTableExt.oSort['text-blankslast-desc'] = function (x, y) { x = (x == "") ? String.fromCharCode(0) : x; y = (y == "") ? String.fromCharCode(0) : y; return ((x < y) ? 1 : ((x > y) ? -1 : 0)); };
// init example $('#table2').dataTable({ "bJQueryUI": true, "aoColumns": [ null, { "sType": "text-blankslast" }, { "sType": "text-blankslast" }, { "sType": "text-blankslast" }, null ] });
1qczuiv04#
如果像Dave和我这样的人正在寻找一种方法来设置所有列的排序顺序,下面的方法可能对您有用。为了更改所有列的排序顺序,我设置了一个循环,以便在表示例化后更改设置:
$(document).ready(function() { var example_table = $('#example').dataTable(); $.each(example_table.dataTableSettings[0].aoColumns, function(key, column) { column.asSorting = [ "desc", "asc" ]; } ); } );
在jQuery 1.11.0和DataTable 1.10.0上进行了测试
q3qa4bjr5#
唯一的方法,让您的空白最后将是一个有点黑客(因为排序是正确的工作)。不要从服务器返回空值,而应返回如下内容:“[空白]”我还没有测试过,但我很确定方括号会出现在字母数字代码之后。而且方括号传统上象征着还没有完成或确认的东西。
qco9c6ql6#
这对我很有效:
settings = { aoColumnDefs: [ { orderSequence: ["desc", "asc"], aTargets: ['_all'] } ]}; $('.dataTable').DataTable(settings);
xtupzzrd7#
下面的代码用于为所有列设置默认的排序顺序:先降序,然后升序。
aoColumnDefs: [{ orderSequence: ["desc", "asc"], aTargets: ['_all'] }],
7条答案
按热度按时间piztneat1#
看看这个:DataTables sorting direction control example
您可以执行以下操作:
bsxbgnwa2#
DataTables的当前版本(1.10)提供了以下方法,通过
columnDefs
下的属性orderSequence
(或columns
,但灵活性较低)切换此默认排序顺序。这是关于
orderSequence
的文档。正如它还提到的,当单击DESC或ASC时,您可以强制一个列 * 仅 * 排序,这对您的界面很有好处。
在我的例子中,我需要让列在第一次单击时按降序排序,因为列的数量不确定,所以我决定将示例切换为指向列标题的
class
名称,而不是将每个列显式定义为"targets":[1],"targets":[2],...[n]
,或者通过编程构建我所关心的列的索引数组。您可以通过多种方式定位列according to here。
最终结果是一个如下所示的表定义:
数据表的功能如下:
瞧!首先在所有列上单击降序排序,其中
<th>
标记有类'descendFirst'(任意选择的描述性类名)。jgzswidk3#
作为对最后排序空白的回应,我想到了
(我只是讨厌先把空格排序!!)
1qczuiv04#
如果像Dave和我这样的人正在寻找一种方法来设置所有列的排序顺序,下面的方法可能对您有用。为了更改所有列的排序顺序,我设置了一个循环,以便在表示例化后更改设置:
在jQuery 1.11.0和DataTable 1.10.0上进行了测试
q3qa4bjr5#
唯一的方法,让您的空白最后将是一个有点黑客(因为排序是正确的工作)。
不要从服务器返回空值,而应返回如下内容:“[空白]”
我还没有测试过,但我很确定方括号会出现在字母数字代码之后。而且方括号传统上象征着还没有完成或确认的东西。
qco9c6ql6#
这对我很有效:
xtupzzrd7#
下面的代码用于为所有列设置默认的排序顺序:先降序,然后升序。