AngularJS & Datatable - Compile html while re-rendering the cell value

Question

I am using angularjs and datatable to build a grid. I have a following javascript code,

DEMO: http://plnkr.co/edit/qJ7vr1Bec5OdRrxpHw2Q?p=preview

datatable_config = {
     "bJQueryUI": true,
     "bProcessing": true,
     "bDeferRender": true,
     "sDom": "Rlfrtip",
     "aaData": [null]
};

angular.forEach(columns, function(column, key){
    datatable_config.aoColumns.push({
        "sTitle": column.displayName, 
        "mData": function(source, type, value){
            var cell_value = (source[column.field]) ? source[column.field] : '', rendered_cell;
            if(column.field == 'something'){
                rendered_cell = $compile('<span>{{$root.value}}</span>')($scope);
                 /* For this column, I am not getting the span element with the evaluated rootscope instead, it says [object object] */
            } else {
                rendered_cell = cell_value;
            }
            return rendered_cell;
        }
    });
});

When I compile the HTML, it displays [object object]. I am getting the problem, we need to compile it after the bind, like this element.html(value); $compile(element.contents())(scope);. But it is not possible in the above code. Any solution or idea?

Thanks in advace.

Karthick_Vijay · Accepted Answer · 2014-07-16 16:45:16Z

1

Had Similar Issue trying to compile "to be rendered DOM". After hours finally made it work, though my requirements were lot different. I needed to bind directives also, for which you need to use $compile().

For your use case, Use $parse

// parse the "value" attribute value into a function
var parseFn = $parse(value);
// "parseFn" is a function that can be invoked to get the expression's value 
// providing a scope
var currVal = parseFn($root);

// return updated markup
return '<span>'+ currVal +'</span>';

answered Jul 16, 2014 at 16:45

Karthick_Vijay

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

J. B · Accepted Answer · 2018-02-16 21:03:39Z

I think it is a little bit late but I have a simpler solution to this issues but I still recommend you to use angular-datatable directive.

data_table.directive('dataTable', ['$log', '$timeout', '$compile', function($log, $timeout, $compile){
return {
    restrict: 'C',
    controller : ['$rootScope', '$scope', '$element', function ($rootScope, $scope, $element){
        var grid_table, 
        datatable_config = {
            "bJQueryUI": true,
            "bProcessing": true,
            "bDeferRender": true,
            "sDom": "Rlfrtip",
            "aaData": [
              {'name': 'Aravind'}
            ]
        };

        datatable_config.aoColumns = [];

        datatable_config.aoColumns.push({
            "sTitle": 'Name', 
            "mData": function(source, type, value){
                //No need to compile the value
                var direct = '<span>' + source.name +'</span>';
                return  direct;
            }
        });

        grid_table = $element.dataTable(datatable_config);
    }]
}

}]);

Thanks, I hope this could help someone else.

Nisham Mahsin · Accepted Answer · 2014-02-06 09:43:09Z

Try this

$scope.tableData = []; // just initialize an array to store data coming from server

      // watch each change in the server-side data to reload grid table
      $scope.$watch("tableData", function (data) {
        $scope.tableParams.reload();
      });

      // Set ng-table parameters with pagination
        $scope.tableParams = new ngTableParams({
          page: 1,      // show first page
        count: 10     // count per page
      }, {
        total: $scope.tableData.length, // length of data
        $scope: {},
        getData: function($defer, params) {
          var filteredData = $scope.tableData;
          // use build-in angular filter
          var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
          orderedData = params.filter() ? $filter('filter')(orderedData, params.filter()) : orderedData;
          params.total(orderedData.length); // set total for recalc pagination
          $defer.resolve($scope.results = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
      });

Table should be like this

<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered datatables"  ng-table="tableParams"  show-filter="true">
   <tbody>
      <tr ng-repeat="tableData in $data">
         <!-- Checkbox -->
         <td data-title="''"  class="center" header="'ng-table/headers/checkbox.html'" width="4">
            <input type="checkbox" ng-model="checkboxes.items[tableData.id]" />
         </td>
         <!-- name-->
         <td data-title="some title" sortable="'name'" filter="{ 'name': 'text' }">
            <span ng-if="!tableData.$edit">{{tableData.name}}</span> <!--here name should be as same field as in data base-->
         </td>
   </tbody>
</table>

FYI, I am using jQuery datatable... plnkr.co/edit/qJ7vr1Bec5OdRrxpHw2Q?p=preview

Collectives™ on Stack Overflow

AngularJS & Datatable - Compile html while re-rendering the cell value

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related