wecuro_blog/common/app-assets/js/scripts/tables/datatables-extensions/datatable-responsive.js

/*=========================================================================================
    File Name: datatables-responsive.js
    Description: Responsive Datatable
    ----------------------------------------------------------------------------------------
    Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
    Version: 1.0
    Author: PIXINVENT
    Author URL: http://www.themeforest.net/user/pixinvent
==========================================================================================*/

$(document).ready(function() {

    /***********************************
     *       Configuration option       *
     ***********************************/

    $('.dataex-res-configuration').DataTable({
        responsive: true
    });

    /********************************
     *       `new` constructor       *
     ********************************/

    var tableConstructor = $('.dataex-res-constructor').DataTable();

    new $.fn.dataTable.Responsive(tableConstructor);

    /**********************************************
     *       Immediately show hidden details       *
     **********************************************/

    $('.dataex-res-immediately').DataTable({
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.childRowImmediate,
                type: ''
            }
        }
    });

    /************************************
     *       Modal details display       *
     ************************************/

    $('.dataex-res-modal').DataTable({
        responsive: {
            details: {
                display: $.fn.dataTable.Responsive.display.modal({
                    header: function(row) {
                        var data = row.data();
                        return 'Details for ' + data[0] + ' ' + data[1];
                    }
                }),
                renderer: function(api, rowIdx, columns) {
                    var data = $.map(columns, function(col, i) {
                        return '<tr>' +
                            '<td>' + col.title + ':' + '</td> ' +
                            '<td>' + col.data + '</td>' +
                            '</tr>';
                    }).join('');

                    return $('<table/>').append(data);
                }
            }
        }
    });

    /***********************************************
     *       With Buttons - Column visibility       *
     ***********************************************/

    $('.dataex-res-visibility').DataTable({
        dom: 'Bfrtip',
        buttons: [
            'colvis'
        ]
    });

    /*******************************
     *       With FixedHeader       *
     *******************************/

    var tableFixedHeader = $('.dataex-res-fixedheader').DataTable({
        responsive: true
    });

    new $.fn.dataTable.FixedHeader(tableFixedHeader, {
        header: true,
        headerOffset: $('.header-navbar').outerHeight()
    });

    /******************************
     *       With ColReorder       *
     ******************************/

    $('.dataex-res-colreorder').DataTable({
        responsive: true,
        colReorder: true
    });

    /*******************************************
     *       Column controlled child rows       *
     *******************************************/

    $('.dataex-res-controlled').DataTable({
        responsive: {
            details: {
                type: 'column'
            }
        },
        columnDefs: [{
            className: 'control',
            orderable: false,
            targets: 0
        }],
        order: [1, 'asc']
    });

    /*************************************
     *       Column control - right       *
     *************************************/

    $('.dataex-res-controlright').DataTable({
        responsive: {
            details: {
                type: 'column',
                target: -1
            }
        },
        columnDefs: [{
            className: 'control',
            orderable: false,
            targets: -1
        }]
    });

    /******************************************
     *       Whole row child row control       *
     ******************************************/

    $('.dataex-res-rowcontrol').DataTable({
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [{
            className: 'control',
            orderable: false,
            targets: 0
        }],
        order: [1, 'asc']
    });

    /********************************
     *      Vertical scrolling       *
     ********************************/

    var table = $('.dataex-res-scrolling').DataTable({
        scrollY: 300,
        paging: false
    });

    // Resize datatable on menu width change and window resize
    $(function () {

        $(".menu-toggle").on('click', resize);

        // Resize function
        function resize() {
            setTimeout(function() {

                // ReDraw DataTable
                tableFixedHeader.draw();
            }, 400);
        }
    });

});