Datatables styles and plugins not working with NPM

Daglimioux

Hi there.

I'm kinda new with node and compiling all modules into a signle JS. I'm using Laravel framework, which comes with a webpack script pre-configured and I used to specify a require('module_name') to import another module. I've followed the guide of NPM installation (https://datatables.net/download/npm) and configured my app.js like so:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

try {
    window.$ = window.jQuery = require('jquery');

    require('jquery-ui/ui/widgets/autocomplete');
    require('bootstrap-sass');
    require('datatables.net')(window, $);
    require('datatables.net-bs')(window, $);
    // require('datatables.net-autofill')(window, $);
    // require('datatables.net-autofill-bs')(window, $);
    require('datatables.net-buttons')(window, $);
    require('datatables.net-buttons-bs')(window, $);
    // require('datatables.net-colreorder')(window, $);
    // require('datatables.net-fixedcolumns')(window, $);
    require('datatables.net-fixedheader')(window, $);
    // require('datatables.net-keytable')(window, $);
    require('datatables.net-responsive')(window, $);
    require('datatables.net-responsive-bs')(window, $);
    // require('datatables.net-rowgroup')(window, $);
    require('datatables.net-scroller')(window, $);
    require('datatables.net-select')(window, $);
} catch (e) {}

Then run npm run dev (this is isued by Laravel to compile those JS). The problem is that when I import my app.js compiled and do a call to datatables, I can't get the buttons plugin, responsive plugin nor bootstrap styling work properly. My table gets out of content, doesn't apply "form-control" classes to inputs and custom buttons doesn't show up. I don't know what I'm doing wrong, but as I mentioned, I'm kinda new with node and webpack. I've tried importing datatables from CloudFlare and mostly everything works as expected, but I need the other plugins that are not on CloudFlare and I cannot make it work with node.

Hope it's clear enough and let me know if you need any further information.

Best regards,
D.

allan

Can you link to a resulting page so I can see what finally gets imported on the page please?

Allan

Daglimioux

I've uploaded the full compiled package to a temporary download link server, because it's too big for pastebin:

http://bit.ly/2BLdjPo

Sorry for the inconvenience.

Thanks for your time.

Best regards,
D.

allan

Hi,

That's the Webpack built Javascript. Can you give me a link to the running page so I can debug that directly please.

Allan

Daglimioux

Sorry, I can't provide you that as it is a private project and you need a login for the page and I'm not allowed to provide you a login for that page.

The file I sent you is the webpack compiled js and I call the datatables function like this

// ...
<script type="text/javascript" src="/js/app.js" ></script>
<script type="text/javascript">
    $(function() {
        $('table').DataTable({ ... });
    });
</script>
// ...

Some of the options provided to the datatable plugin are:

responsive: true,
dom: 'Bfrtip',
buttons: [
    {
        text: 'Refresh',
        action: function (e, dt, node, config) {
            location.reload();
        }
    }
],

I don't get any errors in JS referring to datatables or even non existing functions. I hope this is enough. If you need any further information, let me know and I will try to give you as much information as I can.

Thanks for your time.

Best regards,
D.

allan

Are you able to use http://live.datatables.net , CodePen, JSFiddle or similar to create a test case please.

Allan

Daglimioux

Hi there.

I'm sorry, but I can't use my script with datatables compiled. If I do, then I will expose other source codes outside the web app and I'm not allowed to do that. But my main problem is when importing datatables, as I mentioned. I don't get any errors in the js itself when imported and called datatables.

There is a working example with JS imported manually from your linked datatables example, modified to fit my data: http://live.datatables.net/zutuhiwu/1/edit?html,css,js,output

Also, here are some screenshots of the behaviour with some pasted code:

// app.js
require('./bootstrap');

// bootstrap.js
window._ = require('lodash');

try {
    window.$ = window.jQuery = require('jquery');

    require('jquery-ui/ui/widgets/autocomplete');
    require('bootstrap-sass');
    require('datatables.net')(window, $);
    require('datatables.net-bs')(window, $);
    // require('datatables.net-autofill')(window, $);
    // require('datatables.net-autofill-bs')(window, $);
    require('datatables.net-buttons')(window, $);
    require('datatables.net-buttons-bs')(window, $);
    // require('datatables.net-colreorder')(window, $);
    // require('datatables.net-fixedcolumns')(window, $);
    require('datatables.net-fixedheader')(window, $);
    // require('datatables.net-keytable')(window, $);
    require('datatables.net-responsive')(window, $);
    require('datatables.net-responsive-bs')(window, $);
    // require('datatables.net-rowgroup')(window, $);
    require('datatables.net-scroller')(window, $);
    require('datatables.net-select')(window, $);
} catch (e) {}

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

import Echo from "laravel-echo";

