JQuery Datatables 在表列之一中显示链接答案

【问题标题】：JQuery Datatables displaying link in one of the table columnJQuery Datatables 在表列之一中显示链接
【发布时间】：2014-11-06 12:40:24
【问题描述】：

我正在尝试使我的 JQuery 数据表中的一列显示链接，如下面的代码所示，但我总是收到错误，并且根本没有显示任何内容。有人可以通过指出我到底做错了什么以及如何正确地将数据表列之一中显示的数据更改为链接来提供帮助吗？谢谢

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

注意：dset 返回：

[{"_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"}]

我还在我的 AngularJS 应用中实现上表。

我看到的错误是：

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' }
                  ],]].

【问题讨论】：

标签： jquery angularjs datatable

【解决方案1】：

对 AngularJS 了解不多，但我敢肯定，当双引号括起来的 ui-options 属性本身包含未转义的双引号时，无论解释器解析此代码都会遇到问题。尝试用单引号替换它们或转义它们 (\")

【讨论】：

【解决方案2】：

您真的应该将整个对象放入控制器中的一个变量中，然后简单地传入该变量。 " 字符散布在整个 ng-options="" 中，众所周知，这意味着您只需关闭 ng-options 属性。要么转义首先出现在这里的双引号："aoColumnDefs"，要么（最好）以更理智的方式传入这个巨大的选项对象。

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

【讨论】：