datatable.js

datatable.js

import numeral from "numeral";
import * as moment from "moment";
import { datatableConfig } from "../config.json";

$(document).ready(() => {
    const $datatable = $('#-datatable');

    if (! $datatable) return;

    numeral.localeData().delimiters.thousands = ' ';

    const columns = [
        // 1st col
        {
            className:  'details-control',
            orderable: false,
            data: null,
            defaultContent: '',
        },
        // created_at
        {
            name: 'created_at',
            data: 'created_at',
            orderable: true,
            searchable: false,
            class: "text-nowrap",
            render: (data) => {
                moment.locale('fr');
                return moment(data).format('DD/MM/Y');
            },
        },
        // name
        {
            name: 'name',
            data: 'name',
            orderable: false,
            searchable: true,
            class: 'text-nowrap',
        },
        {
            name: 'number',
            data: 'number',
            orderable: false,
            searchable: false,
            className: "text-right text-nowrap",
            render: (data) => {
                if (! data) return '-';
                return numeral(data).format('0,0.00', Math.ceil);
            }
        },
    ];

    const options = {
        paging: true,
        searching: true,
        info: false,
        autoWidth: false,
        responsive: true,
        order: [[ 1, "desc" ]],
        columns: columns,
        processing: true,
        serverSide: true,
        stateSave: true,
        stateDuration: 259200, // 60 * 60 * 24 * 3
        fixedHeader: true,
        ajax: {
            url: "/..../datatable",
            type: "POST",
            data: {
                "_token": $('meta[name="csrf-token"]').attr('content'),
            }
        },
        language: datatableConfig.language,
    };

    let table = $datatable.DataTable(options);

    /**
     *
     * @param {object} data
     * @returns {string}
     */
    const showDetails = (data) => {
        let html = '';
        return html;

        for (const detail of data.details) {
            html += `<tr>
                            <td>${detail.name}</td>
                            <td class="text-nowrap text-right">
                                ${numeral(detail.number).format('0,0.00', Math.ceil)}
                            </td>
                        </tr>`;
        }

        return `<table class="table" style="width: calc(100% - 26px); margin-left: 26px;">
            <thead><tr>
                <th>Nom</th>
                <th class="text-right" style="width: 10px;">Qte.</th>
            </tr></thead>
            ${html}
        </table>`;
    };

    /**
     * Table Search
     */
    table.columns().every(function() {
        let timeout = null;

        $('input', this.footer()).val(this.search()).on('keyup change', (event) => {
            const val = event.target.value;

            clearTimeout(timeout);

            timeout = setTimeout(() => {
                if (this.search() !== val ) {
                    this.search(val).draw();
                }
            }, 1000);
        });
    });

    /**
     * Table draw event
     */
    table.on('draw', () => {
        $datatable.css('visibility', 'visible');

        $('.confirm-button', $datatable).on('click', function () {
            confirmAction($(this));
        });
    });

    /**
     * Detail onClick event
     */
    $datatable.on('click', 'td.details-control', function () {
        const $tr = $(this).closest('tr');
        const $row = table.row($tr);

        if ($row.child.isShown()) {
            $row.child.hide();
            $tr.removeClass('shown');
        } else {
            $row.child(showDetails($row.data()) ).show();
            $tr.addClass('shown');
        }
    });
});