mkhairi / jquery-datatables Goto Github PK

I have about 1000 records to load in a go. When I was loading it, it was taking around 4-5 seconds to load each time. Is there any way to put it into ajax on loading? The setting in datatable seems to prompt errors when I add them.

Background: I am using simple_form to render nested attributes of an association in rails. I have applied jquery-datatables gem on the edit form for the nested association using simple_fields_for.

My model is:

has_many :foos, dependent: :destroy
accepts_nested_attributes_for :foos, reject_if: :all_blank, allow_destroy: true

My view is:

edit.html.slim

     table.table.table-bordered#foo-requirements-table
            thead
              tr
                th Name
                th Age
               tbody.foo-row
              = form.simple_fields_for :foos do |f|
                = render("foo_fields", f: f)

_foo_fields.html.slim

tr class="#{foo_colour(f.object)} nested-fields"
  td
    = f.input :name, label: false, required: true
  td
    = f.select :age, Foo.foos.map {|p, _v| [p.upcase, p] }, {}, class: "form-control foo-colour"
 td
    = link_to_remove_association fa_icon("trash"), f, class: "btn btn-danger bottom-margin",
      data: {confirm: "Are you sure that you want to remove the row #{f.object&.age}?"}

controller

def edit
    @bar= Bar.find_by(id: params[:id])
    build_foos if @bar.foos.empty?
end

def build_foos
    ["a","b", "c"].each do |action|
      @bar.foos.build(name: action)
    end
end

Javascript

 $("#foo-requirements-table").DataTable({
    paging: false,
  });

Problem: With the above, the id field in the nested association disappears from the params. Without datatables applied it reappears. This causes rails to create new fields rather than updating the existing ones with datatables enabled.

params without datatables

<ActionController::Parameters {"0"=>{"name"=>"a", "age"=> 22, "_destroy"=> false, "id" => 12}}....>

params with datatables (no id field present)

<ActionController::Parameters {"0"=>{"name"=>"a", "age"=> 22, "_destroy"=> false}}....>

Note: I am allowing all the attributes in the params for the nested association, so its not an issue about params permit.

Great gem, thanks for putting this together.

Started GET "/images/sort_asc.png" for 127.0.0.1 at 2017-02-17 06:11:54 -0700

ActionController::RoutingError (No route matches [GET] "/images/sort_asc.png"):

The images should be included in the pipeline and the css can use image-url to use the asset path.
for example

table.dataTable thead .sorting {
  background-image: image-url("sort_both.png");
}

I noticed that it is pointing to the non-hashed versions of the sorting icons. Also, I am aware that newer versions of datatables actually embed the icons directly rather than use external files. Is there any way this can be resolved?

This is how my second table looks like using responsive:

Could not find gem 'jquery-datatables' in any of the gem sources listed in your Gemfile.
Gem sources seems to be the logical explanation. However I don't see any specific sources in the doc, other than the ones I've always used.

Using table-sm Boostrap class with fixedColumns option breaks the table and render an extra arrow.

With table-sm:

Without table-sm:

HTML code (it is long 🙈):

<table class="table table-sm" id="project-monitor-table">
<thead class="header">
<tr>
<th></th>
<th class="text-center" colspan="2">
Debian_7.0
</th>
<th class="text-center" colspan="2">
Debian_8.0
</th>
<th class="text-center" colspan="2">
Debian_9.0
</th>
<th class="text-center" colspan="1">
SLE_12_SP4
</th>
<th class="text-center" colspan="1">
SLE_15
</th>
<th class="text-center" colspan="1">
openSUSE_Leap_15.0
</th>
<th class="text-center" colspan="1">
openSUSE_Leap_15.1
</th>
<th class="text-center" colspan="1">
openSUSE_Leap_42.3
</th>
<th class="text-center" colspan="2">
openSUSE_Tumbleweed
</th>
<th class="text-center" colspan="2">
xUbuntu_12.04
</th>
<th class="text-center" colspan="2">
xUbuntu_14.04
</th>
<th class="text-center" colspan="2">
xUbuntu_16.04
</th>
<th class="text-center" colspan="1">
xUbuntu_17.10
</th>
<th class="text-center" colspan="1">
xUbuntu_18.04
</th>
<th class="text-center" colspan="1">
xUbuntu_18.10
</th>
</tr>
<tr>
<th></th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
i586
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
<th class="text-center">
x86_64
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
packname
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
</tr>
<tr>
<td>
packname
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
</tr>
<tr>
<td>
packname
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
<td class="text-center">
status
</td>
</tr>
</tbody>
</table>

