Editor Bundle - DOM Error

Editor Bundle - DOM Error

AdrianSmithUKAdrianSmithUK Posts: 18Questions: 7Answers: 0
edited March 2021 in DataTables

I've downloaded a standard Editor bundle from the generator.

When I set the DOM value to:

dom: 'Bti'

I get the following error message:

"datatables.min.js:14 Uncaught Unknown button type: print"

dom: 'ti' - works fine.

I'm surprised because I don't have a print button. Just the standard New, Edit, Delete buttons.

I included the file:

//cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js

But this didn't fix it.

Can anybody help?

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Print is the default button if you don't supply the buttons you want using buttons. HAve you defined your Editor buttons like this example?

    Kevin

  • AdrianSmithUKAdrianSmithUK Posts: 18Questions: 7Answers: 0

    Hi Kevin,

    I just downloaded the standard bundle that came out of the DT Editor Generator.

    I modified the buttons object so it looks like this:

        buttons: [
            { extend: "edit",   editor: editor }
        ]
    

    ... and it works fine as long as I don't try to customise the DOM.

    As soon as I add:

    dom: 'B'

    I get the error message:

    "datatables.min.js:14 Uncaught Unknown button type: print"

    Many thanks,
    Adrian

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    Hi Adrian,

    Could you show me the full JS that is causing the error please? It sounds like you might not have a buttons option in the DataTable initialisation (although you note that you modify the one created by Generator, so I’m not sure).

    If you don’t have a buttons option, then the default will be used which is to show the copy, excel, CSV and print buttons (hence the error you are seeing if you aren’t loading the print file).

    Allan

  • AdrianSmithUKAdrianSmithUK Posts: 18Questions: 7Answers: 0

    Hi Allan,

    Apologies for dumping it here. I'm working on XAMPP.

    /*
    * Editor client script for DB table leads
    * Created by http://editor.datatables.net/generator
    */

    // Moved by AS
    var table;
    var editor;

    (function ($) {

    $(document).ready(function () {
    
    
        editor = new $.fn.dataTable.Editor({
            ajax: 'php/table.leads.php',
            table: '#leads',
            fields: [{
                    "label": "Name:",
                    "name": "name"
                },
                {
                    "label": "Type:",
                    "name": "type",
                    type: "select",
                    options: [{
                            label: "TBD",
                            value: "TBD"
                        },
                        {
                            label: "Care Enquiry",
                            value: "Care Enquiry"
                        },
                        {
                            label: "General Enquiry",
                            value: "General Enquiry"
                        },
                        {
                            label: "Job Enquiry",
                            value: "Job Enquiry"
                        },
                        {
                            label: "Missed Call",
                            value: "Missed Call"
                        },
                        {
                            label: "Bounce",
                            value: "Bounce"
                        },
                        {
                            label: "Review",
                            value: "Review"
                        },
                        {
                            label: "Test Call",
                            value: "Test Call"
                        }
                    ]
                },
                {
                    "label": "Status:",
                    "name": "status",
                    type: "select",
                    options: [{
                            label: "TBD",
                            value: "TBD"
                        },
                        {
                            label: "NA",
                            value: "NA"
                        },
                        {
                            label: "Follow-up",
                            value: "Follow-up"
                        },
                        {
                            label: "Admitted",
                            value: "Admitted"
                        },
                        {
                            label: "Moved elsewhere",
                            value: "Moved elsewhere"
                        },
                        {
                            label: "Closed",
                            value: "Closed"
                        }
                    ]
                },
                {
                    "label": "Notes:",
                    "type": "textarea",
                    "name": "notes"
                }
            ]
        });
    
        table = $('#leads').DataTable({
            ajax: 'php/table.leads.php',
            // dom: 'B', // Throws Error 
            order: [
                [3, "desc"]
            ],
            scrollY: ($(window).height() - 200),
            deferRender: true,
            scroller: true,
            columns: [
                {
                    "data": "campaign"
                },
                {
                    "data": "type"
                },
                {
                    "data": "status"
                },
                {
                    "data": "datetime"
                },
                {
                    "data": "manager"
                },
                {
                    "data": "content"
                },
                {
                    "data": "name"
                },
                {
                    "data": "tel_from"
                },
                {
                    "data": "email_from"
                },
                {
                    "data": "call_duration"
                },
                {
                    "data": "call_recording"
                },
                {
                    "data": "notes"
                },
                {
                    "data": "msg"
                },
                {
                    "data": "source"
                },
                {
                    "data": "medium"
                },
                {
                    "data": "id"
                }
            ],
            select: true,
            lengthChange: false
        });
    
        new $.fn.dataTable.Buttons( table, [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ] );
    
        table.buttons().container()
            .appendTo($('.col-md-6:eq(0)', table.table().container()));
    });
    

    }(jQuery));

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited March 2021

    You are using the code in lines 150-158 to add the buttons. See this doc for more details. Since you are using this to add the buttons you don't need the B for the dom option.

    Why are you trying to use B with the dom option?

    Kevin

  • AdrianSmithUKAdrianSmithUK Posts: 18Questions: 7Answers: 0

    Hi Kevin,

    I just want an Edit button at the top and the info at the bottom.

    Therefore I need to edit the buttons object as follows:

    new $.fn.dataTable.Buttons( table, [
        { extend: "edit",   editor: editor }
    ] );
    

    If I then use:

    dom: 'Bti' // throws an error 
    

    Assuming that the buttons are being added by the function:

    dom: 'ti', // Still Throws Error 
    

    Can you suggest a solution?

  • AdrianSmithUKAdrianSmithUK Posts: 18Questions: 7Answers: 0

    I've found a hacky way to solve my problem. Instead of using the dom attribute I hide the search bar using CSS.

    #leads_filter {
        display: none;
    }
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    This code allows you to place the buttons where you want. Create a div and change the $('.col-md-6:eq(0)', table.table().container()) selector to find the div.

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

    Or remove that statement and use the B option in the dom.

    Kevin

  • AdrianSmithUKAdrianSmithUK Posts: 18Questions: 7Answers: 0

    Many thanks Kevin. You have been a great help.

    Kind Regards,
    Adrian

This discussion has been closed.