如何使用“simplepagination.js”对 postgres 数据集进行分页？

Question

我正在使用 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 项计数。

这里出了什么问题？非常感谢您的帮助。谢谢。

Answer 1

我几乎不推荐你 this jQuery textpager 插件。 如此简单有效！ 希望有所帮助。

Answer 2

好的解决了，这里是答案。需要将分页脚本与 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>');

});

我希望这对其他人有所帮助。这是困扰我多年的事情。