Javascript code:

 $('#project-monitor-table').DataTable({scrollX: true, fixedColumns: true, pageLength: 50, lengthMenu: [[10, 25, 50, 100, -1], [10,25, 50, 100, "All"]], search: { regex: true, smart: false } });

Real/original code can be found here: https://github.com/openSUSE/open-build-service/blob/master/src/api/app/views/webui2/webui/project/monitor.html.haml

Very basic setup with this gem and using bootstrap 4 (all done through the generators here).

Calling a table like this:

$("#dataTables-emails").DataTable({
 dom: "Bfrtip"
});

And the buttons and search field are mis-aligned (as are the info and pagination in the footer).
How to fix this issue?

I'm supposed to be able to load the stylesheets just by the import statements in datatables.scss ? They don't work for me in my rails 7 app I get

Error: Can't find stylesheet to import.
╷
1 │ @import "datatables/dataTables.bootstrap4";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

Can you please advise? Am I supposed to copy the scss files from the gem to my app?

//Global setting and initializer

$.extend( $.fn.dataTable.defaults, {
responsive: true,
pagingType: 'full',
dom: "<'row'<'col s12 m6'l><'col s12 m6'f>>" +
"<'row'<'col s12'tr>>" +
"<'row'<'col s12 m5'i><'col s12 m7'p>>",
});

UI styling missing can we add it for materializecss in style options
for example https://themes.materializecss.com/pages/admin-table-custom-elements

Would it be a good idea to remove autoprefixer-rails as a direct dependency of the gem? It feels like something that should be included by the gem's end user on a case by case basis.

For example, the app I'm pulling this gem into is primarily an internal dashboard and does not require legacy or wide browser support. I currently manually disable AutoprefixerRails as my app has no need for it to be loaded.

Wondering what your thoughts are on this 🙂

I am using Bootstrap 4 and jquery-datatables 1.10.19.1. I have the following code:

<div class='row'>
  <div class='col-12 col-md-4 col-lg-3'>
    <!-- Content -->
  </div>

</div>
<div class='col-12 col-md-8 col-lg-9'>

  <table class='table table-striped table-bordered' id='involved-packages-table'>
    <thead>
      <tr>
        <th>Package</th>
        <th>Project</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <a href="/package/show/hola:Ana/ikyuikyuhkl">ikyuikyuhkl</a>
        </td>
        <td>
          <a href="/project/show/hola:Ana">hola:Ana</a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Which in an screen of 950px looks like:

It seems the problem is the width in the input, which comes from this code:

This may be related: DataTables/Plugins#110

I tried to make this gem work with Rails 6.0.2.2 (where the javascript have moved from assets/javascript to their own javascript folder - which is why the installer does not work)... without success

What I did is:

Modify javascript/packs/application.js

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require datatables

Create javascript/packs/datatables.js

//Core component
//= require datatables/jquery.dataTables
//Bootstrap4 theme
//= require datatables/dataTables.bootstrap4

And the datatables javascript is not loaded, which leads to the following:

$(...).DataTable is not a function TypeError: $(...).DataTable is not a function

What should I do?

I was navigating the page from dataTable to the show page. Once I clicked back button in the browser, the search and pagination from dataTable were duplicated as shown below.

I believe it's related to caching issue, just have no idea how to make it consistent along the way.
What I did after that is to make sure it reloads the whole page if the number of datatable is more than 1. It solves the problem temporarily. I just wonder if there's a way to make sure the flow is seamless even the back button is pressed.

%table.table.table-bordered#companies
  %thead.bg-primary.white-font
    %tr
      %th Company
      %th.text-center Sales Agent
      %th.text-center Number of Employees
  %tbody
    - @companies.each do |company|
      %tr
        %td{:scope => "row"}
          = company.name
          .float-right= link_to 'View', [:comp, company, :hostels], class: 'btn btn-primary btn-sm'
        %td.text-center= company.sales_agent_name
        %td.text-center= company.workers.size

:javascript
  $(document).on('turbolinks:load', function() {
    $("#companies").dataTable();
    if ($(".dataTables_length").length > 1) {
      window.location.reload();
    }
  });

I had a problem compiling datatable assets (version 1.10.15) using the latest version of sprockets (4.0.0.beta4). I fixed the issue locally by changing the extensions of the css files to scss.

Basic datatables is working great. However, I can't seem to get any of the extensions to work. For example, I added this to the head:
$("#sortable").DataTable( { fixedHeader: true });
But fixed headers doesn't work, nothing seems to change. This is the same behavior I'm getting with all of the extensions.
I installed this gem using your autoinstall, and enabled the appropriate extensions in datatables.scss.

is there something more than just installing the gem required