Editor Bundle - DOM Error

AdrianSmithUK

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?

kthorngren

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

AdrianSmithUK

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

allan

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

AdrianSmithUK

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));

kthorngren

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

AdrianSmithUK

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?

AdrianSmithUK

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;
}

kthorngren

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

AdrianSmithUK

Many thanks Kevin. You have been a great help.

Kind Regards,
Adrian