// adminPage.js
function initializeDatatable(jQueryObject, data) {
    if ($.fn.dataTable.isDataTable(jQueryObject)) {
        jQueryObject.DataTable().clear().rows.add(data).draw();
        return false;
    }
    // Datatable constructor
    return jQueryObject.DataTable({
        data: data,
        responsive: true,
        order: [[0, 'asc']],
        columnDefs: [
            {
                targets: 0,
                data: 'full_case',
            },
            {
                targets: 1,
                data: 'subject',
            },
            {
                targets: 2,
                data: null,
                render: function(data, type, row, meta) {
                    if (type === "display") {
                        switch(data.priority) {
                            case 0:
                                return '<span class="badge bg-red">High</span>';
                            case 1:
                                return '<span class="badge bg-orange">Medium</span>';
                            case 2:
                                return '<span class="badge bg-green">Low</span>';
                            default:
                                return 'Without priority';
                        }
                        return false;
                    } else {
                        return data.priority;
                    }
                },
            },
            {
                targets: 3,
                data: null,
                render: function(data, type, row, meta) {
                    if (type === "display") {
                        if (data.status === 100) {
                            return 'Open';
                        } else if (data.status === 200) {
                            return 'Closed';
                        } else {
                            return '';
                        }
                    } else {
                        return data.status;
                    }
                },
                createdCell: function (td, cellData, rowData, rowIndex, colIndex) {
                    if (rowData.status === 100) {
                        $(td).addClass('bg-green');
                    } else if (rowData.status === 200) {
                        $(td).addClass('bg-red');
                    }
                },
                className: 'dt-center',
            },
            {
                targets: 4,
                data: null,
                render: function(data, type, row, meta) {
                    if (type === "display") {
                        switch(data.action) {
                            case 100:
                                return 'Waiting support reply';
                            case 101:
                                return 'Waiting user reply';
                            default:
                                return '-----';
                        }
                        return false;
                    } else {
                        return data.action;
                    }
                },
                createdCell: function (td, cellData, rowData, rowIndex, colIndex) {
                    if (rowData.action === 100) {
                        $(td).addClass('red');
                    } else if (rowData.action === 101) {
                        $(td).addClass('green');
                    }
                },
                className: 'dt-center',
            },
            {
                targets: 5,
                data: 'from',
            },
            {
                targets: 6,
                data: null,
                render: function(data, type, row, meta) {
                    if (data.user) {
                        return (data.user.lastname !== null ? `${data.user.name} ${data.user.lastname}` : data.user.name);
                    } else {
                        return '';
                    }
                },
            },
            {
                targets: 7,
                data: 'last_activity',
                sType: 'date-euro',
            },
            {
                targets: 8,
                data: null,
                orderable: false,
                sorting: false,
                className: 'dt-center dt-actions',
                render: function(data, type, row, meta) {
                    // some stuff to create custom icons column
                },
            },
        ],
        initComplete: function () {
            // some stuff for styling custom icons column...
        }
    });
}
$(function() {
    $.get('/admin/support', {
        filter: 'all'
    }, function(data) {
        initializeDatatable($('table'), data);
    }, 'json');
});

In my page:

<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="adminPage.js"></script>

Here are the screenshots from my app with working examples:

1 - Look at the highlighted zones (red squares) and see how styles are applied: https://ibb.co/cZvxhc
2 - Responsive (not with the extra plugin, but atleast respects container size): https://ibb.co/i14ZTH
3 - Working example with NPM compiled file: https://ibb.co/neNooH

I still cannot find the problem, tbh. Thanks for your time and sorry for the late reply.

Best regards,
D.

Daglimioux

@allan I've recently posted a comment that I edited but the forum said that it needs to be validated. Can you see my last post? Thanks.

D.

sdroulers

Whell, all the CSS styling has to be imported in your app.scss file, the js code in your app.js code

allan

Okay - I'm more with it now. My understanding of WebPack at the moment is that you need to either use a plug-in for it to load in the required style files, they aren't automatically picked up by WebPack from your Javascript includes.

That might change with the latest WebPack and some changes I've made to the npm packages for DataTables that I've made recently. I'm going to experiment a little with them before tagging and releasing.

Allan

Daglimioux

@sdroulers docs says that some of the datatables.net-*-bs are ONLY css and must be added in the scss compilation of WebPack and I also did that, but still not working. But you remembered me that I didn't put that code to see if that was what it was causing a conflict in there or something like that.

// Fonts
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);

// Variables
@import "variables";

// Bootstrap
// @import "~bootstrap-sass/assets/stylesheets/bootstrap";
@import "~jquery-ui/themes/base/all.css";

// Datatables
@import "~datatables.net-bs/css/dataTables.bootstrap.css";
// @import "~datatables.net-autofill-bs/css/autoFill.bootstrap.css";
@import "~datatables.net-buttons-bs/css/buttons.bootstrap.css";
// @import "~datatables.net-colreorder-bs/css/colReorder.bootstrap.css";
// @import "~datatables.net-fixedcolumns-bs/css/fixedColumns.bootstrap.css";
@import "~datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.css";
// @import "~datatables.net-keytable-bs/css/keyTable.bootstrap.css";
// @import "~datatables.net-rowgroup-bs/css/rowGroup.bootstrap.css";
@import "~datatables.net-scroller-bs/css/scroller.bootstrap.css";
@import "~datatables.net-select-bs/css/select.bootstrap.css";

Thanks for your time. I will check if the update fixes the problem.

And sorry for the late reply, I'm working so hard with the project.

Best regards,
D.

moscoquera

ok, in my case:

table.dataTable {
    border-collapse: collapse !important;
}

did the trick solving rendering issues