Breakpoints at responsive

TSF

I have a code for breakpoints in responsive view

        var oTable = $('#tblwykazy').DataTable({
                        responsive: {
                breakpoints: [
                    { name: 'desktop', width: Infinity },
                    { name: 'tablet',  width: 1024 },
                    { name: 'fablet',  width: 768 },
                    { name: 'phone',   width: 320 }
                ]
            },

I can't force this width - i have 26 columns so only on 1600px+ screens width all columns are visible.

Is there any idea to let it work there by JS or maybe by another option? I have many tables so CSS is not an option.

I also need to have an option to get 100% width in breakpoints for first column - i want for desktop to show all columns and for all screens above to show one column. When i use it there it gaves me error for unexpected string after "%"

allan

Is there any idea to let it work there by JS

Let what work? I'm not clear on what your question is I'm sorry to say.

i want for desktop to show all columns and for all screens above to show one column.

Set all the other columns to have a columns.className of not-desktop. See the docs here for more information about special class names.

Allan

TSF

I got it. Now it works for 26 columns. Now i'm changing file with 7 columns and LP at start and i want to show 1st(LP) and 2nd column or just 2nd but it always hide second one

    responsive: {
                    breakpoints: [
                        { name: 'mobile', width: 0,  columns: [0, 1] },
                        { name: 'tablet', width: 1300,  columns: [0, 1] },
                        { name: 'desktop', width: 1400, columns: [0, 1, 2, 3, 4, 5, 6, 7] },
                    ],
                },
                columnDefs: [
                    { targets: '_all', className: 'desktop', responsivePriority: 1 },
                ],
                createdRow: function(row, data, dataIndex) {
                    if ($(window).width() > 1024) {
                        $(row).find('td:first-child').addClass('desktop');
                        $(row).find('td:nth-child(2)').addClass('desktop');
                        $(row).find('td:not(:first-child):not(:nth-child(2))').addClass('desktop');
                    } else {
                        $(row).find('td:first-child').addClass('mobile tablet desktop');
                        $(row).find('td:nth-child(2)').addClass('mobile tablet desktop');
                        $(row).find('td:not(:first-child):not(:nth-child(2))').addClass('not-mobile not-tablet');
                    }
                },

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.