Editor not working-HTML table not filling fron Json

cchintall83 · February 2022

Link to test case: html and server side php attached
Debugger code (debug.datatables.net):
Error messages shown: No errors shown.
Description of problem: The HTML not filling with Json file as generated by staff.php. Only the table's html th header is generated; nothing else.

colin · February 2022

It's probably getting an error on the server. Are you seeing any errors in the browser's console? Also, if you run staff.php on the server, what output are you seeing? You should get the data that would be sent to the browser.

Colin

cchintall83 · February 2022

Hi Colin,
Thanks for the response. A Json file is generated in the browser by the running the file "staff.php". Running the html file only yields the header row of the expected table; no data from the Json file is filled into the html table on the browser.

colin · February 2022

Can you post the output to staff.php, please. It's likely to be a mismatch between the output and the DataTables config,

Colin

cchintall83 · February 2022

Hi Colin,
Here is a portion of the staff.php output:
{"data":[{"DT_RowId":"row_1","idtrainingcourse_personnel":"39","FName":"Christina","LName":"Roberts","idPersonnel":"452","coursetitle":"General Safety Clause","Course_Date":"2022-01-26","idtrainingcourses":"11"},{"DT_RowId":"row_2","idtrainingcourse_personnel":"1","FName":"Melvin","LName":"Toss","idPersonnel":"311","coursetitle":"Small Generator Requirements","Course_Date":"2021-12-08","idtrainingcourses":"10"},{"DT_RowId":"row_3","idtrainingcourse_personnel":"2","FName":"Halley-12","LName":"Berry","idPersonnel":"332","coursetitle":"General Safety Clause","Course_Date":"2021-12-11","idtrainingcourses":"11"},{"DT_RowId":"row_4","idtrainingcourse_personnel":"3","FName":"Marilyn","LName":"Foster","idPersonnel":"297","coursetitle":"Lockot\/Tagout Program","Course_Date":"2021-12-09","idtrainingcourses":"8"},{"DT_RowId":"row_5","idtrainingcourse_personnel":"4","FName":"Marilyn","LName":"Foster","idPersonnel":"297","coursetitle":"Hazardous Waste","Course_Date":"2021-12-29","idtrainingcourses":"13"},{"DT_RowId":"row_6","idtrainingcourse_personnel":"5","FName":"Halley","LName":"Berry","idPersonnel":"332","coursetitle":"OSHA Recordkeeping","Course_Date":"2022-01-05","idtrainingcourses":"14"},{"DT_RowId":"row_7","idtrainingcourse_personnel":"6","FName":"Carol","LName":"Chintall","idPersonnel":"293","coursetitle":"Respiratory Protection","Course_Date":"2021-12-29","idtrainingcourses":"6"},{"DT_RowId":"row_8","idtrainingcourse_personnel":"7","FName":"Albert","LName":"Sunner","idPersonnel":"23","coursetitle":"Emergency Action Plans","Course_Date":"2021-12-11","idtrainingcourses":"18"},{"DT_RowId":"row_9","idtrainingcourse_personnel":"8","FName":"Albert","LName":"Sunner","idPersonnel":"23","coursetitle":"Respiratory Protection","Course_Date":"2021-04-06","idtrainingcourses":"6"},{"DT_RowId":"row_10","idtrainingcourse_personnel":"9","FName":"Daniel","LName":"Hoffsteader","idPersonnel":"24","coursetitle":"Hazardous Waste","Course_Date":"2021-01-25","idtrainingcourses":"9"},{"DT_RowId":"row_11","idtrainingcourse_personnel":"10","FName":"Daniel","LName":"Hoffsteader","idPersonnel":"24","coursetitle":"General Safety Clause","Course_Date":"2021-06-23","idtrainingcourses":"11"},{"DT_RowId":"row_12","idtrainingcourse_personnel":"11","FName":"Daniel","LName":"Hoffsteader","idPersonnel":"24","coursetitle":"General Safety Clause","Course_Date":"2020-03-19","idtrainingcourses":"11"},

colin · February 2022

It looks like the problem is because you've enabled serverSide, that changes the message format expected from the server. If you're likely to have less that 10k records, it's unlikely you'll need that option. Just for testing, try removing it and see if the data loads,

Colin

cchintall83 · February 2022

Hi,
I removed "processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php"
one line at a time then ran it. And then all of these simultaneously. No change results. The browser only has the headers (th), no row are filling in.

kthorngren · February 2022

This is your table:

<table id="table1" class="display" width="70%" >

You are using this selector to initialize Datatables:

$('employee_training_summary_a').DataTable( {

employee_training_summary_a won't match anything. Use the table id instead, like this:

$('#table1').DataTable( {

You will need to do the same with your Editor config:

"table": "employee_training_summary_a",

Kevin

cchintall83 · February 2022

Hi Kevin,
The javascript lines were changed to:

        var table = $('table1').DataTable( {
            "table": "table1",


The filled table was not the result; only the headers of the HTML.
Here is the current javascript:

<script type="text/javascript" language="javascript" class="init">
   (function($) {
    $(document).ready(function() {
        var editor = new $.fn.dataTable.Editor( {
            "ajax": "staff.php",
            "table": "table1",
            "fields": [ {
                "label": "ID:",
                "name": "id"
            },{
                    "label": "TrainingCourse_Personnel ID:",
                    "name": "idtrainingcourse_personnel"
                },{
                    "label": "First name:",
                    "name": "FName"
                }, {
                    "label": "Last name:",
                    "name": "LName"
                }, {
                    "label": "Personnel ID:",
                    "name": "idPersonnel"
                }, {
                    "label": "Course Title:",
                    "name": "coursetitle"
                }, {
                    "label": "Course Date:",
                    "name": "Course_date"
                }, {
                    "label": "Training Courses ID:",
                    "name": "idtrainingcourses",

                }
            ]
        } );

        var table = $('table1').DataTable( {
            dom: "Bfrtip",
            ajax: {
                url: "staff.php",
                type: "POST"
            },
            serverSide: true,
            columns: [
                { data: "id"},
                { data: "idtrainingcourse_personnel" },

                { data: "FName" },
                { data: "LName" },
                { data: "idPersonnel" },
                { data: "coursetitle" },
                { data: "Course_date" },
                { data: "idtrainingcourses"}
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );
    } );

   }(jQuery));
</script>


Here is the HTML table setup:

    <table id="table1" class="display" width="70%" >
        <thead>
            <tr>
                <th>ID</th>
                <th>Trainng Course Personnel ID</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Personnel ID</th>
                <th>Course Titler</th>
                <th>Course Date</th>
                <th>Training Courses ID</th>
            </tr>
        </thead>

    </table>

Your help is greatly appreciated.
John

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

cchintall83 · February 2022

Here is just some of the entire output from staff.php:

colin · February 2022

I imagine you're seeing browser console errors with this. In your initialisation you've declared:

                { data: "id"},

but the data has;

"DT_RowId":"row_1"

so you'll need to match those two up if you want to show that column in the table. Likewise, the Editor config is also referring to id. I imagine though you wouldn't want to edit or display that column, so just drop them from the config.

Colin

cchintall83 · February 2022

Hi Colin,
You suggestions are greatly appreciated. I made a change to the javascript as shown below; table still only headers.

The Json file generated by staff.php has the following format:

{"data":[{"DT_RowId":"row_1","idtrainingcourse_personnel":"39","FName":"Christina","LName":"Roberts","idPersonnel":"452","coursetitle":"General Safety Clause","Course_Date":"2022-01-26","idtrainingcourses":"11"},
{"DT_RowId":"row_2","idtrainingcourse_personnel":"1","FName":"Melvin","LName":"Toss","idPersonnel":"311","coursetitle":"Small Generator Requirements","Course_Date":"2021-12-08","idtrainingcourses":"10"},

Are you suggesting to add "DT_RowId" as shown below:

        var table = $('table1').DataTable( {
            dom: "Bfrtip",
            ajax: {
                url: "staff.php",
                type: "POST"
            },
            serverSide: true,
            columns: [
  **          { data: "DT_RowId" },**

                { data: "idtrainingcourse_personnel" },

                { data: "FName" },
                { data: "LName" },
                { data: "idPersonnel" },
                { data: "coursetitle" },
                { data: "Course_date" },
                { data: "idtrainingcourses"}
            ],
            select: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit",   editor: editor },
                { extend: "remove", editor: editor }
            ]
        } );
    } );

   }(jQuery));

You also suggested to change the Editor config. Are you referring to the Editor-02172022-0.html?

cchintall83 · February 2022

Hi Colin,

I realize I am making a simple mistake to which I do not see this error. I really would like to use DataTables and Editor, however this system is not easily understood by me.
Thanks again for the help.
John

kthorngren · February 2022

var table = $('table1').DataTable( {

You need to use the # to define the selector as the id. It should look like this:

var table = $('#table1').DataTable( {

Kevin

cchintall83 · February 2022

Hi Kevin,

No change! Can you provide a basic example using DataTables with a html table using PHP.?
Thanks for your help!
John

colin · February 2022

Here's one. I think it would be easier if you link to your page though.

Also, our records should your Editor trial expired. Is the license you're using registered to another email address? Please can let us know so we can update our records and provide support.

Colin

cchintall83 · February 2022

Hi Colin,
I am currently using a trail subscription which started Feb 10th. I was hoping for an example without all the extra content; just as if it was a table on a specific web page.
I have several examples using the generator to build a table which work. These tables generated have a lot of files which are not used; why? Also, there are files used in the generated tables which the manual instructions do not include in the simple setup as indicated on the introductory installing and getting started pages.

I appreciate all the help provided but I cannot purchase a subscription until I know this really works for my MySQL tables.

Thanks!

allan · February 2022

Download one of the example packages does don't include all the extra code from our site. Or for an even more basic table use Generator which will create a plain HTML file for you along with the corresponding JS and PHP.

Allan

cchintall83 · February 2022

Hello Allan,

My trial has currently expired. I been attempting to use this system to produce html tables. When using the generator to produce a table with a MySQL table, many of the files downloaded are not used to generate the desired table. The example packages are considerably larger than when using the generator. Many of these files in the packages are not needed.

I really wanted apply the DataTables/Editor system to my HTML tables. Over the last few weeks many hours have been spent to learn how to use this system. I realize the issue I am having must be a mistake of mine but has not been resolved.

All your help has been appreciated. I am willing to continue to work on a solution if the trial subscriptions is renewed.

allan · February 2022

I've reset your trial again and you'll be able to use Generator to build a fresh package.

The example packages are considerably larger than when using the generator.

Correct - they include a full set of demos.

Many of these files in the packages are not needed.

They are for the demos. Not for specific use cases though, which is why I suggested Generator. If you have problems with Generator, please let me know what the issue is and give me a link to a page showing the issue.

Allan

cchintall83 · February 2022

Thank you! I will stay in contact with the results.

Editor not working-HTML table not filling fron Json

Editor not working-HTML table not filling fron Json

Answers

Howdy, Stranger!

Categories

DataTables

Editor not working-HTML table not filling fron Json

Editor not working-HTML table not filling fron Json

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables