New Edit Delete Buttons

JesseGE · August 2019

hello,

so i am a little new to programming and very new to Datatables, i am creating an app that has multiple tables on one page.
i have run into a dead end on getting the "New, Edit and Delete" buttons to show up for each table.

If possible i would also like to have a "add new row" for some of the entries as some of the records will have more then one data set, again if at all possible.

i apologize for my new-ness to all of this, infact this is the first time i have ever asked a forum a coding question.

please excuse the messy code, like i said i am pretty new. any help is greatly appreciated.

    <!doctype html>
    <html class="no-js" lang="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link rel="manifest" href="site.webmanifest">
            <link rel="apple-touch-icon" href="icon.png">
            <!-- Place favicon.ico in the root directory -->
    
            <link rel="stylesheet" href="css/normalize.css">
            <link rel="stylesheet" href="css/main.css">
             <script src="js/vendor/modernizr-3.5.0.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
            <script src="js/plugins.js"></script>
            <script src="js/main.js"></script>
    
            <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
            <script>
                window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
                ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
            </script>
            <script src="https://www.google-analytics.com/analytics.js" async defer></script>
            <link rel="stylesheet" type="text/css" href="C:\Users\jesse\Downloads\DataTables\Buttons-1.5.6\css\buttons.bootstrap.css">
            <script type="text/javascript" src="C:\Users\jesse\Downloads\DataTables\Buttons-1.5.6\js\buttons.bootstrap.js"></script>

        </body>
        </head>
        <body>
            <!--[if lte IE 9]>
                <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
            <![endif]-->
    
            <!-- Add your site or application content here -->



    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
        <title>DataTables Editor - Cowpedia</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.Cowpedia.js"></script>





    </head>
    <body class="dataTables">
        <div class="container">

<script>
    $(document).ready(function() {
    $('table.display').DataTable();
} );</script>

<script>$('#mytable').DataTable( {
    ajax: '/api/staff',
    dom: 'Bfrtip',
    table: 'Cowpedia1'
    columns: [
        { data: 'first_name' },
        { data: 'last_name' },
        // etc
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
} );</script>
<script>$('#mytable').DataTable( {
    ajax: '/api/staff',
    dom: 'Bfrtip',
    table: 'Cowpedia2'
    columns: [
        { data: 'first_name' },
        { data: 'last_name' },
        // etc
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
} );</script>

<script>$('#mytable').DataTable( {
    ajax: '/api/staff',
    dom: 'Bfrtip',
    table: 'Cowpedia3'
    columns: [
        { data: 'first_name' },
        { data: 'last_name' },
        // etc
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
} );</script>

<br>
<br>
<br>            
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="Cowpedia1" width="100%">

                <thead>
                    <tr>
                        <th>Name/ID</th>
                        <th>Date</th>
                        <th>Sire</th>
                        <th>Dame</th>
                        <th>MGD</th>
                        <th>Birthdate</th>
                        <th>Born Organic</th>
                        <th>Breed</th>
                        <th>DHIA Tag</th>
                        <th>Notes</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
<!-----General Table---->
<br>
<br>


    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />


        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.Cowpedia.js"></script>

    </head>
    <body class="dataTables">
        <div class="container">

    <br>
    <br>
    <br>        
            
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="Cowpedia2" width="100%">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Breeding Record</th>
                        <th>Calving Record</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
<!--------Breeding Record Table----->
<br>
<br>



    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        
    

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">

        <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="js/table.Cowpedia.js"></script>
    </head>
    <body class="dataTables">
        <div class="container">

    <br>
    <br>
    <br>
            
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="Cowpedia3" width="100%">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Condition</th>
                        <th>Treatment</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

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

tangerine · August 2019

Hi Jess.
Couple of things to get you into better shape:
you should only have one <html>....</html> section on your page, not one for each
table;
your tables should each have a unique id - #table_1, #table_2.... for example.
You should fix these things before you go any further.

colin · August 2019

Hi @JesseGE ,

As @tangerine says, the HTML is a little messy. On top of that first comment, you've also got a <\body> tag right near the start, without a <body>, and absolute Windows pathnames to your scripts. It would be worth getting it as clean as you can, then run it through as HTML validator to see if it's happy. Also check your browser's console for errors (F12).

Cheers,

Colin

JesseGE · August 2019

thank you both, i will get this cleaned up. this is the kind of feedback i was hoping for as i am super new at this and need a ton of help, as you can see

JesseGE · August 2019

I cleaned up the code as best as my abilities will allow.

I read through the recommendations and I don't think i missed anything (if i did, don't be afraid to let me know.)

Here is the code:

<!doctype html>

<!-- all this info came with the html boiler tag -->
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="manifest" href="site.webmanifest">
        <link rel="apple-touch-icon" href="icon.png">


        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
         <script src="js/vendor/modernizr-3.5.0.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
        <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
        <script>
            window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
            ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
        </script>
        <script src="https://www.google-analytics.com/analytics.js" async defer></script>

        <!-- end of boiler html template  -->




        <!--------- first table links .------->


    <title>DataTables Editor - Cowpedia</title>

    <link rel="stylesheet" type="text/css" class="container" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
    <link rel="stylesheet" type="text/css" class="container" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" class="container" href="css/editor.dataTables.min.css">

    <script class="container" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
    <script  class="container" src="js/dataTables.editor.min.js"></script>
    <script  class="container" src="js/table.Cowpedia.js"></script>







    <!---------- end of first table links------->


    <!-----------Start of Second Table links------->

    <link rel="stylesheet" type="text/css" class="container2" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.css">
    <link rel="stylesheet" type="text/css" class="container2" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" class="container2" href="css/editor.dataTables.min.css">

    <script  class="container2" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.js"></script>
    <script  class="container2"  src="js/dataTables.editor.min.js"></script>
    <script  class="container2"  src="js/table.Cowpedia.js"></script>






        <!-----------end of Second Table links------->

    <script class="container3"  src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.js"></script>
    <script  class="container3"  src="js/dataTables.editor.min.js"></script>
    <script class="container3"  src="js/table.Cowpedia.js"></script>

        <script>
$(document).ready(function() {
$('table.display').DataTable();

} );</script>

        <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia" width="100%">
            <body class= "dataTables">
    <div class="container">

            <thead>
                <tr>
                    <th>Name/ID</th>
                    <th>Date</th>
                    <th>Sire</th>
                    <th>Dame</th>
                    <th>MGD</th>
                    <th>Birthdate</th>
                    <th>Born Organic</th>
                    <th>Breed</th>
                    <th>DHIA Tag</th>
                    <th>Notes</th>
                </tr>
            </thead>
        </table>

    </div>

        <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia2" width="100%">

    <div class="container2">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Breeding Record</th>
                    <th>Calving Record</th>
                </tr>
            </thead>
        </table>

    </div>

Date	Condition	Treatment

    </div>
</body>

</html>

Again, i am looking to have the "Add, Edit, Delete" function to each table if at all possible.

thank you for all the help, it is greatly appreciated.

allan · August 2019

$('table.display').DataTable();

I don't see any buttons or Editor initialisation. Can you link to your page so I can see the full thing please?

Allan

JesseGE · August 2019

Hey @allan,

I am using sublime text and i am not sure if i am able to link to the page, when i view it in a browser it just shows up as a local page (if you know a trick around this, please share. )

I did however add the Javascript to the code for each individual table (I think),

this is my first major coding project, so again i apologize for all the "duh" questions i have. thank you and everyone else for their patience.

below is the code in full again. let me know if there is anything else i can do or any suggestions/ feedback you have.





    <!doctype html>

    <!-- all this info came with the html boiler tag -->
    <html class="no-js" lang="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
          
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link rel="manifest" href="site.webmanifest">
            <link rel="apple-touch-icon" href="icon.png">
           
    
            <link rel="stylesheet" href="css/normalize.css">
            <link rel="stylesheet" href="css/main.css">
             <script src="js/vendor/modernizr-3.5.0.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
            <script src="js/plugins.js"></script>
            <script src="js/main.js"></script>
    
            <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
            <script>
                window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
                ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
            </script>
            <script src="https://www.google-analytics.com/analytics.js" async defer></script>

            <!-- end of boiler html template  -->
           



            <!--------- first table links .------->
           
        
        <title>DataTables Editor - Cowpedia</title>

        <link rel="stylesheet" type="text/css" class="container" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" class="container" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" class="container" href="css/editor.dataTables.min.css">

        <script class="container" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
        <script  class="container" src="js/dataTables.editor.min.js"></script>
        <script  class="container" src="js/table.Cowpedia.js"></script>





        

        <!---------- end of first table links------->


        <!-----------Start of Second Table links------->

        <link rel="stylesheet" type="text/css" class="container2" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" class="container2" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" class="container2" href="css/editor.dataTables.min.css">

        <script  class="container2" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.js"></script>
        <script  class="container2"  src="js/dataTables.editor.min.js"></script>
        <script  class="container2"  src="js/table.Cowpedia.js"></script>


    



            <!-----------end of Second Table links------->


<!-- start of third table links -->
<link rel="stylesheet" type="text/css" class="container3" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css" class="container3" href="css/generator-base.css">
        <link rel="stylesheet" type="text/css" class="container3" href="css/editor.dataTables.min.css">

        <script class="container3"  src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.18/af-2.3.3/b-1.5.6/b-colvis-1.5.6/b-print-1.5.6/cr-1.5.0/fc-3.2.5/fh-3.1.4/kt-2.5.0/r-2.2.2/rg-1.1.0/sl-1.3.0/datatables.min.js"></script>
        <script  class="container3"  src="js/dataTables.editor.min.js"></script>
        <script class="container3"  src="js/table.Cowpedia.js"></script>

    
<!-- End of third table links  -->


<!--JS used to get multiple tables to show on one page---->

            <script>
    $(document).ready(function() {
    $('table.display').DataTable();
} );

var editor = new $.fn.dataTable.Editor( {

    function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: '/api/Cowpedia',
        table: '#Cowpedia',
        fields: [
            {
                "label": "Name\/ID:",
                "name": "nameid"
            },
            {
                "label": "Date:",
                "name": "date",
                "type": "datetime",
                "format": "MM\/DD\/YY"
            },
            {
                "label": "Sire:",
                "name": "sire"
            },
            {
                "label": "Dame:",
                "name": "dame"
            },
            {
                "label": "MGD:",
                "name": "mgd"
            },
            {
                "label": "Birthdate:",
                "name": "birthdate"
            },
            {
                "label": "Born Organic:",
                "name": "born_organic",
                "type": "select",
                "options": [
                    "yes",
                    " no"
                ]
            },
            {
                "label": "Breed:",
                "name": "breed"
            },
            {
                "label": "DHIA Tag:",
                "name": "dhia_tag"
            },
            {
                "label": "Notes:",
                "name": "notes",
                "type": "textarea"
            }
        ]
    } );

    var table = $('#Cowpedia1').DataTable( {
        dom: 'Bfrtip',
        ajax: '/api/Cowpedia',
        columns: [
            {
                "data": "nameid"
            },
            {
                "data": "date"
            },
            {
                "data": "sire"
            },
            {
                "data": "dame"
            },
            {
                "data": "mgd"
            },
            {
                "data": "birthdate"
            },
            {
                "data": "born_organic"
            },
            {
                "data": "breed"
            },
            {
                "data": "dhia_tag"
            },
            {
                "data": "notes"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );



(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.Cowpedia.php',
        table: '#Cowpedia2',
        fields: [
            {
                "label": "Date:",
                "name": "date",
                "type": "datetime",
                "format": "MM\/DD\/YY"
            },
            {
                "label": "Breeding Record:",
                "name": "breeding_record"
            },
            {
                "label": "Calving Record:",
                "name": "calving_record"
            }
        ]
    } );

    var table = $('#Cowpedia2').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.Cowpedia.php',
        columns: [
            {
                "data": "date"
            },
            {
                "data": "breeding_record"
            },
            {
                "data": "calving_record"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );


(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.Cowpedia.php',
        table: '#Cowpedia3',
        fields: [
            {
                "label": "Date:",
                "name": "date",
                "type": "datetime",
                "format": "MM\/DD\/YY"
            },
            {
                "label": "Condition:",
                "name": "condition"
            },
            {
                "label": "Treatment:",
                "name": "treatment"
            }
        ]
    } );

    var table = $('#Cowpedia3').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.Cowpedia.php',
        columns: [
            {
                "data": "date"
            },
            {
                "data": "condition"
            },
            {
                "data": "treatment"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );

}(jQuery));


</script>



<!-- HTMl for the data tables -->
    
    
<!-- Table 1 -->




        
            <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia" width="100%">
                <body class= "dataTables">
        <div class="container">

                <thead>
                    <tr>
                        <th>Name/ID</th>
                        <th>Date</th>
                        <th>Sire</th>
                        <th>Dame</th>
                        <th>MGD</th>
                        <th>Birthdate</th>
                        <th>Born Organic</th>
                        <th>Breed</th>
                        <th>DHIA Tag</th>
                        <th>Notes</th>
                    </tr>
                </thead>
            </table>

        </div>
    
<!-----Table 2---->



            
            <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia2" width="100%">
                
        <div class="container2">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Breeding Record</th>
                        <th>Calving Record</th>
                    </tr>
                </thead>
            </table>

        </div>






<!--------Table 3----->



<table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia3" width="100%">
                
        <div class="container3">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Condition</th>
                        <th>Treatment</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

allan · August 2019

Thanks, I was hoping the full code (or a link to the page which would really help) would clarify this request for me:

If possible i would also like to have a "add new row" for some of the entries as some of the records will have more then one data set, again if at all possible.

But I'm afraid I just don't really understand that. Could you elaborate on what the issue is please?

Thanks,
Allan

JesseGE · August 2019

hi @allan, i am not too worried about the add new row function for now. i figure once i get the rest of the issues resolved, i can come back to that at a later time. I apologize for the confusion around this.

My main problem is with not being able to apply the Javascript functions so that each table can have the "New, Edit, Delete" buttons. I am sure i am doing something wrong, but not quite sure what that is.

above is the code in full, with nothing left out. I appreciate the help!

kthorngren · August 2019

I think the problem is you are duplicating the CSS and JS includes. Looks like you are duplicating them in the first table links, second table links and third table links. You only want to include these once. Remove the duplicates and see if that helps.

Kevin

JesseGE · August 2019

@kthorngren hi Kevin, I removed the links for the second and third table. This is a good idea! However, it did not fix the issue of bringing up the "New, Edit. Delete" buttons and making each table editable. Still stuck but i appreciate the feedback and contribution.

It is weird, when i take out the JS, the tables show up. When i add the JS in all I am left with is the <tr> headers.

below is the updated code:




    <!doctype html>

    <!-- all this info came with the html boiler tag -->
    <html class="no-js" lang="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
          
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link rel="manifest" href="site.webmanifest">
            <link rel="apple-touch-icon" href="icon.png">
           
    
            <link rel="stylesheet" href="css/normalize.css">
            <link rel="stylesheet" href="css/main.css">
             <script src="js/vendor/modernizr-3.5.0.min.js"></script>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
            <script>window.jQuery || document.write('<script src="js/vendor/jquery-3.2.1.min.js"><\/script>')</script>
            <script src="js/plugins.js"></script>
            <script src="js/main.js"></script>
    
            <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
            <script>
                window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
                ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
            </script>
            <script src="https://www.google-analytics.com/analytics.js" async defer></script>

            <!-- end of boiler html template  -->
           



            <!--------- first table links .------->
           
        
        <title>DataTables Editor - Cowpedia</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css"  href="css/generator-base.css">
        <link rel="stylesheet" type="text/css"  href="css/editor.dataTables.min.css">

        <script src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js"></script>
        <script  src="js/dataTables.editor.min.js"></script>
        <script  src="js/table.Cowpedia.js"></script>

<!---------- end of first table links------->


<!--JS used to get multiple tables to show on one page---->

            <script>
    $(document).ready(function() {
    $('table.display').DataTable();
} );

var editor = new $.fn.dataTable.Editor( {

} );


function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: '/api/Cowpedia',
        table: '#Cowpedia',
        fields: [
            {
                "label": "Name\/ID:",
                "name": "nameid"
            },
            {
                "label": "Date:",
                "name": "date",
                "type": "datetime",
                "format": "MM\/DD\/YY"
            },
            {
                "label": "Sire:",
                "name": "sire"
            },
            {
                "label": "Dame:",
                "name": "dame"
            },
            {
                "label": "MGD:",
                "name": "mgd"
            },
            {
                "label": "Birthdate:",
                "name": "birthdate"
            },
            {
                "label": "Born Organic:",
                "name": "born_organic",
                "type": "select",
                "options": [
                    "yes",
                    " no"
                ]
            },
            {
                "label": "Breed:",
                "name": "breed"
            },
            {
                "label": "DHIA Tag:",
                "name": "dhia_tag"
            },
            {
                "label": "Notes:",
                "name": "notes",
                "type": "textarea"
            }
        ]
    } );

    var table = $('#Cowpedia1').DataTable( {
        dom: 'Bfrtip',
        ajax: '/api/Cowpedia',
        columns: [
            {
                "data": "nameid"
            },
            {
                "data": "date"
            },
            {
                "data": "sire"
            },
            {
                "data": "dame"
            },
            {
                "data": "mgd"
            },
            {
                "data": "birthdate"
            },
            {
                "data": "born_organic"
            },
            {
                "data": "breed"
            },
            {
                "data": "dhia_tag"
            },
            {
                "data": "notes"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );



(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.Cowpedia.php',
        table: '#Cowpedia2',
        fields: [
            {
                "label": "Date:",
                "name": "date",
                "type": "datetime",
                "format": "MM\/DD\/YY"
            },
            {
                "label": "Breeding Record:",
                "name": "breeding_record"
            },
            {
                "label": "Calving Record:",
                "name": "calving_record"
            }
        ]
    } );

    var table = $('#Cowpedia2').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.Cowpedia.php',
        columns: [
            {
                "data": "date"
            },
            {
                "data": "breeding_record"
            },
            {
                "data": "calving_record"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );
} );


(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.Cowpedia.php',
        table: '#Cowpedia3',
        fields: [
            {
                "label": "Date:",
                "name": "date",
                "type": "datetime",
                "format": "MM\/DD\/YY"
            },
            {
                "label": "Condition:",
                "name": "condition"
            },
            {
                "label": "Treatment:",
                "name": "treatment"
            }
        ]
    } );

    var table = $('#Cowpedia3').DataTable( {
        dom: 'Bfrtip',
        ajax: 'php/table.Cowpedia.php',
        columns: [
            {
                "data": "date"
            },
            {
                "data": "condition"
            },
            {
                "data": "treatment"
            }
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }

        ]
    } );
} );

}(jQuery));

