When using dom: the buttons disappear

When using dom: the buttons disappear

joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

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?

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Your dom definition needs to include B for buttons.

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3
    edited 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();
                    });
                });
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

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

    Kevin

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    @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. :(

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    Maybe this helps?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    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.

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    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:

    1. Load jQuery first
    2. Load DataTables second
    3. Change the id of the table to match the tbbl identifier used in your Javascript
    4. Remove the HTML from the table
    5. 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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited 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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    Hi Kevin, thank you for you help.
    I edited your soluction, but dont work on my side. :blush:
    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.

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

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

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

    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

  • allanallan Posts: 61,438Questions: 1Answers: 10,049 Site admin

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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited March 2023 Answer ✓

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited March 2023 Answer ✓

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    I already changed it, it didn't help.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    Answer ✓

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    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

  • joseoliveiraborlasjoseoliveiraborlas Posts: 80Questions: 8Answers: 3

    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.

Sign In or Register to comment.