How to pass html in jquery datatables row add function

Question

Following is the way im adding rows in jquery datatables from angular

reviewManger.GetUnapprovedReviews().then(function (data) {
    if (data != null) {
        var result = Reviews.Common.MakeValidJSON(data);
        if (result != null) {
            $scope.reviews = result;
            var table = $("#editable");

            var tp = table.DataTable();
            for (var i = 0; i < $scope.reviews.length; i++) {
                tp.row.add([
                    $scope.reviews[i].ID,
                    $scope.reviews[i].AddedOn,
                    $scope.reviews[i].Company.Name,
                    $scope.reviews[i].User.Name,
                    $scope.reviews[i].Description,
                    $sce.trustAsHtml("<span ng-click='EnableDisable(" + $scope.reviews[i].ID + ")>Change</span>")
                ]).draw();
            }
        }
    }
}, function (error) {
});

The problem is i dont see the rendered HTML in last column of all rows in jquery data tables , all other columns are filled in all rows.

How to add html in jQuery data table row?

how are you binding the trustedHTML in template?

sjt003
– sjt003

2015-08-30 17:27:50 +00:00
Commented Aug 30, 2015 at 17:27 — sjt003
– sjt003, Commented Aug 30, 2015 at 17:27

Shan Khan · Accepted Answer · 2015-08-30 19:56:56Z

I had to compile the angular template in order to work Used $compile from angular Following is the code i changed :

  if (result != null) {
                    $scope.reviews = result;
                    var table: any = $("#editable");
                    //table.DataTable();
                    var tp = table.DataTable();

                    for (var i = 0; i < $scope.reviews.length; i++) {
                        var id = $scope.reviews[i].ID;
                        var checked = $scope.reviews[i].Enabled == "1" ? true : false;
                        tp.row.add(
                            [
                                $scope.reviews[i].ID,
                                $scope.reviews[i].AddedOn,
                                $scope.reviews[i].Company.Name,
                                $scope.reviews[i].User.Name,
                                $scope.reviews[i].Description,
                                "<div class='switch'><div class='onoffswitch'><input ng-checked='" + checked+"' class='onoffswitch-checkbox' id= 'stat" + id + "' type= 'checkbox'><label class='onoffswitch-label' for='stat" + id + "'><span class='onoffswitch-inner'></span><span class='onoffswitch-switch'></span></label></div></div>"
                                //"<div class='switch'><div class='onoffswitch'><input checked='' class='onoffswitch- checkbox' id= 'stat" + id + "' type= 'checkbox'><label class='onoffswitch- label' for='stat" + id + "'><span class='onoffswitch- inner'></span><span class='onoffswitch-switch'></span></label></div></div>"
                                //"<button ng-click='EnableDisable(" + $scope.reviews[i].ID + ")'>Change</button>"

                            ]
                            );
                    }

                    tp.draw();

                    $compile(table)($scope); 
                }

sjt003 · Accepted Answer · 2015-08-30 17:30:07Z

0

you must bind trusted html with <div ng-bind-html="tp.row[x]"></div> or something like that to get the html replacement. I can't see your markup so it depends. Might benefit you to post the markup.

edited Aug 30, 2015 at 17:30

answered Aug 30, 2015 at 17:17

sjt003

2,6375 gold badges26 silver badges41 bronze badges

Collectives™ on Stack Overflow

How to pass html in jquery datatables row add function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related