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

<% content_for :page_menu do %>
 	<ul class="list-sidebar">
    <li class="item-sidebar"><a class="btn-sidebar" href="/cpanel/sites"><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 active"><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">
    History
  </h2>
  <div class="cp-submenu-box">
    <a href="<%= cpanel_myhistory_path %>" class="submenu-item">Requests</a>
    <a href="<%= cpanel_mycontracts_path %>" class="submenu-item active">Contracts</a>
    <a href="<%= cpanel_mypurchases_path %>" class="submenu-item">Purchases</a>
  </div>
  <div class="cp-filter-box clear">
    <form action="" method="get">
      <%= select_tag "q",  options_for_select(@user_sites, params[:q]), :prompt => "All", :class => "form-control" %>
      <input type="submit" value="Filter" class="btn btn-success">
      <% if params[:q].present? %>
        <a href="/cpanel/contracts" class="btn btn-gray">Clear</a>
      <% end %>
    </form>
  </div>
  <div class="cp-addsite-history">
    <div class="box-request-history">
      <h3 class="sub-title">Contracts</h3>
      <div id="history-loading" class="cp-loading-box" style="display: none;">
        <span class="loading-text">
          <%= t("client_management.loading_contracts") %>
        </span>
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
      </div>
      <div id="error-msg-area" class="cp-message-box hide">
        <div class="message-text">
          Sorry, we found nothing.
        </div>
      </div>
      <div id="history-holder">
      </div>
    </div>
    <div class="cp-pagination" id="pagination-area">
      <nav aria-label="Page navigation"></nav>
    </div>
  </div>
</section>
<script type="text/javascript">
  $(document).on("click", ".confrim-btn",function(){
    if(!confirm("Are you sure?")){
      return false;
    }
  })
  var urlVars = getUrlVars();
  var pageNo = (urlVars["page"] ? parseInt(urlVars["page"]) : 1),
      query = urlVars["q"],
      loader = $("#history-loading"),
      holder = $("#history-holder"),
      errorArea = $("#error-msg-area"),
      paginationArea = $("#pagination-area");

  var getObjects = function(page){
    pageNo = page;
    holder.hide();
    loader.show();
    paginationArea.hide();
    $.ajax({
      url : "/cpanel/contracts",
      data : {"page" : page, "query" : query},
      dataType : "html",
      type : "get"
    }).done(function(html){
      setTimeout(function(){
        holder.html(html).show();
        loader.hide();
        var total_pages = parseInt(holder.find("input[type=hidden].total-pages").val());
        if (total_pages > 1){
          constructPagination(page, total_pages);
        }
      }, 500);
    })
  }

  $(document).ready(function(){
    getObjects(pageNo);
  })
</script>