datatables 1.10.4 aoColumnsDefs

时间:2015-12-28 09:59:16

标签: javascript jquery angularjs datatables



//Use angularjs render data 
app.controller('ArticleListController', ['$scope', '$http', function ($scope, $http) {

    $scope.options = {
        sAjaxSource: 'api/datatable.json',
        "aoColumnDefs": [
                  { mData: 'engine', "aTargets": [0] },
                  { mData: 'browser', "aTargets": [1] },
                  { mData: 'platform', "aTargets": [2] },
                  { mData: 'version', "aTargets": [3] },
                  {
                      mData: 'grade', "aTargets": [4],
                      //Here ! It can't do work 
                      "mRender": function (data, type, full) {
                          return '<a class="glyphicon glyphicon-pencil" href="/Country/Edit/' + data + '">Edit</a><a class="glyphicon glyphicon-remove" href="/Country/Delete/' + data + '">Delete</a>';
                      }
                  },
        ] 
    } 
}]);
&#13;
//this is html
<div class="bg-light lter b-b wrapper-md">
    <h1 class="m-n font-thin h3">Datatable</h1>
</div>
<div class="wrapper-md">
    <div class="panel panel-default">
        <div class="panel-heading">
            DataTables
        </div>
        <div class="table-responsive">
            <table ui-jq="dataTable" ui-options="{{options}}" class="table table-striped b-t b-b">
                <thead>
                    <tr>
                        <th style="width:20%">Rendering engine</th>
                        <th style="width:25%">Browser</th>
                        <th style="width:25%">Platform(s)</th>
                        <th style="width:15%">Engine version</th>
                        <th style="width:15%">CSS grade</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>
 
&#13;
&#13;
&#13;

我想要自定义列样式,例如我想在单元格中显示链接,但我的mRender功能无法正常工作,请帮助我!谢谢。 .................. .................................................. .................................................. .................................................. .................................................. ..................................

1 个答案:

答案 0 :(得分:1)

好的,我解决了这个问题。

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>';
      }
     }
   ]
  };
});
//Here ! the ui-options='options'
<table ui-jq="dataTable" ui-options="options" class="table table-striped m-b-none">

所以,我的代码ui-options =“{{options}}”和正确的代码应该是ui-options ='options'