Question

我正在使用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 之间的额外双引号>在resultSelected电话中。

我已经完成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>

jQuery DataTables插入额外的双引号

1 个答案: