Question

我正在使用带有x-editable v1.5.1的Datatables v 1.10.9 我有一些行，其列的订单值是一个整数。

当表最初加载时，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>

但是，该表将无法正确排序，并且仍按原始值排序。度假正在发生;如果我将它设置为排序desc：

table.order([1, 'desc']).draw(),

它按降序排序，但排序仍然不正确。

Answer 1

<强>解

将data-order属性添加到每个可编辑单元格td，如下所示：

<td data-order="30">
    <a href="#" ...>30</a>
</td>

然后，您需要处理{jQuery DataTables使用的hidden事件，更新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 ...
});

<强>样本

请参阅this jsFiddle以获取代码和演示。

备注

最好使用cell().invalidate()代替row().invalidate()，但当前版本中只有issue仅在夜间版本中修复。

您需要将您的X-editable初始化代码放入drawCalback回调函数

jquery数据表在使用x-editable更新行中的值后不进行排序

1 个答案: