New Edit Delete Buttons

New Edit Delete Buttons

JesseGEJesseGE Posts: 13Questions: 1Answers: 0
edited August 2019 in Free community support

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.

Answers

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    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.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    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 :)

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    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------->
    


    <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>
    
            <script>
    $(document).ready(function() {
    $('table.display').DataTable();
    

    } );</script>

    <br>
    <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>
    

    <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>
    

    <br>
    <br>
    <br>
    <br>

    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.

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin
    $('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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    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>
  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    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!

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    @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>
  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    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!

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    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!

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    @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

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736
    edited 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

  • JesseGEJesseGE Posts: 13Questions: 1Answers: 0

    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!

  • kthorngrenkthorngren Posts: 20,148Questions: 26Answers: 4,736

    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

This discussion has been closed.