我已经读过lesson了。但是,我的Ajax功能不同。
我只想使用will_paginate
来渲染分页。单击特定页面时,我将在Ajax调用中获取页码作为参数。
因此,我从分页(href
)中禁用function render_table_when_change_page()
。但是,分页不能正常工作,不能自动扩展或收缩。
工作:
我的代码无效:
这是我的代码。请教我错误的地方。
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
视图/销售/ 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>
入资产价值/ Javascript角/ 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;
});
}