[英]How to sort capacities column in Datatables
我有一个容量表这样的数据表:
<table id="datatable" class="table">
<thead> <tr> <th>N</th> <th>capa</th> </tr> </thead>
<tbody>
<tr>
<td>1</td>
<td>2 Go</td>
</tr>
<tr>
<td>2</td>
<td>1 To</td>
</tr>
<tr>
<td>3</td>
<td>320 Go</td>
</tr>
<tr>
<td>4</td>
<td>2 To</td>
</tr>
<tr>
<td>5</td>
<td>500 Go</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#datatable').dataTable({
'aaSorting': [],
'iDisplayLength': 50,
'aLengthMenu': [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'Tous']]
});
});
</script>
我正在尝试对其进行排序以得到以下结果:
2 Go
320 Go
500 Go
1 To
2 To
但是无法通过阅读排序插件文档来弄清楚该如何做。
谢谢
如果我理解正确,则需要对“ capa”列的文本部分进行排序。 您可以添加一个包含文本字段的列,将其隐藏,然后单击“ capa”列标题时使用iDataSort对隐藏的列进行排序,以实现此目的。
首先,将新的纯文本列添加到每一行:
<tr>
<td>1</td>
<td>2 Go</td>
<td>Go</td>
</tr>
在数据表初始化代码中,使用aoColumns
指定列定义:
...
'iDisplayLength': 50,
'aoColumns': [{},{ "iDataSort": 2 }, {'bVisible':false }],
...
这是一个工作的jsfiddle
Update
:听起来好像您想在文本列上排序,然后在int列上排序,如果您刚才说过的话,将会很有帮助。
'aoColumns': [{},{ "aDataSort": [2], "aTargets": [ 0, 2 ] }, {'bVisible': false, "aTargets": [ 0 ] }],
这是更新的jsfiddle
好,终于知道了
http://jsfiddle.net/jkwoaj3x/1/
$('#datatable').dataTable({
"columns": [
null,
{ "orderDataType": "custom-sort" }
]
});
这是您的自定义排序功能
$.fn.dataTable.ext.order['custom-sort'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
console.log($(td).text().replace(/[^0-9\.]+/g, ''));
return $(td).text().replace(/[0-9]/g, '');
} );
}
是您的解决方案?
您可以有一个表格,其中所有源数据都以gigas为单位,但是由于使用columnDefs选项中的render,因此可以以不同的方式呈现它,而无需更改嵌套数据,它将使用内置的数字排序功能
http://legacy.datatables.net/usage/columns
当我想显示句子但仍然有可排序的列时,我总是这样做,它非常有效
<table id="datatable" class="table">
<thead> <tr> <th>N</th> <th>capa</th> </tr> </thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>1000 </td>
</tr>
<tr>
<td>3</td>
<td>320</td>
</tr>
<tr>
<td>4</td>
<td>2000</td>
</tr>
<tr>
<td>5</td>
<td>500</td>
</tr>
</tbody>
</table>
//targets is the number of the column you want render (here number 1)
//care full!!!! use DataTable and not datatable, second is old and doesn't have all options, if you don't want use fnRender
table = $('#datatable').DataTable({
"columnDefs":{
"targets": 1, "visible": true, "searchable": true
, "render": function (data, type, row) {
if (type == "display") {
if (data > 1000)
return ((data / 1000) + " To");
else
return (data + " Go");
}
return data;
},
};
});
这是最好的解决方案!
感谢大家。 我正在回答最适合我的答案。
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"file-size-pre": function (a) {
var x = a.substring(0, a.length - 2);
var x_unit = (a.substring(a.length - 2, a.length) == "Go" ? 1000 : (a.substring(a.length - 2, a.length) == "To" ? 1000000 : 1));
return parseInt(x * x_unit, 10);
},
"file-size-asc": function (a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"file-size-desc": function (a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
$(document).ready(function () {
$('#datatable').dataTable({
'columnDefs': [{ 'type': 'file-size', 'targets': 1 }],
'aaSorting': [],
'iDisplayLength': 50,
'aLengthMenu': [ [10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, 'Tous'] ]
});
});
这是一个小提琴: http : //jsfiddle.net/cu9taqfg/1/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.