Mat*_*icz 2 javascript sorting jquery jquery-datatables
我正在使用DataTables:https : //www.datatables.net/
这是我的HTML:
<div class="dataTable_wrapper">
<table class="table table-striped table-bordered table-hover center" id="dataTables-example">
<thead>
<tr>
<th>ID</th>
<th>Title</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>title 1</td>
<td><a href="./action-1"><span class="on"></span></a></td>
</tr>
<tr>
<td>2</td>
<td>title 2</td>
<td><a href="./action-2"><span class="off"></span></a></td>
</tr>
<tr>
<td>3</td>
<td>title 3</td>
<td><a href="./action-1"><span class="on"></span></a></td>
</tr>
</tbody>
Run Code Online (Sandbox Code Playgroud)
我想用最后一列对该表进行排序,但是没有排序的价值……只是类“ on”和“ off”。我可以添加诸如rel之类的链接标记或放置0/1值的东西吗?还是应该使用JavaScript来做到这一点?
这是JS代码:
$('#dataTables-example').DataTable({
responsive: true,
"order": []
});
Run Code Online (Sandbox Code Playgroud)
看一下dataTables columns/ columnDefs render()函数。您可以根据使用目的不同返回的内容或值:filter,display,type或sort。如果要基于具有类或的0/ 对列进行排序,可以执行以下操作:1<span>.on.off
var table = $('#dataTables-example').DataTable({
columnDefs : [
{
targets: [2],
render: function ( data, type, full, meta ) {
if (type == 'sort') {
return $(data).find('span').hasClass('on') ? 1 : 0;
} else {
return data;
}
}
}
]
});
Run Code Online (Sandbox Code Playgroud)
演示-> http://jsfiddle.net/9zvyhgb5/