I Need to Use toggle option in datatable using Twitter Bootstrap icons

Question

I have done a datatable which will get data from web service and fill the data itself. I have introduced an action button on a column in the datatable, which has <i class="icon-lock"> . Now when i click this icon, it should toggle and changed into <i class="icon-unlock">

$('#test').dataTable({
            "aaData": realdata,
            "aoColumns": [// "bVisible": false (To disable
        { "sTitle": "First Name", "mData": "FirstName", "sClass": "header2" },
        { "sTitle": "Last Name", "mData": "LastName", "sClass": "header2" },
        { "sTitle": "Email ID", "mData": "Email", "sClass": "header2" },
        { "sTitle": "Role", "mData": "Role", "sClass": "header2" },

                  {
                      "sTitle": "Action", "fnRender": function (oObj) {

                          if (oObj.aData["IsActive"] == "Y")
                              ActionHtml += "<a href='#' class='bs-tooltip Enable' title='' data-original-title='Search'><i class='icon-lock' onclick='EnableUser();'/></i></a>&nbsp|&nbsp";
                          else
                              ActionHtml += "<a href='#' class='bs-tooltip Enable' title='' data-original-title='Search'><i class='icon-unlock' onclick='EnableUser();'/></i></a>&nbsp|&nbsp";

                          return ActionHtml + '</span>';
                      }


                  }
            ]
        });

    });
function EnableUser() {
        $('.icon-lock').toggleClass('icon-unlock');
    }

Now when click the icon, i can get the toggle functionality with icon changing from icon-lock to icon-unlock .. But it is applied to all icon in all the rows in that column. I want it to apply only one row at a time.

Answer 1

try this

 $(document).ready(function(){
       $('.icon-lock, .icon-unlock').on('click',function(){
         $(this).toggleClass('icon-lock').toggleClass('icon-unlock');
       });
    });

see demo DEMO

Answer 2

Remove the onclick from the HTML and bind the click in JS like this

$(document).on('click','.Enable', function(){  
    $(this).find('.glyphicon').toggleClass('glyphicon-lock glyphicon-unlock');  // using glyphicon as class here for the demo
})

Fiddle

Your code wasn't working because you are not passing this to onclick=EnableUser() . You can then use this and toggle the classes.