jQuery DataTables中的动态排序 [英] Dynamic sorting in jquery DataTables
问题描述
我将DataTables与 columns.render 选项结合使用，以实现自定义排序一张桌子.当排序函数中的逻辑仅依赖于静态数据时，这很好用.但是，我想为我的用户提供一些控件，以控制如何进行排序.问题在于，似乎DataTables正在缓存第一个排序结果，因此，当用户尝试更改排序控件时，它没有任何作用.
I'm using DataTables with the columns.render option to implement custom sorting for a table. That works fine when the logic within the sort function only depends on static data. However, I'd like to provide some controls to my users controlling how the sorting should happen. The problem is that it seems like DataTables is caching the first sort result, so when the user tries to change the sorting controls it doesn't have any effect.
简而言之，我想拥有一个动态排序功能.
In short, I'd like to have a dynamic sort function.
显然，最好用一个例子来解释.想法是允许根据用户在表格上方的收音机中选择的内容，按照客户名称" 或价格"对信息"列进行排序.运行它，您会看到排序仅适用于初始单选.
Obviously this is best explained with an example. The idea is to allow the "Info" column to be sorted either by "customer name" or "price", depending on what the user selects in the radio above the table. Run it and you'll see that the sorting only works for the initial radio selection.
$(function() {
var opts = {
"columns": [{
'searchable': false
}, {
'render': function(data, type, row, meta) {
if (type === 'sort') {
var sel = $("input[name=infoFilterOptions]:checked").val();
return $(sel, $(data)).data('value');
}
return data;
}
}]
};
$("#the_table").DataTable(opts);
});
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>
<body>
<div style="color:green; margin-bottom: 10px;">
<div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
</label>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
</label>
</div>
<table id="the_table" class="stripe">
<thead>
<tr>
<th>Id</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="John">John</span>
</div>
<div>Price: <span class="info-price" data-value="42.42">$42.42</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
</div>
<div>Price: <span class="info-price" data-value="14.0">$14.00</span>
</div>
</td>
</tr>
<tr>
<td>18</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
</div>
<div>Price: <span class="info-price" data-value="22.3">$22.30</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
推荐答案
Allan通过在DataTables论坛上.一如既往的一流支持！
Allan answered this question over on the DataTables forums. First class support, as always!
简短的回答是，DataTables 确实是在缓存排序结果.您需要使表中的数据无效(通过row().invalidate()或rows().invalidate())，以便重新计算排序顺序.
Short answer is that DataTables is indeed caching the sort result. You need to invalidate the data in the table (via row().invalidate() or rows().invalidate()) in order to recompute the sort order.
这可以解决问题:
$('input[type=radio][name=infoFilterOptions]').on('change', function() {
$("#the_table").DataTable().rows().invalidate();
});
这是上面的完整示例，其中包括此修复程序:
Here's the full example from above including this fix:
$(function() {
var opts = {
"columns": [{
'searchable': false
}, {
'render': function(data, type, row, meta) {
if (type === 'sort') {
var sel = $("input[name=infoFilterOptions]:checked").val();
return $(sel, $(data)).data('value');
}
return data;
}
}]
};
$("#the_table").DataTable(opts);
$('input[type=radio][name=infoFilterOptions]').on('change', function() {
$("#the_table").DataTable().rows().invalidate();
});
});
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
</head>
<body>
<div style="color:green; margin-bottom: 10px;">
<div style="display: inline-block; margin-right: 10px;">Sort <i>Info</i> column by:</div>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-price" checked>Price
</label>
<label class="radio-inline">
<input style="margin-top: 0;" type="radio" name="infoFilterOptions" value=".info-customer-name">Customer name
</label>
</div>
<table id="the_table" class="stripe">
<thead>
<tr>
<th>Id</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="John">John</span>
</div>
<div>Price: <span class="info-price" data-value="42.42">$42.42</span>
</div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Melvyn">Melvyn</span>
</div>
<div>Price: <span class="info-price" data-value="14.0">$14.00</span>
</div>
</td>
</tr>
<tr>
<td>18</td>
<td>
<div>Customer name: <span class="info-customer-name" data-value="Aaaaardvark">Aaaaardvark</span>
</div>
<div>Price: <span class="info-price" data-value="22.3">$22.30</span>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
这篇关于jQuery DataTables中的动态排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
