如何使用jQuery DataTables和Responsive扩展来初始化行详细信息中的控件

Question

我有这个问题，我在开发过程中没有看到，但它发生在我的客户端。我使用jQuery DataTables让用户完成信息。

在大/普通分辨率下，这不会发生，因为DataTables可以显示所有列。但是在较低分辨率下，网格显示绿色加号按钮，并且该组内部的控件未正确初始化。

分辨率较低的普通页面：

使用Chrome开发工具控制台：我可以执行此操作：

$(".k_numeric").kendoNumericTextBox({ format: "c", decimals: 2 });

现在控件显示正确。

因此，当DataTables隐藏列以适应显示时，JS似乎没有调用控件。我试着搜索这个，但我甚至不知道如何正确搜索它。

Answer 1

  

<强>原因

出现此问题是因为响应式扩展在准备行详细信息时会创建新元素。这些新元素需要再次初始化。

  

<强>解

您需要在单独的函数中重新初始化那些成为行详细信息一部分的控件。

解决方案是：

• 使用responsive.details.renderer选项
为行详细信息定义自定义呈现
• 使用$.fn.DataTable.Responsive.defaults.details.renderer()调用默认渲染器，返回jQuery集合。
• 在返回之前初始化此集合中的自定义控件。

示例：

var table = $('#example').DataTable({
    responsive: {
        details: {
            renderer: function (api, rowIdx, columns) {
               var $details = $.fn.DataTable.Responsive.defaults.details.renderer(api, rowIdx, columns);
                $(".numerictextbox", $details).kendoNumericTextBox({ format: "c", decimals: 2 });
                return $details;                    
            }
        }
    },
    createdRow: function( row, data, dataIndex ){
       $(".numerictextbox", row).kendoNumericTextBox({ format: "c", decimals: 2 });    
    }
});

  

<强>样本

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

  

<强>链接

有关详细信息，请参阅jQuery DataTables – Responsive extension and custom controls文章。