When using dom: the buttons disappear

joseoliveiraborlas · March 2023

Hello. I have the DT and Editor working fine, including some custom buttons as well. But when I try to use the SearchPanes, I have to use the 'dom:' function to specify the location of the Searchpanes, the buttons disappear, regardless of the location of the 'sp'. I just use " dom:' ' " and it doesn't work anymore. Any suggestion?

tangerine · March 2023

Your dom definition needs to include B for buttons.

joseoliveiraborlas · March 2023

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor({
            ajax: 'includes/table.sells.php?i=<?php echo $_GET["i"]; ?>',
            table: '#tbbl',
            fields: {
                "label": "SN:",
                "name": "sn"
            },
            {
                "label": "IMEI:",
                "name": "imei"
            },
            {
                "label": "Identificação",
                "name": "identificacao"
            },
            {
                "label": "Cor:",
                "name": "cor"
            },
            {
                "label": "Codigo:",
                "name": "codigo"
            },
        },

    ]

});


var table = $('#tbbl').DataTable({
            dom: 'BfrtipP', //  <<<<<<<------- probematic 


            language: {
                "url": "assets/DataTables/1.13.2/pt-PT.json",
                "select": {
                    "cells": {
                        "1": " ",
                        "_": " "
                    },
                    "columns": {
                        "1": " ",
                        "_": " "
                    },
                    "rows": {
                        "1": " ",
                        "_": " "
                    }
                },
            },
            scrollX: false,
            scrollY: false,
            autoWidth: false,
            "select": true,
            lengthChange: false,
            stateSave: false,
            "stateDuration": 10,
            deferRender: true,
            responsive: true,
            "paging": false,
            ajax: 'table.php',
            initComplete: function(settings, json) {
                new $.fn.dataTable.Buttons(table, [{
                        text: '<i class="fa fa-user" aria-hidden="true"></i>',
                        className: 'btn-group btn btn-default',
                        key: 'v',
                        action: function() {
                            window.location = 'cliente-ficha.php?i=<?php echo $_GET["i"]; ?>';
                        },
                    },
                    {
                        extend: "create",
                        editor: editor,
                        className: 'btn-group btn btn-primary',
                        text: '<i class="fa fa-plus" aria-hidden="true"></i>',
                        key: 'a'
                    },
                    {
                        extend: "edit",
                        editor: editor,
                        className: 'btn-group btn btn-warning',
                        text: '<i class="fa fa-pencil" aria-hidden="true"></i>',
                        key: 'e'
                    },
                    {
                        extend: "remove",
                        editor: editor,
                        className: 'btn-group btn btn-danger',
                        text: '<i class="fa fa-trash" aria-hidden="true"></i>',
                        key: 'x'
                    },
                    {
                        extend: "selectedSingle",
                        text: '<i class="fa fa-check-square-o" aria-hidden="true"></i> Concluir',
                        className: 'btn btn-primary',
                        key: 'c',
                        action: function(e, dt, node, config) {
                            editor
                                .edit(table.row({
                                    selected: true
                                }).index(), false)
                                .set('estado', ('Concluído'))
                                .submit();
                        }
                    },
                    {
                        extend: "selectedSingle",
                        text: '<i class="fa fa-money" aria-hidden="true"></i> Pagar',
                        className: 'btn btn-success',
                        key: 'p',
                        action: function(e, dt, node, config) {
                            editor
                                .edit(table.row({
                                    selected: true
                                }).index(), false)
                                .set('pago', (editor.get('valor')))
                                .submit();
                        }
                    },

                ]);

                table.buttons().container()
                    .appendTo($('.col-sm-6:eq(0)', table.table().container()));
                $('input[type="search"]').on("input", function() {
                    $(this).val($(this).val().normalize("NFD").replace(/[\u0300-\u036f]/g, ""));
                });
            },

            columns: [{
                    "data": "sn",
                    "visible": true,
                    "searchable": true
                },
                {
                    "data": "imei",
                    "visible": true,
                    "searchable": true
                },
                {
                    "data": "identificacao"
                },
                {
                    "data": "cor"
                },
                {
                    "data": "codigo"
                },
            ],
            "order": [
                [2, "desc"]
            ],

            columnDefs: [{
                searchPanes: {
                    show: true
                },
                targets: [1, 2],
            }, ],
            searchPanes: {
                controls: false,
                columns: [1, 2],
                layout: 'columns-4',
                dtOpts: {
                    dom: 'pt',
                    paging: false,
                    searching: false,
                    viewTotal: true,
                    scrollY: '120px',
                }
            }


            $.fn.dataTable.moment('DD/MM/YYYY HH:mm');

            editor.on('open', function(e, mode, action) {
                setTimeout(function() {
                    $('#DTE_Field_tipo').focus();
                }, 250);
                $('#DTE_Field_tipo').change(function() {
                    toggleFields();
                });
            });

kthorngren · March 2023

dom: 'BfrtipP', // <<<<<<<------- probematic

That dom setting works in this test case:
https://live.datatables.net/dominemi/1/edit

You also have this inside `-option initComplete:

                table.buttons().container()
                    .appendTo($('.col-sm-6:eq(0)', table.table().container()));

You probably should choose whether to use the dom option or direct insertion. Also the table variable might not be assigned in initComplete since Datatables is still initializing. If you want to use the direct insert method remove the B and use -this.api() to get the API instance, for example:

                this.api().buttons().container()
                    .appendTo($('.col-sm-6:eq(0)', table.table().container()));

If this doesn't help please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren · March 2023

Another option is to use the SearchPanes API initialization like this example and remove the P.

Kevin

joseoliveiraborlas · March 2023

@tangerine , if i write dom:... the buttons dessapear.

@kthorngren ,
Regarding the testcase, I never got to see any code being executed in the testcase. I've tried different browsers, OS, and the only thing I see is a table. It might even be a test case about buttons, I see absolutely nothing beyond the table. I've never been able to see any examples working. Either on Chrome, Edge, Firefox, Safari in Windows, Linux and MAC. Is it just me? o.O

The problem is: if i put "dom:" on the page, the buttons dont show up. just "dom:" and break it. If i dont put, i cant put SearchPanes.
new $.fn.dataTable.SearchPanes(table, {});
table.searchPanes.container().prependTo(table.table().container());
table.searchPanes.resizePanes();
dont work neither.

kthorngren · March 2023

Regarding the testcase, I never got to see any code being executed in the testcase. I've tried different browsers, OS, and the only thing I see is a table.

You might need to click the Run with JS button. Here is a screenshot of the test case:

The problem is: if i put "dom:" on the page, the buttons dont show up. just "dom:" and break it. If i dont put, i cant put SearchPanes.

Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

joseoliveiraborlas · March 2023

Maybe this helps?

kthorngren · March 2023

Take a look at the browser's console. You have two errors:

datatables.min.js:16 Uncaught ReferenceError: jQuery is not defined

Uncaught SyntaxError: missing ) after argument list

Please add jquery.js and fix the syntax error. Please make sure the test case replicates the problem you want fixed.

Kevin

joseoliveiraborlas · March 2023

Thats error it's only on "test case".
I make new one. https://live.datatables.net/yuzaruxu/1/edit

But as I've been saying, I never got to see the code running on this test codes.
i don't see buttons and anything i make, only a table. In all test cases i see in forum, its the same.

allan · March 2023

Here is your example running (minus an Ajax error since we don't have an includes/table.sells.php script on our server): https://live.datatables.net/yuzaruxu/2/edit .

Changes to make it run:

Load jQuery first
Load DataTables second
Change the id of the table to match the tbbl identifier used in your Javascript
Remove the HTML from the table
Make the number of columns match your Javascript definition.

It runs. But as I say it can't load data since we don't have your server-side code or database.

Allan

joseoliveiraborlas · March 2023

Thank you Allan,
Give now "Script error. (line 0)" on console. Do you know what this means?
And maybe for this i dont see any buttons or searchPanes?
https://live.datatables.net/yuzaruxu/4/edit

joseoliveiraborlas · March 2023

Can I share whit you the page in question? It as some private data, not important, but I will send you to message private, @allan, just for easy check.

kthorngren · March 2023

Open the browser's console, not the JS BIN console, to see the error you are getting:

Uncaught TypeError: Cannot read properties of undefined (reading 'sWidth')

You have more columns in the table header than in the table which is causing this error.

After fixing this you are now getting this error:

jquery-3.4.1.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading '_buttons')

I moved your buttons init code outside of initComplete.

There are three other issues.

First you have this:

                new $.fn.dataTable.Buttons( table, [
                    { extend: "create", editor: editor, className: 'btn-group btn btn-primary', text: 'add', key: 'a' },

You need to pass the full buttons object, like this:

                new $.fn.dataTable.Buttons( table, {
                  buttons: [
                    { extend: "create", editor: editor, className: 'btn-group btn btn-primary', text: 'add', key: 'a' },

Second, don't use the B if you are using the new constructor. Just use dom: 'frtipP',.

Third is you have this to display the buttons:


                this.api().buttons().container()
    .appendTo($('.col-sm-6:eq(0)', table.table().container()));

The class col-sm-6 is a bootstrap class but you aren't loading bootstrap. The .col-sm-6 selector is never found so the buttons aren't displayed. Use this instead:

    table.buttons().container().prependTo(
        table.table().container()
    );

Updated example:
https://live.datatables.net/fulaquwu/1/edit

Kevin

joseoliveiraborlas · March 2023

Hi Kevin, thank you for you help.
I edited your soluction, but dont work on my side.
I will send you the page via private message in question, if you can see if i forget something, can you?
And yes, i'm using Bootstrap.

joseoliveiraborlas · March 2023

About the trial of Editor, you know if i can get more time? Or I need create another acccount?

allan · March 2023

About the trial of Editor, you know if i can get more time?

Looks like you've got almost a week left. But yes, at the end of the trial you'll get an e-mail from me, and if you'd like a little extra time, then just reply back to that e-mail with the extension request.

Also, yes PM me a link to the page if you are still having problems.

Allan

allan · March 2023

Actually I see you've sent me a link to a page, but it is currently returning empty (i.e. 0 bytes of data).

joseoliveiraborlas · March 2023

Sorry, i wa trying some "soluctions" code from forum... try again please.

kthorngren · March 2023

I looked at your test case and it looks like since you are using the dom option like dom: 'frtipP', that the Bootstrap grid classes, .col-sm-6 for example, aren't added to the DOM. Which means the selector for this won't work:

    table.buttons().container()
    .prependTo($('.col-sm-6:eq(0)', table.table().container()));

I tried this from the console of your page and it does work:

table.buttons().container().prependTo(
    table.table().container()
);

However if you want to make it more Bootstrap like then configure the dom option based on the BS3 styling example to add those classes. Look at this exmaple to make the selector more specific to the table.

Kevin

joseoliveiraborlas · March 2023

Hey Kevin,
I try add that code in the page and does not nothing:
table.buttons().container().prependTo(
table.table().container()
);

kthorngren · March 2023

Its because you added the B to the dom:

dom: "B<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>P",

Remove the B. Since you are using the Bootstrap form of the dom option use this:

    table.buttons().container()
        .appendTo( '#tbbl_wrapper .col-sm-6:eq(0)' );

Kevin

joseoliveiraborlas · March 2023

Already try that. I edit the page for your see.

kthorngren · March 2023

Since you are using ajax to load the data, which is an asynchronous process and table variable is likely not ready to use when table.buttons().container() executes, you probably will need to move the code into `-option initComplete, like this:

``js
this.api().buttons().container()
.appendTo( '#tbbl_wrapper .col-sm-6:eq(0)' );
```

Once everything is loaded I can use the console to show the buttons with the above statement.

Kevin

joseoliveiraborlas · March 2023

I already changed it, it didn't help.

kthorngren · March 2023

initComplete goes inside the Datatables config not the new buttons constructor, like this:

    { "data": "alvo" },
    { "data": "ftfdg" },    
    { "data": "infooo" },
    ],

     "initComplete": function(settings, json) {
    this.api().buttons().container()
.appendTo( '#tbbl_wrapper .col-sm-6:eq(0)' );
  },
    } );

     new $.fn.dataTable.Buttons( table, {
                  buttons: [
                    { extend: "create", editor: editor, className: 'btn-group btn btn-primary', text: 'add', key: 'a' },
                    { extend: "edit",   editor: editor, className: 'btn-group btn btn-warning', text: 'edit', key: 'e' },
                    { extend: "remove", editor: editor, className: 'btn-group btn btn-danger', text: 'del' , key: 'x' },
                    {
                        extend: "selectedSingle",
                        text: 'Concluir',
                        className: 'btn btn-primary',
                        key: 'c',
                        action: function ( e, dt, node, config ) {
                            editor
                                .edit( table.row( { selected: true } ).index(), false )
                                .set( 'estado', ('Concluído' ))
                                .submit();
                        }
                    },
                    {
                        extend: "selectedSingle",
                        text: ' Pagar',
                        className: 'btn btn-success',
                        key: 'p',
                        action: function ( e, dt, node, config ) {
                            editor
                                .edit( table.row( { selected: true } ).index(), false )
                                .set( 'pago', (editor.get( 'valor' )) )
                                .submit();
                        }
                    },          

     ],

     } );

Kevin

joseoliveiraborlas · March 2023

Thanks! Solved the problem!

Can I take the opportunity to question here in this topic, how to put Select2 to auto-complete in the inputs of the editor? Or is better create a new one?
Basically intended when I was writing something on editing o adding new entry, it appears results that are already in that column. It's possible?

kthorngren · March 2023

Its generally best to create a new thread for new questions. This way when others search the forum the topics are separated. Have you looked at the Select 2 field type plugin?

Kevin

joseoliveiraborlas · March 2023

Yes, I'm read a lot from forum. I try a lot options based the questions of community. I will create a new one, thank you, again.

When using dom: the buttons disappear

When using dom: the buttons disappear

Answers

Howdy, Stranger!

Categories

DataTables

When using dom: the buttons disappear

When using dom: the buttons disappear

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables