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

.container-fluid
  .row-fluid
    .span12
      %h2
        Users
        - if @users
          = "(#{@users.length})"
      .well
        %table.table.table-striped.table-bordered.table-hover#users
          %thead
            %th
              %b Email
            %th
              %b Last Name
            %th
              %b First Name
            %th
              %b Public Name
            %th
              %b Roles
            %th
            %th
          - @users.each do |user|
            %tr
              %td
                = user.email
              %td
                = user.last_name
              %td
                = user.first_name
              %td
                = user.public_name
              %td
                = user.roles.map { |role| role.name }.join ','
              %td
                .modal.hide.fade{:id => "user-role-selection-#{user.id}", "role" => "dialog", "aria-hidden" => "true"}
                  .modal-header
                    %button{"type"=>"button", :class=>"close", "data-dismiss"=>"modal", "aria-hidden"=>"true"}
                      ×
                    %h3{:id => "role-selector-header-#{user.id}"}
                      Modifying Roles
                  .modal-body
                    - if current_user == user
                      You cannot modify your own role!
                      %br
                      %button{:class=> "btn btn-danger", "data-dismiss"=> "modal", "aria-hidden"=>"true"}
                        Cancel

                    - else
                      = "Give #{user.public_name} (#{user.email}) the following roles:"
                      = semantic_form_for(user, :url => admin_user_path(user), :method => :put) do |f|
                        = f.input :roles, :label => false
                        %button{:class=> "btn btn-danger", "data-dismiss"=> "modal", "aria-hidden"=>"true"}
                          Cancel
                        = f.action :submit, :as => :button, :button_html => {:value => "Save", :class => "btn btn-primary"}
                =link_to "Modify Roles", "#", "data-toggle" => "modal", "data-target" => "#user-role-selection-#{user.id}}"
              %td
                =link_to "Details", "javascript: void(0)", :class => "user-details-popover", "data-trigger" => "click", "data-placement" => "bottom",
                  "data-html" => "true",
                  "data-content" => user.popup_details,
                  "data-original-title" => ""

:javascript
  $(document).ready(function() {
      $('#users').dataTable( {
        "bScrollInfinite": true,
        "bScrollCollapse": true,
        "sScrollY": "200px"
      } );
  } );