Question

我在datatables单元格中有按钮：

<button class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#remote-modal3" data-remote="../api/?type=list-of-ranged&amp;pid=4694124&">2</button>

问题是排序不起作用。如果我定义：

{"title":"Ranged", "data":"Ranged", "type":"num-html"},

我得到了一些有趣的排序，例如：2,3,1,1,2,1

如果我没有在那里定义任何东西，它会将其检测为html，并且我会再次进行一些有趣的排序。

我读到了我添加的数据排序和数据顺序属性：

<button data-sort="8" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#remote-modal3" data-remote="../api/?type=list-of-ranged&amp;pid=4694124&">2</button>

但仍然遇到同样的问题。如何正确排序此列？

注意：我在代码的其他部分生成按钮，所以我无法触摸th标签。代码是从php生成的，并通过数据表中的ajax消耗，如下所示：

$aaData[$storeIndex]['Ranged'] = '<button data-sort="'.$ranged_v.'" class="btn btn-primary waves-effect waves-light" data-toggle="modal" data-target="#remote-modal1" data-remote="'.$rangedurl.'">'.$ranged_v.'</a>';

Answer 1

请注意td元素中指定了data-attributes，如果您无法访问td元素，则可以使用fnRowCallback查找data-sort您的按钮并添加到td，（ 记住指定了td的索引 ）：

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
            var nOrder = $('td:eq(0)', nRow).find("button").data("sort");
            $('td:eq(0)', nRow).attr("data-sort",nOrder);
}

结果：https://jsfiddle.net/cmedina/7kfmyw6x/75/

更新：当您指定列类型num-html时，您应该导入plugin：

{
    "title":"Ranged", 
    "data":"Ranged", 
    "type":"num-html"
}

在html中导入插件：

<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.12/sorting/num-html.js"></script>

结果更新： https://jsfiddle.net/cmedina/suo68emm/1/

数据表单元格内的按钮未排序

1 个答案: