client_management/app/views/client_managements/index.html.erb

<% content_for :page_menu do %>
 	<ul class="list-sidebar">
    <li class="item-sidebar active"><a class="btn-sidebar" href="#"><i class="fa fa-home" aria-hidden="true"></i><%= t("client_management.my_sites") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="<%= cpanel_myprofile_path %>"><i class="fa fa-address-card" aria-hidden="true"></i><%= t("client_management.profile") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="<%= cpanel_myhistory_path %>"><i class="fa fa-history" aria-hidden="true"></i><%= t("client_management.history") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="#"><i class="fa fa-question-circle-o" aria-hidden="true"></i><%= t("client_management.help_and_faq") %></a></li>
    <li class="item-sidebar"><a class="btn-sidebar" href="#"><i class="fa fa-user-circle-o" aria-hidden="true"></i><%= t("client_management.get_in_contact") %></a></li>
  </ul>
<% end %>

<section class="cp-content col-md-10">
  <h2 class="cp-page-title">
    <%= t("client_management.site_list") %>
    <span class="cp-title-smalltext">Total Site(s): <span id="total-site-count"><%= current_cpanel_user.registered_site_ids.count %></span></span>
  </h2>
  <div class="cp-function-box">
    <a href="<%= cpanel_add_site_path %>" class="btn btn-primary pull-right"><%= t("client_management.add_site") %></a>
  </div>
  <% if current_cpanel_user.first_time_run %>
		<div id="first-load" class="cp-loading-box">
      <span class="loading-text">
        <%= t("client_management.please_wait") %>
      </span>
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </div>
	<% end %>
  <div id="sites-loading" class="cp-loading-box" style="display: none;">
    <span class="loading-text">
      <%= t("client_management.loading_sites") %>
    </span>
    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
  </div>
  <ul class="list-servers" id="sites-area" <%= current_cpanel_user.first_time_run ? "style='display:none;" : "" %>>
    
  </ul>
  <div class="cp-pagination" id="pagination-area">
    <nav aria-label="Page navigation">
    </nav>
  </div>
  <div class="cp-function-box bottom">
    <a href="<%= cpanel_add_site_path %>" class="btn btn-primary pull-right"><%= t("client_management.add_site") %></a>
  </div>
</section>
	
</div>
<% if current_cpanel_user.first_time_run %>
	<script type="text/javascript">
	$(document).ready(function(){
		$.ajax({
			url : "/cpanel/dofirstrun",
			dataType : "html",
			type : "get"
		}).done(function(html){
      setTimeout(function(){
			 $("#sites-area").html(html).show();
			 $("#total-site-count").text($("input[type=hidden].total-sites").val());
			 $("#first-load").hide();
      },500);
		})
	})
	</script>
<% else %>
  <script type="text/javascript">
    var urlVars = getUrlVars();
    var pageNo = (urlVars["page"] ? parseInt(urlVars["page"]) : 1),
        siteLoading = $("#sites-loading"),
        sitesArea = $("#sites-area"),
        paginationArea = $("#pagination-area");
    $(document).ready(function(){
     getObjects(pageNo);
    })

    var getObjects = function(page){
      pageNo = page;
      sitesArea.hide();
      siteLoading.show();
      paginationArea.hide();
      $.ajax({
        url : "/cpanel/user_sites",
        dataType : "html",
        data : {"page" : page},
        type : "get" 
      }).done(function(html){
        setTimeout(function(){
          sitesArea.html(html).show();
          siteLoading.hide();
          $("#total-site-count").text( $("input[type=hidden].total-sites").val());
          var total_pages = parseInt(sitesArea.find("input[type=hidden].total-pages").val());
          if (total_pages > 1){
            constructPagination(page, total_pages);
          }
        },500)
      })
    }
  </script>
<% end %>