What files are needed for the server side processing web pade to work?

project2002

Hello,

I have created the index.html, config.php, table.details.js, staff.php, and test.details.php. The table.details.php does provide the entire records from the details table when opened in the web browser but the html form is not filled with this info. What am I doing incorrectly?
Thank you for your help..

John

:

allan

Hi John,

This is with Editor I presume and our Editor PHP libraries? Can you show me the Javascript and PHP that you are using please? Even better would be if you can give me a link to your page?

Thanks,
Allan

project2002

Hi Allan,

Attached are file requested since I am using my local server. Thank you for your help.
table.details.js

---

(function($){

    $(document).ready(function() {
        var editor = new $.fn.dataTable.Editor( {
            ajax: 'php/table.details.php',
            table: '#details',
            fields: [
                {
                    "label": "filename:",
                    "name": "filename"
                },
                {
                    "label": "Entry Name:",
                    "name": "details_entrydate".
                    "type": "date",
                    "format" = "ddd. D MMM YY"
                },
                {
                    "label": "Information:",
                    "name": "information"
                },
                {
                    "label": "notes:",
                    "name": "notes"
                },
                {
                    "label": "Upadet At:",
                    "name": "update_at"
                },
                {
                    "label": "date_of_birth:",
                    "name": "date_of_birth",
                    "type": "datetime",
                    "format": "ddd, D MMM YY"
                }
            ]
        } );
    
        var table = $('#details').DataTable( {
            dom: 'Bfrtip',
            ajax: {
                url: '../php/staff.php',
                type: "POST"
            }
            columns: [
                {
                    "data": "filename"
                },
                {
                    "data": "details_entrydate"
                },
                {
                    "data": "information"
                },
                {
                    "data": "notes"
                },
                {
                    "data": "updated_at"
                }
            ],
            select: true,
            // lengthChange: false,
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit',   editor: editor },
                { extend: 'remove', editor: editor }
            ]
        } );
    } );
    
    }(jQuery));

table.details.php

 <?php

