Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

I am just getting into the AngularJS world (and loving it). Along with that, I am also working with a (purchased) Bootstrap design package. Within that package are table layouts that utilize the datatables.net plugin. I have an Angular controller working with a table retrieving things correctly via a RESTful API, but on each row I would like to have a button to "edit" -- that pops up a modal. (The popup is not the issue.)

My challenge comes when I want to "render" the button for each row. Per the DataTable reference there is an argument called "mRender" that be used for a given row's data with a custom string. The fun part is, I want the button to utilize ng-click. Being that Angular is initialized prior to the DOM rendering this doesn't work so well.

In doing research I found the $compile method that provides quite a bit of functions for rendering a DOM element with registered events in Angular. Problem is, the DataTable API doesn't want a DOM element it wants HTML. I tried a little jQuery rig to convert back to.html(), which works great to get the button on the page but the click event did not register.

I really don't want to rig anything up. I want this to be a proper design. That said I am looking for suggestions about how I can get the button click event registered in Angular but utilize the DataTable.net functions.

Below is my initialization of the DataTable in the Angular controller...

myDataTable = $('#datatable4').dataTable({
  paging: true,  // Table pagination
  ordering: true,  // Column ordering 
  info: true,  // Bottom left status text
  ajax: {
    url: 'http://+++++++++++++++++/MemberService.svc/GetMemberList/',
    dataSrc:''
  },
  aoColumns: [
    { mData: 'MemberID'},
    { mData: 'Email' },
    { mData: 'FirstName' },
    { mData: 'LastName' },
    { mData: 'InsertDate' },
    {
      mData: 'MemberID',
      //asSorting: ['asc, desc'],
      bSearchable: false,
      bSortable: false,
      bVisible: true,
      mRender: function (d, t, f) {
        var s = '<div class="buttons">'
        + '<button ng-click="showUser(' + d + ')" title="Edit" class="btn btn-sm btn-info">'
        +'<em class="fa fa-pencil"></em>'
        +'</button>'
        + '<button ng-click="removeUser(' + d + ')" title="Delete" class="btn btn-sm btn-danger">'
        +'<em class="fa fa-trash"></em>'
        +'</button>'
        + '</div>';
        return s;
      }
    },
  ]
});
share|improve this question
    
Have you looked at Angular datatables.net? With this I defined a button column like <td> <button type="button" ng-click="vm.openModal(item)" class="btn btn-sm btn-info"><i class="fa fa-edit"> Edit</i></button> </td> – Uluk Biy Feb 27 at 5:47
    
There are many table/grid plugin modules for angular on the net. Most of them support bootstrap styling, and some of them written pure in Angular without jquery plugins, so you need not to stay with current implementation. – Uluk Biy Feb 27 at 5:50
    
It also looks like the template you purchased uses an older version of DataTables. I would recommend switching to at least upgrade if not switch to a different plugin. Angular datatables.net looks nice but another option is trNgGrid - I found it the easiest to use. – gaiazov Feb 27 at 7:05

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.