</script>



<!-- HTMl for the data tables -->
    
    
<!-- Table 1 -->
<br>
<br>
<br>
<br>




        
            <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia" width="100%">
                <body class= "dataTables">
        <div class="container">

                <thead>
                    <tr>
                        <th>Name/ID</th>
                        <th>Date</th>
                        <th>Sire</th>
                        <th>Dame</th>
                        <th>MGD</th>
                        <th>Birthdate</th>
                        <th>Born Organic</th>
                        <th>Breed</th>
                        <th>DHIA Tag</th>
                        <th>Notes</th>
                    </tr>
                </thead>
            </table>

        </div>
    
<!-----Table 2---->
<br>
<br>
<br>
<br>


            
            <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia2" width="100%">
                
        <div class="container2">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Breeding Record</th>
                        <th>Calving Record</th>
                    </tr>
                </thead>
            </table>

        </div>






<!--------Table 3----->
<br>
<br>
<br>
<br>


<table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia3" width="100%">
                
        <div class="container3">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Condition</th>
                        <th>Treatment</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>
</html>

kthorngren · August 2019

when i take out the JS, the tables show up. When i add the JS in all I am left with is the <tr> headers.

Sounds like you might be getting an error in your browser's console which is stopping your Javascript.

Kevin

JesseGE · August 2019

