Rails 6 + Webpack, Datatables, jQuery

Перемещение вашего собственного Javascript в файл пакета было хорошим выбором для удобства сопровождения. Однако я предполагаю, что это динамически генерируемые флажки. Они могут не существовать, когда выполняется привязка. Вы можете решить эту проблему, привязав к родительскому элементу и используя делегирование событий. document.body - это общий выбор привязки для делегированных событий с Turbolinks.

Я не поклонник вызова click () для флажка. Результат не всегда согласован для пользователей и запускает кучу ненужных событий в браузере. Инвертирование checked опоры более чистое и последовательное.

Для загрузки DataTables в качестве модуля требуется прокладка для импорта. Это более старый пакет, который предпочитает AMD CommonJS и переключается на себя в среде Webpack. К счастью, есть стандартное исправление для старого кода, использующее загрузчик импорта. К сожалению, даже в этом случае у него есть немного странный заводской экспорт, в который вы должны вставить переменные window и jQuery. К счастью, это также задокументировано здесь.

Собирая все вместе, вот предлагаемый application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

import $ from 'jquery'

// Add DataTables jQuery plugin
require('imports-loader?define=>false!datatables.net')(window, $)
require('imports-loader?define=>false!datatables.net-select')(window, $)

// Load datatables styles
import 'datatables.net-dt/css/jquery.dataTables.css'
import 'datatables.net-select-dt/css/select.dataTables.css'

$(document).on('turbolinks:load', () => {
  $(document.body).on('click', '#check_all', () => {
    var checkBoxes = $('input[type="checkbox"]')
    checkBoxes.prop("checked", !checkBoxes.prop("checked"))
  })

  // placeholder example for datatable with checkboxes
  $('#example').DataTable({
    columnDefs: [{
      render: (data,type,row) => `<input type="checkbox" value="${row[0]}">`,
      orderable: false,
      targets: 0
    }],
    order: [[ 1, 'asc' ]]
  })
})

Вам понадобится yarn add imports-loader, поскольку это вариант Webpack.

ProvidePlugin для этого не требуется. Если вы не зависите от него при импорте в сторонний код, его можно безопасно удалить.

запустить yarn add imports-loader

Я использую bootstrap4 datatable, если вы используете bootstrap3 или другие фреймворки CSS, пожалуйста, следуйте установке по этой ссылке: https://datatables.net/download/

in my config/webpack/loaders/datatable.js

module.exports = {
  test: /datatables\.net.*/,
  use: [{
    loader: 'imports-loader?define=>false'
  }]
}

in my config/webpack/environment.js

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')
const coffee =  require('./loaders/coffee')
const datatable =  require('./loaders/datatable')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  jquery: 'jquery',
  'window.jQuery': 'jquery',
  Popper: ['popper.js', 'default']
}))

/**
 * To use jQuery in views
 */
environment.loaders.append('expose', {
  test: require.resolve('jquery'),
  use: [{
    loader: 'expose-loader',
    options: '$'
  }]
})

environment.loaders.prepend('coffee', coffee)
environment.loaders.prepend('coffee', datatable)

module.exports = environment

in my app/javascript/packs/dashboard.js

require( 'jszip' );

require("datatables.net-bs4")(window, $);
require("datatables.net-responsive-bs4")(window, $);
require("datatables.net-buttons-bs4")(window, $);
require("datatables.net-select-bs4")(window, $);

require("datatables.net-bs4/css/dataTables.bootstrap4.css");
require("datatables.net-responsive-bs4/css/responsive.bootstrap4.css");
require("datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css");
require("datatables.net-select-bs4/css/select.bootstrap4.css");

Не стесняйтесь использовать import './datatable' в любом .js файле в app/javascript/packs, который вам нравится

У меня ничего из вышеперечисленного не сработало. Наконец, он заработал, следуя этому руководству: https://inopinatus.org/2019/09/14/webpacker-jquery-and-jquery-plugins/.

yarn add datatables.net-bs4 imports-loader

application.js

require('@rails/ujs').start()
require('@rails/activestorage').start()
require('channels')
require('jquery')
require('bootstrap/dist/js/bootstrap')
window.$ = $

require('imports-loader?define=>false!datatables.net')(window, $)
require('imports-loader?define=>false!datatables.net-bs4')(window, $)