Customize will_paginate to work with Ajax

Question

I've read this lesson. However, my Ajax function is different.

I just want to use will_paginate to render the pagination only. When click on a specific page, I will get the page number as parameter in Ajax call.

So, I disable href from pagination (function render_table_when_change_page()). However, the pagination doesn't work properly, it cannot expand or contract automatically anymore.

Working:

My code is not-working:

This is my code. Please teach me where I made mistake.

sales_controller.rb

def list
    type = params[:data_type] 
    page = params[:page]
    per_page = params[:per_page]
    @sale_data = Sale.get_money(type.to_i, page, per_page)

    render json: @sale_data
end

views/sales/index.html.erb

<div class="menu-bar">
  <ul class="nav nav-tabs">
    <li class="active">
      <%= link_to t('.type1'), "#", data: {toggle: "tab", type: 1} %>
    </li>
    <li>
      <%= link_to t('.type2'), "#", data: {toggle: "tab", type: 2} %>
    </li>
    <li>
      <%= link_to t('.type3'), "#", data: {toggle: "tab", type: 3} %>
    </li>
  </ul>
</div>

<div class="box-body no-padding">
    <table class="table table-striped" id="sale-table">
    <!-- Ajax render the body -->
    </table>
</div>

<div class="box-footer">
    <%= will_paginate @sale_data, renderer: BootstrapPagination::Rails %>
</div>

<script type="text/javascript">
    var default_type = 1;
    var default_page = 1;
    render_ranking_table(default_type, default_page );
    render_table_when_change_tab();
    render_table_when_change_page();
</script>

assests/javascripts/sales.js

function render_ranking_table(data_type, page){
    $.ajax({
        type: "POST",
        url: "/sales/list",
        data: {data_type: target, page: page},
        success : function (data) {
            var per_page = 30;

            $("#sale-table").remove();
            var tableObj = '<table class="table table-striped" id="sale-table">';
            $(".sale-table").prepend(tableObj);
            var table = $("#sale-table");
            var html = "<tbody>";
            for (var i = 0; i < data.length; i++) {
                html += '<tr>' +
                '<td>' + (i+1 + per_page*(page-1)) + '</td>' +
                '<td>' +
                    '<div>' + data[i].name + '</div>' +
                '</td>' +
                '<td>' +
                    '<div>' + data[i].money + '</div>' +
                '</td>'
                '</tr>';
            }
            html += "</tbody>";
            table.append(html);
        }
    });
}

function render_table_when_change_tab(){
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        var target = $(this).data("type");
        render_ranking_table(target, 1);
    })
}

function render_table_when_change_page(){
    $('.pagination a').on("click", function () {
      var data_type = $(".nav-tabs .active").children().data("type");
      var choosenPage =  $(this).text();

      var currentActivePage = $(".pagination .active").removeClass();
      $(this).parent().addClass("active");

      $.get(this.href, null, null, 'script');
      render_ranking_table(data_type, choosenPage);
      return false;
    });
}