JesseGE · August 2019

I wasn't sure how well the screenshot was going to show up, sorry it is not the best quality

the left is how the tables are showing up in google chrome (i tried Firefox and it is the same.). the right says the errors are "failed to load resource".

Any thoughts on how to proceed from here?

thank you everyone!

kthorngren · August 2019

Looks like the path to retrieve the CSS and JS files is incorrect. You would need to look at your server's configuration to understand the path to the files. Have no clue about the last error. There is a line number (67). Look at that line to see what the problem is. That error is not a Datatables issue so your best option is to google search or use Stack Overflow to search for answers.

Kevin

JesseGE · August 2019

@kthorngren Thanks Kevin, i will look into it and see what i can figure out.

JesseGE · August 2019

hi all,

I have been working on the errors that i had. I am down to 2 (from 26 or so!). I am kind of stuck here as the "src" URL's are not found. I went through and made absolute links to the source files as they named in my project. also the tables are no longer showing up, just the "th" headers.

for the second error i have provided a link the JS. codepad.org/euw4Egzq




    <!doctype html>
    <!-- all this info came with the html boiler tag -->
    <html class="no-js" lang="">
        <head>
            <meta charset="utf-8">
            <meta http-equiv="x-ua-compatible" content="ie=edge">
          
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width, initial-scale=1">
    
            <link rel="manifest" href="site.webmanifest">
            <link rel="apple-touch-icon" href="icon.png">
           
            <!--------- first table links .------->
           
        
        <title>DataTables Editor - Cowpedia</title>

        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.css">
        <link rel="stylesheet" type="text/css"  href="C:\Users\jesse\Downloads\DataTablesEditor (2)\public\css\generator-base.css">
        <link rel="stylesheet" type="text/css"  href="C:\Users\jesse\Downloads\DataTables\Responsive-2.2.2\css\responsive.bootstrap.min.css">

        <script  src="C:\Users\jesse\Downloads\DataTablesEditor (2)\public\js\dataTables.editor.min.js"></script>
        <script  src="C:\Users\jesse\Downloads\DataTablesEditor (2)\public\js\table.Cowpedia.js"></script>