/*
 * Editor server script for DB table details
 * 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,
    DataTables\Editor\ValidateOptions;

// The following statement can be removed after the first run (i.e. the database
// table has been created). It is a good idea to do this to help improve
// performance.
$db->sql( "CREATE TABLE IF NOT EXISTS `details` (
    `iddetailscol` int(10) NOT NULL auto_increment,
    `filename` varchar(255),
    `details_entrydate` date,
    `information` varchar(255),
    `notes` varchar(255),
    `fkmaster_id` numeric(9,2),
    `updated_at` datetime,
    PRIMARY KEY( `iddetailscol` )
);" );

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'details','iddetailscol')
    ->fields(
        // Fiels::inst('iddetailscol'),
        Field::inst( 'filename' ),
        Field::inst( 'details_entrydate' )
            ->validator( Validate::dateFormat( 'D, j M y' ) )
            ->getFormatter( Format::dateSqlToFormat( 'D, j M y' ) )
            ->setFormatter( Format::dateFormatToSql( 'D, j M y' ) ),
        Field::inst( 'information' ),
        Field::inst( 'notes' ),
        Field::inst( 'fkmaster_id' ),
        Field::inst( 'updated_at' )
            ->validator( Validate::dateFormat( 'Y-m-d H:i:s' ) )
            ->getFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) )
            ->setFormatter( Format::datetime( 'Y-m-d H:i:s', 'Y-m-d H:i:s' ) )
    )
    ->process( $_POST )
    ->json();

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Your Editor and DataTables Ajax urls point at different scripts. Is that intentional? Normally you'd point them both to the same - in this case table.details.php.

Allan

project2002

Hi Allan or anyone with an answer to my issues,

To be clearly upfront, I am quite confused. Do I need to become a javascript/jquery expert? What files need are needed for the details MySQL table to create a table with edit and deletion capabilities? Here is my current guess:
1. index.html -- contains the html table structure along with the requested js and datatable links to scripts. Should the actual js lines of script be included in this html?
2. Or should the js lines of code be in another separate file? Such as table.details.js
3. config.php filed with all the localhost and MySQl login info.
4. table.details.php does produce a JSON file but this file is not converted into a html table . What am I misunderstanding?

The generated tables using editor work but difficult to use css to style. Plus the generated table using editor are not the same as explained for a developer to build from scratch.

I really want for this system to work for me. Thanks again for any additional help!
John

project2002

Hello Allan,

Since I have seen your most recent post concerning help, attached are the only the files I have changed to the rest of the editor files. Of course, excluding the config.php file.
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" char="utf-8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" char="utf-8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" char="utf-8" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" char="utf-8" src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>
    <script type="text/javascript" char="utf-8" src="../../extensions/Editor/js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="php/table.details.js"></script>


    <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">
    <link type="text/css"  rel="stylesheet" href="../../extensions/Editor/css/editor.dataTables.min.css">

    <title>Details</title>
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>File Name</th>
                <th>Entry Date</th>
                <th>Information</th>
                <th>Notes</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
            <th>File Name</th>
            <th>Entry Date</th>
            <th>Information</th>
            <th>Notes</th>

            </tr>
        </tfoot>
    </table>

</body>
</html>

table.detals.js

var editor;
    $(document).ready(function() {
        var editor = new $.fn.dataTable.Editor( {
            ajax: '../php/staff.php',
            table: '#details',
            fields: [
                {
                    "label": "filename:",
                    "name": "filename"
                },
                {
                    "label": "Entry Name:",
                    "name": "details_entrydate".
                    "type": "date",
                    "format" = "ddd. D MMM YY"
                },
                {
                    "label": "Information:",
                    "name": "information"
                },
                {
                    "label": "notes:",
                    "name": "notes"
                },
                {
                    "label": "Upadet At:",
                    "name": "update_at"
                },
                {
                    "label": "date_of_birth:",
                    "name": "date_of_birth",
                    "type": "datetime",
                    "format": "ddd, D MMM YY"
                }
            ]
        } );
    
        var table = $('#details').DataTable( {
            dom: 'Bfrtip',
            ajax: {
                url: '../php/staff.php',
                type: "POST"
            }
            columns: [
                {
                    "data": "filename"
                },
                {
                    "data": "details_entrydate"
                },
                {
                    "data": "information"
                },
                {
                    "data": "notes"
                },
                {
                    "data": "updated_at"
                }
            ],
            select: true,
            // lengthChange: false,
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit',   editor: editor },
                { extend: 'remove', editor: editor }
            ]
        } );
    } );
    
    }(jQuery));

table.details.php

<?php

/*
 * Editor server script for DB table users
 * 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,
    DataTables\Editor\ValidateOptions;

// The following statement can be removed after the first run (i.e. the database
// table has been created). It is a good idea to do this to help improve
// performance.
$db->sql( "CREATE TABLE IF NOT EXISTS `details` (
    `iddetailscol` int(4) NOT NULL auto_increment,
    `filename` varchar(255),
    `details_entrydate` datetime(6),
    `information` varchar(255),
    `notes` varchar(255),
    PRIMARY KEY( `iddetailscol` )
    
);" );

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'details', 'iddetailscol' )
    ->fields(
        Field::inst( 'filename' ),
        Field::inst( 'details_entrydate' ),
        Field::inst( 'information' ),
        Field::inst( 'notes' )
    )
    ->process( $_POST )
    ->json();

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

You need to change the staff.php reference for both your DataTables and Editor initialisations to reference table.details.php since that is the file that you have created for the job.

That will file both send data for the table and also receive it for Editor. The Editor libraries that you've used there will do that for you.

No you don't need to be an expert by any means, but you will need to feel comfortable with the code - it isn't a zero code solution.

If you do want a zero code option, have a look at out CloudTables product, which is basically DataTables + Editor with a nice configuration UI on top of it .

Allan