Documentation needed for usage with AssetMapper

[ccandreva]

I can't find any current documentation for using datatables-bundle with AssetMapper . I did find a closed ticket from 2023 #322 however I could not get the examples there to work.

Also I asked for assistance on StackOverflow back in May and have not received any answers.

Is there a documented correct way to use this bundle with the AssetMapper ?

[curry684]

Nope, and we don't use AssetMapper in house. By all means do the research and share the wealth 😉

[auroraeosrose]

I'm still using the hack of adding the line in the bundled js (I maintain a fork with the fix... and some other stuff ... ugh)

use asset mapper to add the libraries you need - docs are good for this

https://github.com/burroaktoolinc/datatables-bundle/blob/main/src/Resources/public/js/datatables.js#L10

Added that line in the js that comes bundled - then created an entry point in importmap.php

    'dt' => [
        'path' => './assets/dt.js',
        'entrypoint' => true,
    ],
    'jszip' => [
        'version' => '3.10.1',
    ],
    'pdfmake' => [
        'version' => '0.2.20',
    ],
    '@popperjs/core' => [
        'version' => '2.11.8',
    ],
    'bootstrap' => [
        'version' => '5.3.7',
    ],
    'bootstrap/dist/css/bootstrap.min.css' => [
        'version' => '5.3.7',
        'type' => 'css',
    ],
    'jquery' => [
        'version' => '3.7.1',
    ],
    'datatables.net-bs5' => [
        'version' => '2.3.2',
    ],
    'datatables.net' => [
        'version' => '2.3.2',
    ],
    'datatables.net-bs5/css/dataTables.bootstrap5.min.css' => [
        'version' => '2.3.2',
        'type' => 'css',
    ],
    'datatables.net-datetime' => [
        'version' => '1.5.6',
    ],
    'datatables.net-datetime/dist/dataTables.dateTime.min.css' => [
        'version' => '1.5.6',
        'type' => 'css',
    ],
    'bootstrap-icons/font/bootstrap-icons.min.css' => [
        'version' => '1.13.1',
        'type' => 'css',
    ],
    'datatables.net-buttons-bs5' => [
        'version' => '3.2.4',
    ],
    'datatables.net-buttons' => [
        'version' => '3.2.4',
    ],
    'datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css' => [
        'version' => '3.2.4',
        'type' => 'css',
    ],
    'datatables.net-fixedheader-bs5' => [
        'version' => '4.0.3',
    ],
    'datatables.net-fixedheader' => [
        'version' => '4.0.3',
    ],
    'datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css' => [
        'version' => '4.0.3',
        'type' => 'css',
    ],
    'datatables.net-colreorder-bs5' => [
        'version' => '2.1.1',
    ],
    'datatables.net-colreorder' => [
        'version' => '2.1.1',
    ],
    'datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css' => [
        'version' => '2.1.1',
        'type' => 'css',
    ],
    'datatables.net-responsive-bs5' => [
        'version' => '3.0.5',
    ],
    'datatables.net-responsive' => [
        'version' => '3.0.5',
    ],
    'datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css' => [
        'version' => '3.0.5',
        'type' => 'css',
    ],
    'datatables.net-buttons/js/buttons.colVis.js' => [
        'version' => '3.2.4',
    ],
    'datatables.net-buttons/js/buttons.html5.js' => [
        'version' => '3.2.4',
    ],
    'datatables.net-buttons/js/buttons.print.js' => [
        'version' => '3.2.4',
    ],

That's a snippet from my own importmap.php file

dt.js is a monster that imports all the datatables stuff we use

// Datatables
// - plugins: buttons w/ colvis, html4, print, fixedheader, column reorder, responsive
import './vendor/datatables.net-bs5/css/dataTables.bootstrap5.min.css';
import './vendor/datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css';
import './vendor/datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css';
import './vendor/datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css';
import './vendor/datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css';

import JSZip from 'jszip';
import pdfMake from 'pdfmake';
pdfMake.fonts = {
    Roboto: {
        normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
        bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
        italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
        bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
    },
};

import $ from 'jquery';
window.$ = window.jQuery = $;

import 'datatables.net-bs5';
import DataTable from 'datatables.net-bs5';
import 'datatables.net-buttons';
import 'datatables.net-buttons/js/buttons.colVis.js';
import 'datatables.net-buttons/js/buttons.html5.js';
import 'datatables.net-buttons/js/buttons.print.js';
import 'datatables.net-buttons-bs5';
import 'datatables.net-fixedheader-bs5';
import 'datatables.net-colreorder-bs5';
import 'datatables.net-responsive-bs5';
import './bundles/datatables/js/datatables.js';

DataTable.Buttons.jszip(JSZip);


$(document).ready(function() {
    var table = $(tableSelector).initDataTables(datatableSettings, {
        layout: {
            topStart: [
                'buttons',
                'pageLength'
            ],
        },
        initComplete: function () {
            let api = this.api();

            api.columns().every(function () {
                const that = this

                // Attach to input fields
                $('input', this.footer()).on('keyup change clear', function () {
                    if (that.search() !== this.value) {
                        that.search(this.value).draw()
                    }
                })

                $('select', this.footer()).on('change', function () {
                    that.search(this.value).draw()
                })
            })

        }
    }).then(function(dt) {
        $( window ).on( "resize", function() {
            dt.columns.adjust();
            dt.responsive.recalc();
        });
    });

});

also has a resize fix for issues I was seeing with the responsive features in datatables and javascript to attach my footer per column filters :)

Then on twig page for wherever I want my datatables I have this - where datatable is the twig variable my datatable is in :)

{% block javascript %}
{{ importmap(['dt']) }}
<script>
    var tableSelector = '#my-div-for-table';
    var datatableSettings = {{datatable_settings(datatable)}};
</script>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div id="my-div-for-table">Loading...</div>
</div>
{% endblock %}

I still haven't found a way around adding that import line to the bundled javascript file.. and I've tried quite a bit

[ccandreva]

@auroraeosrose Thank you, much belated ! I haven't gotten back to this in quite a while.
I have a version of your dt.js being included right from app.js . That seemed to be all the help I saw. It's taken me a bit but I think I understand better what you are doing. I'm finally getting back to this and will try it your way.

[ccandreva]

@auroraeosrose Thank you ! I have the basics working now based on your comment.

One question: What is your initComplete function supposed to do ? I had included it, but had to remove it for the basic search/filter to work.