jQuery DataTables插入额外的双引号

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（注意词库存并在resultSelected通话经理之间的额外的双引号。

我所做的alert到在渲染函数中打印rowValue的值，并且rowValue没有额外的报价，因此DataTables必须添加额外的报价。

如何阻止DataTable添加额外的报价OTE？

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>