rails server side pagination not working

itsjc

Hello,

I'm trying to paginate my html DataTable and keep failing. When I press page 2, it shows Showing 11 to 18 of 18 entries but the data doesn't change at all.

I've been following tutorial #340 from RailsCast but I'm using 1.10 instead of the older version being used there.

Also, here are the server logs for when I press the 2. It just calls the same query in the database

Started GET "/contacts.json?draw=6&columns%5B0%5D%5Bdata%5D=0&columns%5B0%5D%5Bname%5D=&columns%5B0%5D%5Bsearchable%5D=true&columns%5B0%5D%5Borderable%5D=true&columns%5B0%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B0%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B1%5D%5Bdata%5D=1&columns%5B1%5D%5Bname%5D=&columns%5B1%5D%5Bsearchable%5D=true&columns%5B1%5D%5Borderable%5D=true&columns%5B1%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B1%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B2%5D%5Bdata%5D=2&columns%5B2%5D%5Bname%5D=&columns%5B2%5D%5Bsearchable%5D=true&columns%5B2%5D%5Borderable%5D=true&columns%5B2%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B2%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B3%5D%5Bdata%5D=3&columns%5B3%5D%5Bname%5D=&columns%5B3%5D%5Bsearchable%5D=true&columns%5B3%5D%5Borderable%5D=false&columns%5B3%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B3%5D%5Bsearch%5D%5Bregex%5D=false&columns%5B4%5D%5Bdata%5D=4&columns%5B4%5D%5Bname%5D=&columns%5B4%5D%5Bsearchable%5D=true&columns%5B4%5D%5Borderable%5D=false&columns%5B4%5D%5Bsearch%5D%5Bvalue%5D=&columns%5B4%5D%5Bsearch%5D%5Bregex%5D=false&order%5B0%5D%5Bcolumn%5D=0&order%5B0%5D%5Bdir%5D=asc&start=10&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1498855029733" for ::1 at 2017-06-30 16:42:13 -0400 Processing by ContactsController#index as JSON Parameters: {"draw"=>"6", "columns"=>{"0"=>{"data"=>"0", "name"=>"", "searchable"=>"true", "orderable"=>"true", "search"=>{"value"=>"", "regex"=>"false"}}, "1"=>{"data"=>"1", "name"=>"", "searchable"=>"true", "orderable"=>"true", "search"=>{"value"=>"", "regex"=>"false"}}, "2"=>{"data"=>"2", "name"=>"", "searchable"=>"true", "orderable"=>"true", "search"=>{"value"=>"", "regex"=>"false"}}, "3"=>{"data"=>"3", "name"=>"", "searchable"=>"true", "orderable"=>"false", "search"=>{"value"=>"", "regex"=>"false"}}, "4"=>{"data"=>"4", "name"=>"", "searchable"=>"true", "orderable"=>"false", "search"=>{"value"=>"", "regex"=>"false"}}}, "order"=>{"0"=>{"column"=>"0", "dir"=>"asc"}}, "start"=>"10", "length"=>"10", "search"=>{"value"=>"", "regex"=>"false"}, "_"=>"1498855029733"}

My JavaScript looks like this:

`

$(function() { $('#contacts').DataTable({ pageLength: 10, responsive: true, processing: true, serverSide: true, autoWidth: false, ajax: $('#contacts').data('source'), dom: '<"html5buttons"B>lTfgitp', buttons: [ { extend: 'copy'}, {extend: 'csv'}, {extend: 'excel', title: 'Contacts'}, {extend: 'pdf', title: 'Contacts'}, {extend: 'print', customize: function (win){ $(win.document.body).addClass('white-bg'); $(win.document.body).css('font-size', '10px'); $(win.document.body).find('table') .addClass('compact') .css('font-size', 'inherit'); } } ], columnDefs: [ { orderable: false, targets: [3,4] } ] }); });

`

My datatable.rb looks like this

`class ContactsDatatable
delegate :params, :edit_contact_path, :current_users_user, :h, :link_to, to: :@view

def initialize(view)
@view = view
end

def as_json(options = {})
{
sEcho: params[:sEcho].to_i,
iTotalRecords: Contact.where("organization_id = ?", current_users_user.organization_id).count,
iTotalDisplayRecords: contacts.total_entries,
aaData: data
}
end

private

def data
contacts.map do |contact|
[
contact.first_name,
contact.last_name,
contact.email,
contact.phone_number,
link_to('Edit', edit_contact_path(contact), class: "btn btn-primary")
]
end
end

def contacts
@contacts ||= fetch_contacts
end

def fetch_contacts
contacts = Contact.where("organization_id = ?", current_users_user.organization_id).order("#{sort_column} #{sort_direction}")
contacts = contacts.page(page).per_page(per_page)
if params[:sSearch].present?
contacts = contacts.where("first_name like :search or phone_number like :search or email like :search", search: "%#{params[:sSearch]}%")
end
contacts
end

def page
params[:iDisplayStart].to_i/per_page + 1
end

def per_page
params[:iDisplayLength].to_i > 0 ? params[:iDisplayLength].to_i : 5
end

def sort_column
columns = %w[id first_name last_name email phone_number]
columns[params[:iSortCol_0].to_i]
end

def sort_direction
params[:sSortDir_0] == "asc" ? "asc" : "desc"
end
end
`

And my controller is exactly how it is in his tutorial:

respond_to do |format| format.html format.json { render json: ContactsDatatable.new(view_context) } end

Why does my searching and pagination simply call the same query to the database?

kthorngren

It looks like the request for page 2 is sending these parameters:
"start"=>"10", "length"=>"10"

Looks like its requesting to start at record 10 and asking for 10 records to be returned.

Probably will need to look at the server side script to see what its doing. Maybe the problem is compatibility between the server side script and the newer versions of Datatables.

Kevin

itsjc

Hey @kthorngren , isn't the server side script the javascript code I posted above? Please let me know so that I can provide it. Been lost at this for hours.

Thanks

itsjc

@kthorngren by implementing what you said into my datatables.rb file and instead of looking for iDisplayLength and iDisplayStart looking for length and start .. it worked.... Am I missing anything? I doubt if it would have changed from iDisplayStart to start and so on that I would have found that solution in an update migration guide or somewhere else faster...

Just want to make sure I'm doing this right.

Thank you

kthorngren

According to the legacy Datatables docs iDisplayStart and iDisplayLength were used for what is now start and length.

The legacy server side docs are here:
http://legacy.datatables.net/usage/server-side

The current version is here:
https://datatables.net/manual/server-side

Kevin

itsjc

Thank you @kthorngren