osem-fcy/app/views/admin/users/index.html.haml

.row
  .col-md-12
    .page-header
      %h1
        Users
        - if @users
          = "(#{@users.length})"
        - if can? :create, User
          .pull-right
            = link_to 'Add User', new_admin_user_path, :class => 'button btn btn-default btn-info'
.row
  .col-md-12.table-responsive
    %table.datatable#users{ data: { source: admin_users_path(format: :json) } }
      %thead
        %tr
          %th{ width: '0' } ID
          %th{ width: '0' } Confirmed?
          %th{ width: '0' } Email
          %th{ width: '50%' } Name
          %th{ width: '0' } Conferences Attended
          %th{ width: '50%' } Roles
          %th{ width: '0' } Actions
      %tbody

:javascript
  $(function () {
    $('#users.datatable').DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": $('#users.datatable').data('source'),
      "drawCallback": function(settings) {
        checkboxSwitch("[class='switch-checkbox']");
      },
      "columns": [
        { "data": "id" },
        {
          "data": "confirmed_at",
          "render": function (data, type, row, meta) {
            return '<input type="checkbox" class="switch-checkbox" '+
                   'id="user_'+row.id+'_confirmed" '+
                   'name="user_'+row.id+'_confirmed" '+
                   (row.confirmed_at === '' ? '' : 'checked="checked" ')+
                   'url="/admin/users/'+row.id+'/toggle_confirmation?user[to_confirm]=" '+
                   '/>'
          },
          "searchable": false
        },
        { "data": "email" },
        {
          "data": "name",
          "className": "truncate",
          "render": function (data, type, row, meta) {
            return '<span data-toggle="tooltip" title="'+data+'">'+data+'</span>'
          }
        },
        { "data": "attended" },
        {
          "data": "roles",
          "className": "truncate" ,
          "render": function (data, type, row, meta) {
            return '<span data-toggle="tooltip" title="'+data+'">'+data+'</span>'
          }
        },
        {
          "data": "actions",
          "className": "actions",
          "sortable": false,
          "render":    function (data, type, row, meta) {
            return '<div class="btn-group">'+
                   '<a class="btn-info" href="'+row.view_url+'">View</a>'+
                   '<a class="btn-primary" href="'+row.edit_url+'">Edit</a>'+
                   '</div>';
          }
        }
      ]
    });
  });