Javascript 自定义将分页以使用Ajax

我读过这个。但是，我的Ajax函数不同

我只想使用

will_paginate

只渲染分页。当单击特定页面时，我将在Ajax调用中获得页码作为参数

因此，我从分页中禁用了

href

（

函数render\u table\u when\u change\u page（）

）。但是，分页无法正常工作，无法再自动展开或收缩

工作：

我的代码不起作用：

这是我的密码。请告诉我哪里出错了

销售控制器.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>

var默认值_类型=1；
var默认值_page=1；
呈现排名表（默认类型，默认页面）；
更改选项卡（）时呈现表格；
更改页面（）时呈现表格；

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;
    });
}

函数呈现排名表（数据类型，页面）{
$.ajax({
类型：“POST”，
url:“/sales/list”，
数据：{data_type:target，page:page}，
成功：功能（数据）{
每页var=30；
$（“#销售表”）.remove（）；
var tableObj=''；
$（“.sale table”）.prepend（tableObj）；
var表=$（“#销售表”）；
var html=“”；
对于（变量i=0；i