JQuery Datatables displaying link in one of the table column

Question

I am trying to make one of the columns in my JQuery datatable display links as shown in the code below but I am always getting an error and nothing is displayed at all. Can someone please help by pointing out what exactly I am doing wrong and how I can correctly change the data shown in one of the datatable columns to links? Thanks

           <div class="table-responsive">
              <table ui-jq="dataTable" ui-options="{
                  data: dset,
                  aoColumns: [
                    { mData: 'title' },
                    { mData: 'firstName' },
                    { mData: 'lastName' },
                    { mData: 'email' }
                  ],
                  "aoColumnDefs": [  {
                       "aTargets": [ 3 ],                                                 
                       "mRender": function ( data, type, full ) {
                         return '<a href="/mailto/' + full[3] + '">' + data + '</a>';
                       }
                     }
                   ]
                }" class="table table-striped m-b-none">
                <thead>
                  <tr>
                    <th  style="width:15%">Title</th>
                    <th  style="width:30%">First Name</th>
                    <th  style="width:30%">Last Name</th>
                    <th  style="width:25%">Email</th>
                  </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>

Note: dset returns:

[{"_id":"543e58b862744980197026a8","title":"Mr.","firstName":"Michael","lastName":"A","email":"michael@gmail.com","address":"New York","password":"123456","activeMember":true,"__v":0,"role":"Member","memberSince":"2014-10-15T11:21:28.884Z"},{"_id":"543e591862744980197026a9","title":"Ms","firstName":"Mary","lastName":"W","email":"mary@gmail.com","address":"New York","password":"123456","activeMember":true,"__v":0,"role":"Admin","memberSince":"2014-10-15T11:23:04.382Z"}]

• Also I am implementing the above table in my AngularJS app.

Error I am seeing is:

Error: [$parse:syntax] Syntax Error: Token 'undefined' is unexpected, expecting [:] at column null of the expression [[{
                  data: dset,
                  aoColumns: [
                    { mData: 'title' },
                    { mData: 'firstName' },
                    { mData: 'lastName' },
                    { mData: 'email' }
                  ],]] starting at [[{
                  data: dset,
                  aoColumns: [
                    { mData: 'title' },
                    { mData: 'firstName' },
                    { mData: 'lastName' },
                    { mData: 'email' }
                  ],]].

Answer 1

You really should have just put this entire object into a variable in the controller and simply passed in the variable. You've got " characters strewn throughout the ng-options="" and as we all know that means you've simply closed the ng-options attribute. Either escape the double quotes which first appear here: "aoColumnDefs" or (preferrably) pass in this giant options object in a more sane manner.

angular.controller('myController', function($scope) {
  $scope.options = {
     data: dset,
     aoColumns: [
      { mData: 'title' },
      { mData: 'firstName' },
      { mData: 'lastName' },
      { mData: 'email' }
     ],
     "aoColumnDefs": [  {
      "aTargets": [ 3 ],                                                 
      "mRender": function ( data, type, full ) {
       return '<a href="/mailto/' + full[3] + '">' + data + '</a>';
      }
     }
   ]
  };
});

<table ui-jq="dataTable" ui-options="options" class="table table-striped m-b-none">

Answer 2

Not much knowledge with AngularJS but I'm pretty sure whatever interpreter parses this code will run into issues when your ui-options attribute enclosed in double-quotes in itself contains unescaped double-quotes. Try replacing them with single quotes or escaping them (\")