Broken Layout when using datatables + editor plugin

User123456

I was implementing server side and datatables editor, howerever when I finally achieved and inserted the code in the correct page, the style broke, see the image below:

https://i.stack.imgur.com/kuBG4.png

What happened? Can't datables work with the editor plugin?

• This is fake data, just trying to provide a Minimal, Complete, and Verifiable example of what happened.

My code, from listPublication.php:

var editor;
        $(document).ready(function() {
            editor = new $.fn.dataTable.Editor({
                ajax: "lib/publicationProcessing.php",
                table: "#publicationTable",
                fields: [ {
                    label: "Publicação:",
                    name: "t.PublicationTitle"
                }, {
                    label: "Ano:",
                    name: "p.ano"
                }, {
                    label: "Competência:",
                    name: "p.competencia"
                }, {
                    label: "Empresa:",
                    name: "c.razaoSocial",
                }, {
                    label: "Empregado:",
                    name: "e.nome"
                }
                ]
            });

            $('#publicationTable').DataTable({
                dom: "Bfrtip",
                ajax: {
                    url: "lib/publicationProcessing.php",
                    type: 'POST'
                },
                serverSide: true,
                columns: [
                { data: "t.PublicationTitle" },
                { data: "p.ano" },
                { data: "p.competencia" },
                { data: "c.razaoSocial" },
                { data: "e.nome"},
                ],
            });
        });

And for publicationProcessing.php

<?php
include( "php/Datatables.php" );
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

Editor::inst( $db, 'tbl_publication AS p', 'id_Publication' )
    ->fields(
        Field::inst( 't.PublicationTitle' ),
        Field::inst( 'p.ano' ),
        Field::inst( 'p.competencia' ),
        Field::inst( 'c.razaoSocial' ),
        Field::inst( 'e.nome')
    )
    ->leftJoin( 'tbl_ptitle AS t', 'p.fk_titulo', '=', 't.id_PublicationTitle' )
    ->leftJoin( 'tbl_company AS c', 'p.fk_empresa', '=', 'c.id_Company' )
    ->leftJoin( 'tbl_employee AS e', 'p.fk_empregado', '=', 'e.id_Employee' )
    ->process($_POST)
    ->json();

allan

Its being caused by your dom property:

dom: "Bfrtip",

For Bootstrap styling with DataTables, I would suggest you insert the Buttons as shown in the Bootstrap example - and remove your dom option.

Allan

User123456

@allan,

I see that the editor doesn't have this special line:

https://i.stack.imgur.com/EzR8B.png

And here haves, with simple datatables server side processing:

https://i.stack.imgur.com/59vdt.png

How can I use just leftJoin() from the editor -I only need to use this method- with my css and everything else without breaking. And (I can't) have the Buttons.

tangerine

Have you done what Allan suggested?

allan

As I say, you need to remove the dom option. Then use the code I linked to above to insert the Buttons when using Bootstrap styling.

Allan