CODEWITHSUNDEEP
jquerydatatables
Ben Rubin
Ben Rubin

Reputation: 7361

jQuery DataTables inserting extra double quote

I'm using jQuery DataTables to display a table, where each row is a link which calls a jQuery method. Here's the code which I use to populate the 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;
      }
   }]
});

I'm showing a list of my ASP Identity roles, some of which have spaces. When the user clicks a role, I want to call resultSelected and pass the name of the role (which will be in rowValue in the code below). If the role is one word, this works. However, if the role contains a space, DataTables is inserting an extra double quote.

For instance, if the role name is Inventory Manager, the resulting table looks like this (notice the extra double quote between the words Inventory and manager in the resultSelected call.

I've done an alert to print the value of rowValue during the rendering function, and rowValue doesn't have an extra quote in it, so DataTables must be adding the extra quote.

How do I stop DataTables from adding the extra quote?

Upvotes: 2

Views: 1491

Answers (1)

gaetanoM
gaetanoM

Reputation: 42054

Your issue is in this line:

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

You can change with:

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

You need to escape the string delimiters.

A demo:

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>

Upvotes: 4

Related Questions