Editor not working-HTML table not filling fron Json

Editor not working-HTML table not filling fron Json

cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    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.

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

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

    Colin

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    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"},

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0
    edited 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.

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0
    edited February 2022

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

    {"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"},{"DT_RowId":"row_13","idtrainingcourse_personnel":"12","FName":"Kewvin","LName":"Stuko","idPersonnel":"11","coursetitle":"Emergency & Fire Evacution Plan","Course_Date":"2022-01-12","idtrainingcourses":"74"},{"DT_RowId":"row_14","idtrainingcourse_personnel":"13","FName":"Daniel","LName":"Hoffsteader","idPersonnel":"24","coursetitle":"Emergency & Fire Evacution Plan","Course_Date":"2022-01-12","idtrainingcourses":"74"},{"DT_RowId":"row_15","idtrainingcourse_personnel":"14","FName":"Raymond","LName":"King","idPersonnel":"115","coursetitle":"OSHA Recordkeeping","Course_Date":"2021-12-29","idtrainingcourses":"14"},{"DT_RowId":"row_16","idtrainingcourse_personnel":"16","FName":"David","LName":"Williams","idPersonnel":"485","coursetitle":"Lockot\/Tagout Program","Course_Date":"-0001-11-30","idtrainingcourses":"8"},{"DT_RowId":"row_17","idtrainingcourse_personnel":"17","FName":"Melvin","LName":"Toss","idPersonnel":"311","coursetitle":"OSHA Recordkeeping","Course_Date":"2022-01-30","idtrainingcourses":"14"},{"DT_RowId":"row_18","idtrainingcourse_personnel":"18","FName":"Halley","LName":"Berry","idPersonnel":"332","coursetitle":"Hazardous Waste","Course_Date":"2022-01-11","idtrainingcourses":"13"},{"DT_RowId":"row_19","idtrainingcourse_personnel":"19","FName":"Melvin","LName":"Toss","idPersonnel":"311","coursetitle":"Small Generator Requirements","Course_Date":"2022-08-19","idtrainingcourses":"10"},{"DT_RowId":"row_20","idtrainingcourse_personnel":"20","FName":"Franklin","LName":"Hope","idPersonnel":"418","coursetitle":"Fire Extinguisher ","Course_Date":"2022-01-04","idtrainingcourses":"168"},{"DT_RowId":"row_21","idtrainingcourse_personnel":"21","FName":"Franklin","LName":"Hope","idPersonnel":"418","coursetitle":"Confined Space","Course_Date":"2022-01-25","idtrainingcourses":"21"},{"DT_RowId":"row_22","idtrainingcourse_personnel":"22","FName":"Franklin","LName":"Hope","idPersonnel":"418","coursetitle":"Hazardous Waste","Course_Date":"2022-02-02","idtrainingcourses":"9"},{"DT_RowId":"row_23","idtrainingcourse_personnel":"23","FName":"Raymond","LName":"King","idPersonnel":"115","coursetitle":"Hazardous Waste","Course_Date":"2022-02-02","idtrainingcourses":"9"},{"DT_RowId":"row_24","idtrainingcourse_personnel":"24","FName":"Bailey","LName":"Roberts","idPersonnel":"331","coursetitle":"General Safety Clause","Course_Date":"2021-12-09","idtrainingcourses":"11"},{"DT_RowId":"row_25","idtrainingcourse_personnel":"25","FName":"Lilly","LName":"Roberts","idPersonnel":"325","coursetitle":"General Safety Clause","Course_Date":"2021-12-09","idtrainingcourses":"11"},{"DT_RowId":"row_26","idtrainingcourse_personnel":"26","FName":"Kewvin","LName":"Stuko","idPersonnel":"11","coursetitle":"General Safety Clause","Course_Date":"2021-12-09","idtrainingcourses":"11"},{"DT_RowId":"row_27","idtrainingcourse_personnel":"27","FName":"Carol","LName":"Chintall","idPersonnel":"293","coursetitle":"Radiation Safety Program","Course_Date":"2022-01-19","idtrainingcourses":"73"},{"DT_RowId":"row_28","idtrainingcourse_personnel":"28","FName":"Lenard","LName":"Skye","idPersonnel":"414","coursetitle":"WFI Plant","Course_Date":"2022-01-27","idtrainingcourses":"22"},{"DT_RowId":"row_29","idtrainingcourse_personnel":"29","FName":"Lenard","LName":"Skye","idPersonnel":"414","coursetitle":"Lockot\/Tagout Program","Course_Date":"2022-01-28","idtrainingcourses":"8"},{"DT_RowId":"row_30","idtrainingcourse_personnel":"30","FName":"Carol","LName":"Chintall","idPersonnel":"293","coursetitle":"Lockot\/Tagout Program","Course_Date":"2022-01-25","idtrainingcourses":"8"},{"DT_RowId":"row_31","idtrainingcourse_personnel":"31","FName":"Herb","LName":"Herbert","idPersonnel":"390","coursetitle":"Emergency Action Plans","Course_Date":"2022-01-18","idtrainingcourses":"18"},{"DT_RowId":"row_32","idtrainingcourse_personnel":"32","FName":"Carol","LName":"Chintall","idPersonnel":"293","coursetitle":"BloodBorne Pathogens","Course_Date":"2022-01-26","idtrainingcourses":"7"},{"DT_RowId":"row_33","idtrainingcourse_personnel":"33","FName":"Halley","LName":"Berry","idPersonnel":"332","coursetitle":"OSHA Lockout","Course_Date":"2022-01-27","idtrainingcourses":"76"},{"DT_RowId":"row_34","idtrainingcourse_personnel":"34","FName":"Marilyn","LName":"Foster","idPersonnel":"297","coursetitle":"OSHA Lockout","Course_Date":"2022-02-02","idtrainingcourses":"76"},{"DT_RowId":"row_35","idtrainingcourse_personnel":"35","FName":"Marilyn","LName":"Foster","idPersonnel":"297","coursetitle":"Fire Extinguisher ","Course_Date":"2022-02-09","idtrainingcourses":"168"},{"DT_RowId":"row_36","idtrainingcourse_personnel":"36","FName":"Marilyn","LName":"Foster","idPersonnel":"297","coursetitle":"WFI Plant","Course_Date":"2022-02-16","idtrainingcourses":"22"},{"DT_RowId":"row_37","idtrainingcourse_personnel":"37","FName":"Christina","LName":"Roberts","idPersonnel":"452","coursetitle":"Fire Extinguisher ","Course_Date":"2022-01-19","idtrainingcourses":"168"},{"DT_RowId":"row_38","idtrainingcourse_personnel":"38","FName":"Christina","LName":"Roberts","idPersonnel":"452","coursetitle":"Respiratory Protection","Course_Date":"2022-01-20","idtrainingcourses":"6"},{"DT_RowId":"row_40","idtrainingcourse_personnel":"40","FName":"Christina","LName":"Roberts","idPersonnel":"452","coursetitle":"Hazardous Waste","Course_Date":"2022-03-21","idtrainingcourses":"9"},{"DT_RowId":"row_41","idtrainingcourse_personnel":"41","FName":"Lenard","LName":"Skye","idPersonnel":"414","coursetitle":"OSHA Recordkeeping","Course_Date":"2022-01-25","idtrainingcourses":"12"},{"DT_RowId":"row_42","idtrainingcourse_personnel":"41","FName":"Lenard","LName":"Skye","idPersonnel":"414","coursetitle":"OSHA Recordkeeping","Course_Date":"2022-01-25","idtrainingcourses":"12"},{"DT_RowId":"row_43","idtrainingcourse_personnel":"41","FName":"Lenard","LName":"Skye","idPersonnel":"414","coursetitle":"OSHA Recordkeeping","Course_Date":"2022-01-25","idtrainingcourses":"12"},{"DT_RowId":"row_44","idtrainingcourse_personnel":"42","FName":"Halley","LName":"Berry","idPersonnel":"332","coursetitle":"HAzcom","Course_Date":"2022-01-28","idtrainingcourses":"5"},{"DT_RowId":"row_45","idtrainingcourse_personnel":"43","FName":"Halley","LName":"Berry","idPersonnel":"332","coursetitle":"Respiratory Protection","Course_Date":"2022-03-02","idtrainingcourses":"6"},{"DT_RowId":"row_47","idtrainingcourse_personnel":"44","FName":"Halley","LName":"Berry","idPersonnel":"332","coursetitle":"Chemical Safety","Course_Date":"2022-02-01","idtrainingcourses":"16"},

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    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?

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    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

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    Hi Kevin,

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

  • colincolin Posts: 15,239Questions: 1Answers: 2,599

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    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!

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

    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.

  • allanallan Posts: 63,356Questions: 1Answers: 10,444 Site admin
    Answer ✓

    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

  • cchintall83cchintall83 Posts: 36Questions: 11Answers: 0

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

Sign In or Register to comment.