Bootstrap DataTable开启Responsive后Sparkline无法在展开行渲染

当DataTable开启responsive: true后，隐藏列的内容会被转移到展开的详情行，但这部分内容不会触发原drawCallback里的Sparkline渲染逻辑，导致展开后只显示原始逗号分隔字符串。可以通过监听DataTable的responsive-display事件来解决：

实现步骤 #

• 监听responsive-display事件，该事件会在详情行展开/收起时触发
• 在事件回调中，定位详情行内的Sparkline元素，提取数值并重新渲染

代码示例 #

$(document).ready(function() {
    // 初始化DataTable
    var dataTable = $('#targetTable').DataTable({
        responsive: true,
        drawCallback: function() {
            // 处理可见列的Sparkline渲染
            $('.sparkline-cell:visible').each(function() {
                var valueArr = $(this).text().split(',').map(Number);
                $(this).sparkline(valueArr, {
                    type: 'line',
                    height: '32px',
                    width: '100px'
                });
            });
        }
    });

    // 监听展开/收起事件，处理隐藏列的Sparkline渲染
    dataTable.on('responsive-display', function(e, dt, row, isShow) {
        if (isShow) {
            // 定位详情行中的Sparkline元素（用你自己的类名）
            var sparkEl = row.child().find('.sparkline-cell');
            if (sparkEl.length) {
                var values = sparkEl.text().split(',').map(Number);
                sparkEl.sparkline(values, {
                    type: 'line',
                    height: '32px',
                    width: '100px'
                });
            }
        }
    });
});

注意事项 #

• 给Sparkline列的单元格统一加类名（比如示例中的sparkline-cell），方便在详情行中快速定位
• 保持展开行和可见列的Sparkline配置一致，避免样式差异
• 如果需要优化性能，可在收起详情行时调用sparkEl.sparkline('destroy')清理实例

内容的提问来源于stack exchange，提问作者Michael R.