I found some difficulty in looking for documentation of integrating this in the new Rails away from the lands of Sprocket.
Hopefully this can help you and my future self when I come back to understand what I did to make my codes work instead of leaving it to God.
Datatables and custom styling
Datatables ship with its core files and some default styling packages with major CSS framework like Bootstrap and Foundation. Taking Bootstrap 4 as the example framework, install the packages below using
"datatables.net": "^1.10.19", "datatables.net-bs4": "^1.10.19",
These are the latest versions at the time of writing. They will be added to the
application.js for now), require the file and initialize
Let me explain what each line does.
On line 1, we import the core datatables js files. These js files adds the standard search and sorting functions of datatables as well as wire up any of your custom configurations.
On line 3, it imports the custom css file that are required by the
Webpack will compile this
extract_css option as
true in the
webpacker configuration, it will instruct
webpacker to compile the css into a standalone file, instead of loading it as part of the
stylesheet_pack_tag to load the css file in the page for the styling to work.
Line 5 is where we declare a
datatables array variable to be accessed within this module that is this script. This is a critical step for
DataTables to play well with Rails in a
turbolinks powered environment. The role of this variable is to store all instances of the tables that have been initialized.
The next 2 blocks of code add 2 listeners to the DOM.
The first triggers the
dataTable() function on the desired elements that bear the class
data-table. This sets up the pagination, search, sort etc functionalities that make
datatables so powerful and simple on your table element. The event this occurs on is
turbolinks:load, which is when the url changes and the page loads. Each element is initialized and stored in the
dataTables array variable. They will be referenced in the 2nd listener.
The second listener will destroy each of the
dataTable instance that are stored in the namesake variable, if any is present. It is triggered during the
turbolinks:before-cache event, which takes place when the page navigates away. This step is crucial to remove the elements that were added when the
datatables script is evaluated, like the search bar and the pagination elements. If this is not done, there will be extra elements appearing on the webpage when the user navigates back through the browser history as mentioned in this Github issue.
NOTE that it is important NOT to name the class of your elements as “
dataTable” as they will get destroyed in the process. If that happens, when the user navigates forward and back again or vice versa, the element will not be picked up and the
dataTable() function will not be executed. Kudos to Philip for his comment.
tablethat you will like to initialize the
jsfile in the
stylesheet_pack_taguseful only if you have enabled
webpackerconfiguration. It will be responsible to load the compiled (or ‘extracted’ in this context)
Playing Well With Turbolinks
headhtml element tag because
headand not the
bodyhtml element tag. To do this in the page, use the
headsection of the page’s layout, ensuring that