<!---------- end of first table links------->


<!--JS used to get multiple tables to show on one page---->


</head>

<!-- HTMl for the data tables -->
    
    
<!-- Table 1 -->
<br>
<br>
<br>
<br>
        
            <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia" width="100%">
                <body class= "dataTables">
        <div class="container">

                <thead>
                    <tr>
                        <th>Name/ID</th>
                        <th>Date</th>
                        <th>Sire</th>
                        <th>Dame</th>
                        <th>MGD</th>
                        <th>Birthdate</th>
                        <th>Born Organic</th>
                        <th>Breed</th>
                        <th>DHIA Tag</th>
                        <th>Notes</th>
                    </tr>
                </thead>
            </table>

        </div>
    
<!-----Table 2---->
<br>
<br>
<br>
<br>
            
            <table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia2" width="100%">
                
        <div class="container2">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Breeding Record</th>
                        <th>Calving Record</th>
                    </tr>
                </thead>
            </table>

        </div>

<!--------Table 3----->
<br>
<br>
<br>
<br>


<table cellpadding="1" cellspacing="0" border="0" class="display" id="Cowpedia3" width="100%">
                
        <div class="container3">
                <thead>
                    <tr>

                        <th>Date</th>
                        <th>Condition</th>
                        <th>Treatment</th>
                    </tr>
                </thead>
            </table>

        </div>
    </body>

