jQuery DataTables 插入额外的双引号答案

【问题标题】：jQuery DataTables inserting extra double quotejQuery DataTables 插入额外的双引号
【发布时间】：2017-06-16 13:39:31
【问题描述】：

我正在使用 jQuery DataTables 来显示一个表格，其中每一行都是一个调用 jQuery 方法的链接。这是我用来填充 DataTable 的代码。

table = $("#search-results").DataTable({
   "data": dataTableRows,
   "columns": dataTableColumns,
   "columnDefs": [{
      "targets": "_all",
      "render": function (data, type, row, meta) {
         if (type === 'display') {
            var rowValue = rowValues[meta.row];
            data = '<a href=javascript:void(0) OnClick=resultSelected("' + $('#source-control-name').val() + '","' + rowValue + '")>' + data + '</a>';
            alert(data);
         }
         return data;
      }
   }]
});

我正在显示我的 ASP 身份角色列表，其中一些有空格。当用户单击一个角色时，我想调用resultSelected 并传递角色的名称（在下面的代码中将在rowValue 中）。如果角色是一个词，这有效。但是，如果角色包含空格，则 DataTables 会插入一个额外的双引号。

例如，如果角色名称是 Inventory Manager，则结果表 looks like this（请注意 @ 中的单词 Inventory 和 manager 之间的额外双引号987654326@电话。

我在渲染函数期间做了一个alert 来打印rowValue 的值，而rowValue 中没有额外的引号，所以DataTables 必须添加额外的引号。

如何阻止 DataTables 添加额外的引号？

【问题讨论】：

标签： jquery datatables

【解决方案1】：

您的问题在这一行：

data = '<a href=javascript:void(0) OnClick=resultSelected("' + $('#source-control-name').val() + '","' + rowValue + '")>' + data + '</a>';

你可以改变：

data = '<a href=javascript:void(0) OnClick="resultSelected(\'' + $('#source-control-name').val() + '\',\'' + rowValue + '\')">' + data + '</a>';
                                                          ^^^^.....

您需要对字符串分隔符进行转义。

一个演示：

function resultSelected(name, val) {
    console.log('Name: ' + name + ' Value: ' + val);
}

var dataTableRows = [
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       5421
    },
    {
        "name": "Garrett Winters",
        "position": "Director",
        "salary": "5300",
        "start_date": "2011/07/25",
        "office": "Edinburgh",
        "extn": "8422"
    },
];


var dataTableColumns = [
    { "data": "name" },
    { "data": "position" },
    { "data": "office" },
    { "data": "extn" },
    { "data": "start_date" },
    { "data": "salary" }
];
table = $("#search-results").DataTable({
    "data": dataTableRows,
    "columns": dataTableColumns,
    "columnDefs": [{
        "targets": "_all",
        "render": function (data, type, row, meta) {
            if (type === 'display') {
                var rowValue = row.name;
                data = '<a href=javascript:void(0) OnClick="resultSelected(\''
                        + $('#source-control-name').val() + '\',\'' + rowValue + '\')">' + data + '</a>';
            }
            return data;
        }
    }]
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>


<table id="search-results" class="display" cellspacing="0" width="100%">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Age</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

【讨论】：