This topic contains 12 replies, has 2 voices, and was last updated by Jai Jai 1 year, 3 months ago.

Datatable Responsive


  • Yahiko
    Participant

    Posts: 11
    Member Reply #12887

    Hello,

    I’am having some trouble to use your datatable on firefox.

    i can’t find the parameter to have an horizontal scroll bar.

    Can you help me please ?

    Regards,

    Yahiko

     

    Attachments:
    You must be logged in to view attached files.
    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #12907

    Hi 🙂

    Can you try to add many columns and let the column overflows.

    The horizontal scrollbar should appear.

    Thanks


    Yahiko
    Participant

    Posts: 11
    Member Reply #12944

    Hi,

    sorry i’ve cut the code below

    The problem is : the horizontal scrollbar appear on chrome, not on firefox (v57)

     

    Attachments:
    You must be logged in to view attached files.
    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #12965

    Hi 🙂

    It should work for firefox.

    Please advice on how can I reproduce it?

    Thanks

    Attachments:
    You must be logged in to view attached files.

    Yahiko
    Participant

    Posts: 11
    Member Reply #12985

    Hi 🙂

    i attached my code.

    I cant join my latest screenshot, so here is the code :

    jQuery(document).ready(function () {

    DatatableDataLocalDemo.init()

    });

    Thanks

    • This reply was modified 1 year, 3 months ago by  Yahiko.
    Attachments:
    You must be logged in to view attached files.
    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #12999

    Hi 🙂

    Can you try to set option layout.scroll to true?

    var datatable = $('.m_datatable').mDatatable({...
      layout: {
        scroll: true,
      },

    Thanks

     

    • This reply was modified 1 year, 3 months ago by Jai Jai.

    Yahiko
    Participant

    Posts: 11
    Member Reply #13009

    Does not work :/

    But this error appear when i resize my screen

    Thanks

     

    Attachments:
    You must be logged in to view attached files.
    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #13029

    Hi 🙂

    Can you provide your full init code and attach here?

    We need to check it further.

    Thanks


    Yahiko
    Participant

    Posts: 11
    Member Reply #13033

    Hi 🙂

    full code below :  (sorry, how i can format code ?)

    `javascript
    var AdminTrainingDatatable = function () {
    var handlerTrainingTable = function () {
    var getUrl = $(‘.training_datatable’).attr(‘data-url’);
    var e = $.ajax({
    url: getUrl,
    success: function (data) {
    // var training = data[‘training’];
    // var more_info = data[‘more_info’];
    constructTable(data)
    }
    });`

    function constructTable(e) {
    a = $(‘.training_datatable’).mDatatable({
    data: {
    type: “local”,
    source: e,
    pageSize: 10
    },
    saveState: {
    cookie: true,
    webstorage: true
    },
    layout: {
    theme: ‘default’, // datatable theme
    class: ”, // custom wrapper class
    scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
    // height: 450, // datatable’s body’s fixed height
    footer: false, // display/hide footer

    spinner: {
    overlayColor: ‘#000000’,
    opacity: 0,
    type: ‘loader’,
    state: ‘brand’,
    message: true
    },

    icons: {
    sort: {asc: ‘la la-arrow-up’, desc: ‘la la-arrow-down’},
    pagination: {
    next: ‘la la-angle-right’,
    prev: ‘la la-angle-left’,
    first: ‘la la-angle-double-left’,
    last: ‘la la-angle-double-right’,
    more: ‘la la-ellipsis-h’
    },
    rowDetail: {expand: ‘fa fa-caret-down’, collapse: ‘fa fa-caret-right’}
    }
    },
    sortable: true,
    pagination: true,
    search: {
    input: $(‘#generalSearch’),
    },
    columns: [
    {
    field: “id_demande_formation”,
    title: “id”,
    width: 50,
    textAlign: “center”
    }, {
    field: “trainer_name”,
    title: “Demandeur”,
    textAlign: “center”,
    responsive: {visible: ‘lg’}
    }, {
    field: “date_start”,
    title: “Date de formation”,
    textAlign: “center”,
    responsive: {visible: ‘lg’},
    template: function (e) {
    var arrayDateStart = [];
    var arrayDateEnd = [];
    $.each(e, function (key, value) {
    if (key === “date_start”) {
    var dateStart = moment(value).format(‘L’);
    arrayDateStart.push(dateStart);
    }
    if (key === “date_end”) {
    var dateEnd = moment(value).format(‘L’);
    arrayDateEnd.push(dateEnd);
    }
    });
    return arrayDateStart + ” au ” + arrayDateEnd;
    }
    }, {
    field: “free_helpers”,
    title: “Conseillers concernĂ©s”,
    textAlign: “center”,
    responsive: {visible: ‘lg’},
    template: function (e) {
    var arrayName = [];
    $.each(e, function (key, value) {
    if (key === “free_helpers”) {
    var data = e[‘free_helpers’].split(‘, ‘);
    arrayName.push(data + ”
    “);
    }
    });
    return ‘<span class=”m-badge m-badge–wide” style=”font-size: 12px;”>’ + arrayName + ‘</span>’;
    }
    }, {
    field: “accompagnement”,
    title: “Accompagnement”,
    overflow: ‘visible’,
    width: 75,
    textAlign: “center”,
    responsive: {visible: ‘lg’},
    template: function (e) {
    var a = {
    0: {title: “Non”},
    1: {title: “Oui”}
    };
    return a[e.accompagnement].title
    }
    }, {
    field: “id_atelier”,
    title: “Atelier”,
    width: 75,
    textAlign: “center”,
    responsive: {visible: ‘lg’}
    }, {
    field: “ville”,
    title: “Centre”,
    width: 110,
    textAlign: “center”,
    responsive: {visible: ‘lg’}
    }, {
    field: “remarks”,
    title: “Remarque”,
    width: “300”,
    textAlign: “center”,
    responsive: {visible: ‘lg’}
    }, {
    field: “date_insert”,
    title: “Date de demande”,
    textAlign: “center”,
    responsive: {visible: ‘lg’}
    }, {
    field: “statut”, title: “Statut”, textAlign: “center”,
    template: function (e) {
    var a = {
    1: {title: “A traiter”, class: “m-badge–brand”, data: e.id_demande_formation },
    2: {title: “Soumise au coach”, class: ” m-badge–primary”, data: e.id_demande_formation },
    3: {title: “ValidĂ©e”, class: ” m-badge–success”, data: e.id_demande_formation },
    4: {title: “RefusĂ©e”, class: ” m-badge–danger”, data: e.id_demande_formation },
    5: {title: “Support Dev”, class: ” m-badge–info”, data: e.id_demande_formation },
    };
    return ‘<span class=”m-badge ‘ + a[e.statut].class + ‘ m-badge–wide” data-formation=”‘ + a[e.statut].data + ‘”>’ + a[e.statut].title + “</span>”
    }
    }, {
    field: “Actions”,
    width: 110,
    title: “Actions”,
    sortable: false,
    overflow: ‘visible’,

    template: function (row) {
    var dropup = (row.getDatatable().getPageSize() – row.getIndex()) <= 4 ? ‘dropup’ : ”;

    return ‘\
    <div class=”dropdown ‘ + dropup + ‘”>\
    \
    <i class=”la la-ellipsis-h”></i>\
    \
    <div class=”dropdown-menu dropdown-menu-right”>\
    <i class=”la la-edit”></i> Edit Details\
    <i class=”la la-leaf”></i> Update Status\
    <i class=”la la-print”></i> Generate Report\</div>
    \

    </div>
    \
    \
    <i class=”la la-edit”></i>\
    \
    ‘;
    },
    },
    ],
    translate: {
    records: {
    processing: ‘Patience…’,
    noRecords: ‘Aucun rĂ©sultat trouvĂ©’,
    searchPlaceholder: “Rechercher”,
    },
    toolbar: {
    pagination: {
    items: {
    default: {
    first: ‘Premier’,
    prev: ‘PrĂ©cĂ©dent’,
    next: ‘Suivant’,
    last: ‘Dernier’,
    more: ‘Plus de pages’,
    input: ‘Page numĂ©ro’,
    select: ‘SĂ©lectionnez un numĂ©ro de page’
    },
    info: ‘Affichage {{start}} – {{end}} sur {{total}} rĂ©sultats’
    }
    }
    }
    }

    });

    var query = a.getDataSourceQuery();

    $(‘#m_form_status’).on(‘change’, function () {
    a.search($(this).val(), ‘Statut’);
    }).val(typeof query.statut !== ‘undefined’ ? query.statut : ”);

    $(‘#m_form_type’).on(‘change’, function () {
    a.search($(this).val(), ‘Type’);
    }).val(typeof query.Type !== ‘undefined’ ? query.Type : ”);

    $(‘#m_form_status, #m_form_type’).selectpicker();
    }
    };

    return {
    init: function () {
    handlerTrainingTable();
    }
    }

    }();
    `

    `javascript
    $(document).ready(function () {
    AdminTrainingDatatable.init();
    });
    `

    • This reply was modified 1 year, 3 months ago by  Yahiko.
    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #13096

    Hi 🙂

    We have checked your init code. Nothing wrong with it. It should work.

    If columns are fit and not overflow, the horizontal scrollbar will not appear.

    Can you try to add more width to the columns?

    In your firefox, is there any column that overflows to the right and being cut from the table body?

    Thanks


    Yahiko
    Participant

    Posts: 11
    Member Reply #13106

    Hi 🙂

    I have tried to increase each columns width, and nothing changed.

    You can take a look on my screenshot : on the left : chrome, on the right : firefox

    Thanks

    Attachments:
    You must be logged in to view attached files.

    Yahiko
    Participant

    Posts: 11
    Member Reply #13158

    Hi,

    can someone find a solution to solve my problem ? I really need to fix it.

    Thanks

    Jai
    Jai
    Keymaster

    Posts: 2715
    Support Staff Reply #13202

    Hi 🙂

    Sorry for the late reply. We are still unable to reproduce the issue. We suggest you to try to put the datatable at the other several pages. Just to check whether, if there is some CSS which conflicts with mCustomScrollabar plugin.

    Thanks

Tagged: 

You must be logged in to reply to this topic.