jQuery DataTables 插入额外的双引号

Question

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

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 将插入额外的双引号。

例如，如果角色名称是库存经理，则结果表 looks like this (请注意 resultSelected 调用中单词 Inventory 和 manager 之间的额外双引号。

我已经做了一个alert来在渲染函数期间打印rowValue的值，并且rowValue没有额外的引号其中，因此 DataTables 必须添加额外的引号。

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

Answer 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>