Add editor to an already existing DataTable in a PHP file

alfasino9

Hello,

I'm feeling like an idiot.

I don't think is so difficult add the Editor (buttons, and the capability of add,edit,remove rows.) in an existing DataTable i have in a PHP file.

I have downloaded the Generator with my needs (the tables,etc..) and i have upload it to my server.

When i go to the example.html file, looks horrible with no style, but it works.

When i add the javascript files to my php file, i don't see any of the Editor functions.

This is a screenshot of what i have now -> https://imgur.com/a/vQWBe

As you can see, the DataTable works good, i can search, and use the buttons and all that.

But i don't see any button, or nothing of the Editor DataTables.

That's my code:

http://www.codesend.com/view/2db017144498a118488b1792b92d19e6/ (password: datatables)

If somebody can help me, really appreciate it.

Best regards

allan

It looks like all you are doing is initialising the default DataTable settings:

                    $(document).ready(function() {
                        $('#productos').DataTable();
                    } );

If you want Buttons and Editor, you'd need to add those options. Generator will generate the Javascript required for that if you click the "Javascript" button at the bottom of the inputs.

Allan

alfasino9

Hello Allan,

Thanks for your reply!

Yes, but normally in the call to the /js/table.productos.js (was generated by the Generator) i have think it will be good.

That's the content of table.productos.js

var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.productos.php',
        table: '#productos',
        fields: [
            {
                "label": "nombre:",
                "name": "nombre"
            },
            {
                "label": "nombreFabricante:",
                "name": "nombrefabricante"
            },
            {
                "label": "source_id:",
                "name": "source_id"
            },
            {
                "label": "url:",
                "name": "url"
            }
        ]
    } );

    var table = $('#productos').DataTable( {
        ajax: 'php/table.productos.php',
        columns: [
            {
                "data": "nombre"
            },
            {
                "data": "nombrefabricante"
            },
            {
                "data": "source_id"
            },
            {
                "data": "precio"
            },
            {
                "data": "precioComp1"
            },
            {
                "data": "precioComp2"
            },
            {
                "data": "precioComp3"
            },
            {
                "data": "url"
            }
        ],
        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));

So , what i have to add to the

$(document).ready(function() {
    $('#productos').DataTable();
} );

For i can have the edit buttons? Let me know please,

Best regards

allan

Basically all of it! The first part defines the Editor instance. The second part the DataTable. And then finally it added the buttons.

Allan

alfasino9

Hello Allan,

Haha okay, so, to clarify, i add to the

$(document).ready(function() { $('#productos').DataTable(); } );

all the table.productos.js ?

So it will be look something like:

`$(document).ready(function() {
$('#productos').DataTable(
var editor = new $.fn.dataTable.Editor( {
ajax: 'php/table.productos.php',
table: '#productos',
fields: [
{
"label": "nombre:",
"name": "nombre"
},
{
"label": "nombreFabricante:",
"name": "nombrefabricante"
},
{
"label": "source_id:",
"name": "source_id"
},
{
"label": "url:",
"name": "url"
}
]
} );

var table = $('#productos').DataTable( {
    ajax: 'php/table.productos.php',
    columns: [
        {
            "data": "nombre"
        },
        {
            "data": "nombrefabricante"
        },
        {
            "data": "source_id"
        },
        {
            "data": "precio"
        },
        {
            "data": "precioComp1"
        },
        {
            "data": "precioComp2"
        },
        {
            "data": "precioComp3"
        },
        {
            "data": "url"
        }
    ],
    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));
} );`

Please let me know, i need that working

Thank you for your help, really appreciate it.

allan

i add to the [...] all the table.productos.js ?

No.

Drop the $('#productos').DataTable(); code. That is just initialising DataTables with the default settings. As you said you want Editor and Buttons - so you'd need to use the code that activates that.

Allan

alfasino9

Hello Allan,

i really don't understand how to add the editor to my already exisiting DataTable...

I have already tried:

`<script>
$(document).ready(function(){
editor = new $.fn.dataTable.Editor( {
//ajax: "php/table.productos.php",
table: "#productos",
fields: [ {
label: "Nombre:",
name: "nombre"
}, {
label: "URL:",
name: "url"
}, {
label: "Source ID:",
name: "source_id"
}
]
} );

$('#productos').DataTable( {
    dom: "Bfrtip",
    serverSide: true,
    //ajax: "php/table.productos.php",
    columns: [
        { data: "nombre"},
        { data: "nombreFabricante" },
        { data: "precio" },
        { data: "precioComp1" },
        { data: "precioComp2" },
        { data: "precioComp3" },
        { data: "url" },
        { data: "source_id" }
    ],
    select: true,
    buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ]
} );

} );
</script>`

That's the same as explain here -> https://editor.datatables.net/manual/getting-started

Or the example -> https://editor.datatables.net/examples/simple/simple.html

(The "nombre", "nombreFabricante" , etc... are my MySQL Database columns, is that good?)

But it keeps not working!!

Please, if you can add me the working code i have to add to my table.php (it's where i have my DataTables working) so i can have the Editor and the Buttons working on my DataTables so i can edit my MySQL data.

Let me know please, and really sorry for bothering you, i'm pretty sure is very easy and i'm missing something really n00b.

Best regards

allan

Can you send me a link to your page showing your current code please?

Allan

alfasino9

Hello Allan,

Good morning, yes sure, here you have it:

My DataTable (without editor) working -> http://comparador.masqueunaweb.com/buscador3.php

The DataTable with the editor code , and not working nothing -> http://comparador.masqueunaweb.com/buscador2.php

Best regards!

kthorngren

It looks like in your first (working) example you are duplicating the loading of the JS files and the Datatables init code. Once at the top and once at the bottom of the page.

In the second example you have the editor code commented out using <!--. In the top portion of the code you have 3 $(document).ready(function() functions. Try commenting the first 2 and removing the comments around the 3rd.

Kevin

alfasino9

Hello @kthorngren , i have do what you say but didn't work

1- i have deleted the 2 first $(document).ready(function() and only left the 3rd.

Also, i have deleted the loading of the JS Files in the bottom (were commented, but just in case)

Let me know!

And thank you for your help

kthorngren

In the browser's console I see this error:

datatables.min.js:108 Uncaught TypeError: Cannot read property 'mData' of undefined

In Datatables you defined 8 columns:

        columns: [
            { data: "nombre"},
            { data: "nombreFabricante" },
            { data: "precio" },
            { data: "precioComp1" },
            { data: "precioComp2" },
            { data: "precioComp3" },
            { data: "url" },
            { data: "source_id" }
        ],

But in your table you have 9 columns:

<th> ID </th>
<th> Nombre </th>
<th> Marca </th>
<th> Precio </th>
<th> Precio Comp1</th>
<th> Precio Comp2</th>
<th> Precio Comp3</th>
<th> URL </th>
<th> SourceID </th>

The two need to match. Once you resolve your JS errors then it looks like the editor should load.

Kevin

alfasino9

Wow!! It's almost done... I see the buttons!! You are my hero @kthorngren

But i still have an error:

DataTables warning: table id=productos - Ajax error. For more information about this error, please see http://datatables.net/tn/7

I think is something about the table.productos.php ?

This is the code of that file:

`<?php

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

// DataTables PHP library and database connection
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'productos', 'id' )
->fields(
Field::inst( 'id' ),
Field::inst( 'nombre' ),
Field::inst( 'nombrefabricante' ),
Field::inst( 'precio' )
->set( false ),
Field::inst( 'precioComp1' )
->set( false ),
Field::inst( 'precioComp2' )
->set( false ),
Field::inst( 'precioComp3' )
->set( false ),
Field::inst( 'url' )
->validator( 'Validate::notEmpty' )
->validator( 'Validate::url' ),
Field::inst( 'source_id' )
->validator( 'Validate::notEmpty' ),
)
->process( $_POST )
->json();
`

Thanks and best regards

kthorngren

In the browser's console you are getting 500 (Internal Server Error) from the server. I'm not familiar with PHP but it looks like the script is expecting an HTTP POST request (->process( $_POST )) but Datatables is sending an HTTP GET request.

Looks like you need to change you ajax config to send a post like this example. Something like this:

       "ajax": {
            "url": "php/table.productos.php",
            "type": "POST"
        },

Kevin

alfasino9

Working now!! You ROCKS!

Best regards and really appreciate your help!