我正在使用 Datatables v 1.10.9 和 x-editable v1.5.1 我有许多行,其中一列的订单值为整数。
最初加载表时,x-editable 会正确应用于行中的所有目标列。
<a href="#" class="Order editable editable-click" data-type="text" data-mode="inline" data-pk="1100" data-url="/Service/UpdateOrder" data-title="Update Order" data-inputclass="xeditable-number" >3</a>
然后绘制表格并应用分页。
到目前为止一切都很好。 当我使用 x-editable 编辑订单值时,它会正确保存到服务器端并调用成功回调。
但是,尽管我在那个成功回调中再次调用数据表 draw() 或通过单击列标题手动排序,但它不会正确排序,排序与更新列值之前一样。
这是我的代码。
$(document).ready(function () {
//X-editable for order
$('.Order').editable({
error: function (response) {
alert('error');
},
success: function (data, config) {
alert('success');
table.order([1, 'asc']).draw();
},
});
var table = $('#sort1').DataTable({
stateSave: true,
filter: false,
"pageLength": 25,
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"columnDefs": [
{
"type": "html",
"targets": ['no-sort'],
"orderable": false,
},
{
"type": "html",
"target": [1, 3, 4, 6]
},
],
"autoWidth": false,
"dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'fi><'col-sm-6 col-xs-6 hidden-xs'plT>r>" + 't<"dt-toolbar-footer"<"col-sm-6 col-xs-12 hidden-xs"i><"col-xs-12 col-sm-6"p>><"clear">"',
});
});
这里是排序顺序的列的示例:
<a href="#" class="Order editable editable-click" data-type="text" data-mode="inline" data-pk="1093" data-url="/Service/UpdateOrder" data-title="Update Order" data-inputclass="xeditable-number">30</a>
这是更新后的列值:
<a href="#" class="Order editable editable-click" data-type="text" data-mode="inline" data-pk="1094" data-url="/Service/UpdateOrder" data-title="Update Order" data-inputclass="xeditable-number" style="display: inline-block; background-color: rgba(0, 0, 0, 0);">1</a>
但是,表格不会正确排序,仍按原始值排序。 求助正在发生;如果我将它设置为排序描述:
table.order([1, 'desc']).draw(),
它降序排列,但排序仍然不正确。
最佳答案
SOLUTION
为每个可编辑的单元格td
添加data-order
属性,如下所示:
<td data-order="30">
<a href="#" ...>30</a>
</td>
然后你需要处理hidden
事件,更新jQuery DataTables使用的data-order
属性进行排序和使用row().invalidate()
告诉 DataTables 行内容已更改。
使用下面的代码:
var table = $('#sort1').DataTable({
drawCallback: function(){
var api = this.api();
$('.editable', api.table().body())
.editable()
.off('hidden')
.on('hidden', function(e, reason) {
if(reason === 'save') {
$(this).closest('td').attr('data-order', $(this).text());
table.row($(this).closest('tr')).invalidate().draw(false);
}
});
},
// ... skipped ...
});
DEMO
参见 this jsFiddle用于代码和演示。
NOTES
最好使用
cell().invalidate()
而不是row().invalidate()
但是有一个issue在当前版本中,仅在夜间版本中得到修复。您需要将您的X-editable 初始化代码放在
drawCalback
回调函数中
关于javascript - 使用 x-editable 更新行中的值后,jquery 数据表不排序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33428943/