DataTable通过AJAX获取JSON数据时无法保留换行符问题咨询

这个问题非常常见——HTML 默认不会把文本中的换行符（\n 或 \r\n）渲染成换行效果，而DataTable在绑定数据时默认是直接输出纯文本，所以数据库里正常的换行到了页面上就消失了。下面给你两种实用的解决方案，你可以根据自己的需求选择：

方案一：前端DataTable列渲染时转换换行符 #

在DataTable的列配置中，给action列添加render函数，把文本里的换行符替换成HTML的<br>标签，同时确保DataTable允许该列渲染HTML内容（默认是允许的，若有XSS顾虑可以做额外处理）。

修改你的前端JS代码：

$(document).ready(function () {
    var id = @ViewBag.CaseId;
    $("#audTrailTable").DataTable({
        "ajax": {
            url: "/MISObjects/GetAuditTrailData/" + id,
            type: "get",
            dataType: "json" // 注意你之前写错成了database，修正为dataType
        },
        "columns": [
            { "data": "createdDate" },
            { "data": "createdBy" },
            { 
                "data": "action",
                "render": function(data, type, row) {
                    // 把所有换行符（包括\n和\r\n）替换成<br>
                    if (data) {
                        return data.replace(/\r?\n/g, '<br>');
                    }
                    return data;
                }
            }
        ],
        "scrollY": "200px",
        "scrollCollapse": true,
        "paging": false,
        "processing": true,
        "filter": true,
        "orderMulti": false
    })
});

方案二：后端序列化时转换换行符 #

如果你更倾向于在后端处理，可以在返回JSON数据之前，把action字段里的换行符替换成<br>。修改你的C#后端方法：

[HttpGet]
public ActionResult<DataTableWrapper<List<MISAuditTrail>>> GetAuditTrailData(int? id)
{
    int? resulCaseId = id;
    var auditTrailsHistory = _context.MisAuditTrail
        .Where(w => w.isActive == true && w.isDeleted == false && w.MISObjectId == resulCaseId)
        .ToList();
    
    // 遍历数据，替换所有类型的换行符
    foreach(var trail in auditTrailsHistory)
    {
        if (!string.IsNullOrEmpty(trail.action))
        {
            trail.action = trail.action.Replace(Environment.NewLine, "<br>")
                                       .Replace("\n", "<br>")
                                       .Replace("\r", "<br>");
        }
    }
    
    DataTableWrapper<List<MISAuditTrail>> data = new DataTableWrapper<List<MISAuditTrail>>() { data = auditTrailsHistory };
    return data;
}

这样前端拿到的数据直接包含<br>标签，DataTable渲染时就会自动显示换行效果。

额外安全提示 #

如果action字段可能包含用户输入的内容，担心XSS风险的话，可以在前端渲染时先转义特殊字符，再替换换行：

"render": function(data, type, row) {
    if (data) {
        // 先转义HTML特殊字符，再替换换行
        var escapedText = $('<div>').text(data).html();
        return escapedText.replace(/\r?\n/g, '<br>');
    }
    return data;
}

这样既保留了换行效果，又能避免恶意HTML代码的注入。

内容的提问来源于stack exchange，提问作者dotnetdevcsharp