Example project datatable ajax in rails 7

This is example how you can orginize datatable ruby on rails 7 project with ajax

ruby: 3.2.2

rails 7

gem 'ajax-datatables-rails'
gem 'jquery-rails'

rails new example

rails g datatable User create datatable
rails g scaffold User name:string 
rails db:create
rails db:migrate

add to app/views/users/index.html.erb

new line

<table data-controller="users" id="users-datatable" data-source="<%= users_path(format: :json) %>" data-users-target="table">
<thead>
 <tr>
   <th>ID</th>
   <th>Name</th>
 </tr>
 </thead>
 <tbody>
 </tbody>

uncomment lines in app/datatables/user_datatable.rb

 def view_columns
   @view_columns ||= {
     id: { source: "User.id", cond: :eq },
     name: { source: "User.name", cond: :like }
   }
 end

 def data
   records.map do |record|
     {
       id: record.id,
       name: record.name
     }
   end
 end

 def get_raw_records
   User.all
 end

 add to app/controllers/users_controller.rb

 def index
   @users = User.all
   respond_to do |format|
     format.html
     format.json { render json: UserDatatable.new(params) }
   end
 end

add to config/routes.rb

 root "users#index"

to add jquery and bootstrap to rails 7 with importmap 

add to config/importmap.rb

pin "jquery", to: "https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.js"
pin "datatables.net", to: "https://cdn.datatables.net/2.0.5/js/dataTables.min.js"

and to app/javascript/application.js

import 'jquery';
import 'datatables.net'

rails assets:clobber remove compiled assets if need it

add to app/javascript/controllers/users_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
    static targets = ['table']

    connect() {
        if (!$.fn.dataTable.isDataTable(this.tableTarget)) {
            this.dataTable = $(this.tableTarget).DataTable(this.dataTableOptions)
            $(this.tableTarget).on('init.dt', this.initialize.bind(this))
        }
    }

    disconnect() {
        if ($.fn.dataTable.isDataTable(this.tableTarget)) {
            // this.dataTable.destroy()
        }
        // this.element.remove()
    }
    manipulateData(data) {
        return data
    }

    get source() {
        return this.data.get('source')
    }

    get dataTableOptions () {
        return {
            // keys: !0,
            // responsive: true,
            // deferRender: true,
            processing: true,
            serverSide: true,
            ajax: {
                url: this.source,  // it is the url that we give in view like this data-source="<%= root_path(format: :json) %>"
                // data: this.manipulateData.bind(this)
            },
            "pagingType": "full_numbers",
            "columns": [
                {"data": "id"},
                {"data": "name"}
            ]
        }
    }
}

rails s

application available at 127.0.0.1:3000

That is it, happy coding

Feel free to join us

t.me/bravowebdevchannel

t.me/bravowebdev