Fixed ajax datatable

Gemfile

@@ -27,7 +27,9 @@ gem "haml-rails", "~> 0.9"
 # Pure for css
 gem 'purecss-rails'
 # Use datatables
-gem 'jquery-datatables-rails', '~> 3.3.0'
+gem 'jquery-datatables-rails'
+gem 'ajax-datatables-rails'
+
 # Use Select2 for selecting users
 gem 'select2-rails'
 

Gemfile.lock

@@ -36,6 +36,8 @@ GEM
       minitest (~> 5.1)
       thread_safe (~> 0.3, >= 0.3.4)
       tzinfo (~> 1.1)
+    ajax-datatables-rails (0.3.1)
+      railties (>= 3.1)
     annotate (2.6.10)
       activerecord (>= 3.2, <= 4.3)
       rake (~> 10.4)
@@ -249,6 +251,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
+  ajax-datatables-rails
   annotate
   byebug
   cancancan
@@ -263,7 +266,7 @@ DEPENDENCIES
   haml-rails (~> 0.9)
   high_voltage (~> 2.4.0)
   jbuilder (~> 2.0)
-  jquery-datatables-rails (~> 3.3.0)
+  jquery-datatables-rails
   jquery-rails
   mysql2
   omniauth-oauth2

app/controllers/transactions_controller.rb

@@ -1,7 +1,10 @@
 class TransactionsController < ApplicationController
 
   def index
-    @transactions = Transaction.all
+    respond_to do |format|
+      format.html
+      format.json { render json: TransactionDatatable.new(view_context) }
+    end
   end
 
   def new

app/datatables/transaction_datatable.rb

@@ -0,0 +1,26 @@
+class TransactionDatatable < AjaxDatatablesRails::Base
+
+  def sortable_columns
+    # Declare strings in this format: ModelName.column_name
+    @sortable_columns ||= []
+  end
+
+  def searchable_columns
+    # Declare strings in this format: ModelName.column_name
+    @searchable_columns ||= []
+  end
+
+  private
+
+  def data
+    records.map do |record|
+      [
+        record.id, record.debtor.name, record.creditor.name, record.amount
+      ]
+    end
+  end
+
+  def get_raw_records
+    Transaction.all.eager_load(:debtor, :creditor)
+  end
+end

app/views/transactions/index.html.haml

@@ -1,4 +1,4 @@
-%table#transactions.display
+%table#transactions.display{data: { source: transactions_path }}
   %thead
     %tr
       %th id
@@ -6,13 +6,13 @@
       %th creditor
       %th amount
   %tbody
-    - @transactions.each do |transaction|
+
-      %tr
-        %td= transaction.id
-        %td= transaction.debtor.name
-        %td= transaction.creditor.name
-        %td= transaction.amount
 :javascript
   $(document).ready(function() {
-    $('#transactions').DataTable();
+    $('#transactions').DataTable({
+      processing: true,
+      serverSide: true,
+      ajaxSource: $('#transactions').data('source'),
+      pagingType: 'full_numbers'
+      });
   });