我正在使用sinatra,postgres,ruby和续集ORM。数据集由以下代码生成:
cookie = request.cookies["cookie"]
unless cookie
redirect '/login'
end
user_id = users.where(:validation => cookie).get(:id)
if params['date_from'].empty?
search_term = params['search_term']
call_logs.where(:call_to => search_term, :user_id => user_id).or(:call_from => search_term, :user_id => user_id).or(:call_direction => search_term, :user_id => user_id).to_a.to_json
end
我没有使用任何特定的分页扩展,所以这可能是第一个问题。
jquery是:
$(document).ready(function() {
$("#get_my_call_logs").click(function() {
var search_term = $("#search_term").val();
$("#results").html("");
$("#results").append('<table id="content">').addClass('tftable');
$("#results").append('<tbody>')
$("#results").append('<tr><th>From</th><th>To</th><th>Direction</th><th>Duration</th><th>Billed time</th><th>Charge</th><th>Date</th></tr>');
$.getJSON("/get_call_logs?search_term="+search_term+"&date_from="+date_from, function(data) {
$.each( data, function( key, value ) {
var call_from = this["call_from"]
from = call_from.replace("@phone.plivo.com","")
var txt = '<tr><td>'+from+'</td>';
var call_to = this["call_to"]
to = call_to.replace("@phone.plivo.com","")
txt += '<td>'+to+'</td>';
txt += '<td>'+this["call_direction"]+'</td>';
txt += '<td>'+this["call_duration"]+'</td>';
txt += '<td>'+this["billed_duration"]+'</td>';
txt += '<td>'+parseFloat(this["total_charged_cost"]).toFixed(2)+'</td>';
txt += '<td>'+this["created_at"]+'</td></tr>';
$("#results").append(txt);
});
});
$("#results").append('</tbody>');
$("#results").append('</table>');
$("#results").append('<div id="pagination"></div>');
});
});
到目前为止一直很好,现在我遇到了问题。我正在使用simplepagination插件。代码是:
jQuery(function($) {
var items = $("#content tbody tr");
var numItems = items.length;
var perPage = 2;
// only show the first 2 (or "first per_page") items initially
items.slice(perPage).hide();
// now setup pagination
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
onPageClick: function(pageNumber) { // this is where the magic happens
// someone changed page, lets hide/show trs appropriately
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide() // first hide everything, then show for the new page
.slice(showFrom, showTo).show();
}
});
//});
});
数据全部打印在html上,没有任何分页,上面没有指定2项目。
这些家伙出了什么问题?非常感谢您的帮助。谢谢。
答案 0 :(得分:0)
我几乎不建议使用this jQuery textpager插件。 如此简单有效! 希望能帮到你。
答案 1 :(得分:0)
好的解决了,这是答案。有必要将分页脚本与json脚本合并,以便它们协同工作
$(document).ready(function() {
$("#get_my_call_logs").click(function() {
$("#pagination").pagination({
itemsOnPage: 5,
cssStyle: 'light-theme'
});
var search_term = $("#search_term").val();
var date_from = '';
$("#results").html("");
$("#results").append('<table id="content">').addClass('tftable');
$("#results").append('<tbody>')
$("#results").append('<th>From</th><th>To</th><th>Direction</th><th>Duration</th><th>Billed</th><th>Charge</th><th>Date</th>');
$.getJSON("/get_call_logs?search_term="+search_term+"&date_from="+date_from, function(data) {
$.each( data, function( key, value ) {
var call_from = this["call_from"]
from = call_from.replace("@phone.plivo.com","")
var txt = '<tr><td>'+from+'</td>';
var call_to = this["call_to"]
to = call_to.replace("@phone.plivo.com","")
txt += '<td>'+to+'</td>';
txt += '<td>'+this["call_direction"]+'</td>';
txt += '<td>'+this["call_duration"]+'</td>';
txt += '<td>'+this["billed_duration"]+'</td>';
txt += '<td>'+parseFloat(this["total_charged_cost"]).toFixed(2)+'</td>';
txt += '<td>'+this["created_at"]+'</td></tr>';
$("#results").append(txt);
});
var items = $("data, tr");
var numItems = items.length;
var perPage = 11;
$("#pagination").pagination({
items: numItems,
itemsOnPage: perPage,
cssStyle: "light-theme",
onPageClick: function(pageNumber) { // this is where the magic happens
// someone changed page, lets hide/show trs appropriately
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
items.hide() // first hide everything, then show for the new page
.slice(showFrom, showTo).show();
}
});
$("#results").append('</tbody>');
$("#results").append('</table>');
});
});
$("#results").append('<div id="pagination"></div>');
});
我希望这有助于其他人。这是多年来困扰我的事情。