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

Posted 2023-05-07

【中文标题】使用x-editable更新行中的值后jquery数据表未排序

【英文标题】：jquery datatables not sorting after updating value in row with x-editable

【发布时间】：2016-01-30 11:06:57

【问题描述】：

我正在使用 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(),

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

【参考方案1】：

解决方案

为每个可编辑单元格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 ...
);

演示

有关代码和演示，请参阅 this jsFiddle。

注意事项

最好使用cell().invalidate() 而不是row().invalidate()，但当前版本中有一个issue，仅在夜间版本中得到修复。

你需要把你的X-editable初始化代码放在drawCalback回调函数中

【讨论】：

它不起作用的另一个原因是因为我在数据表之前调用了可编辑。现在我想弄清楚如何让隐藏页面上的列可编辑

@RhysStephens，请参阅jsfiddle.net/y3ba611q/2，了解处理多个页面的代码示例。