</html>

any help is appreciated, thanks!

JesseGE · August 2019

kthorngren · August 2019

For the file not found error the browser won't try loading local files. It would be a security risk for the browser to retrieve local files. They need to be on your web server.

I don't see anything that stands out as a problem with the file you posted. Is that the file table.Cowpedia.js? Can you post a link to your page so we can take a look?

Kevin

JesseGE · September 2019

@kthorngren

Sorry for the wait, i was not online all weekend.

I am still looking into the "loading local files" thing, I haven't found a solution just yet but will keep working at it. Below is a link to the site. Let me know if this medium will work or not. If not i can try something else. Thanks!

https://sites.google.com/view/cowpedia/home

kthorngren · September 2019

Take a look at the browser's console and you will see errors like:

Mixed Content: The page at 'https://sites.google.com/' was loaded over HTTPS, but requested an insecure stylesheet 'c:\Users\jesse\Downloads\DataTables\Responsive-2.2.2\css\responsive.bootstrap.min.css'. This request has been blocked; the content must be served over HTTPS.

You will need to put your files on a web server. Loading local files via HTTP is a security issue. This is not specific to Datartables but to HTTP in general.

Kevin

JesseGE · September 2019

hi @kthorngren @allan , i am still dealing with the local files and HTTP issue. trying to find a web server that will work.

in the mean time i will use my codepen page to show you what i am seeing.

https://codepen.io/jge1886/pen/qzYrGV

i think this will work.

the biggest issue is the "create, edit, remove" buttons not showing up when i have multiple tables. Any thoughts on this? i have been stumped for a while, but am determined to keep working at it and try different approaches.

thanks!

kthorngren · September 2019

I see a couple potential issues:

First it looks like you are loading jquery.js twice which will cause problems like the buttons not loading. You have this:

https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.10.18/b-1.5.6/b-colvis-1.5.6/b-flash-1.5.6/b-html5-1.5.6/b-print-1.5.6/fh-3.1.4/kt-2.5.0/r-2.2.2/rr-1.2.4/sc-2.0.0/sl-1.3.0/datatables.min.js

Where jqc-1.12.4 is jquery.js. Plus you have this:

document.write('<"script src="http://mysite.com/jquery.min.js">')

Next problem is you have:

$(document).ready(function() {
    $('table.display').DataTable();
} );

Then you are individually initializing the Datatables:

var table = $('#Cowpedia1').DataTable( {
        dom: 'Bfrtip',
.....

I'm surprised you are seeing the Cannot reinitialise DataTable error:

If the configs are different then you will want to initialize the Datatables individually and remove the $('table.display').DataTable();. If the configs are the same then you can use one init code for all tables but you need to put the options inside.

Last the script is getting this error in the browser's console on line 236:

Uncaught SyntaxError: Unexpected token var

This is where you pasted the Editor code into the codepen. If you want to create an example with Editor then you can use this as a base to start from:
http://live.datatables.net/guwafemu/1/edit

You can clone a copy of it and build out your test case with a working Editor.

Kevin

New Edit Delete Buttons

New Edit Delete Buttons

Answers

Howdy, Stranger!

Categories

DataTables

New Edit Delete Buttons

New Edit Delete Buttons

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables