Export button issues - Code adding 2 search boxes & 2 Navigation bars

wixy · February 2021

Description of problem:

Hello, have been struggling for weeks with getting 'Export buttons' to work. Using the current code they don't appear, so researched Stackoverflow and found code that makes the buttons appear - but now show 2 search boxes and 2 navigations bars.

I am new to DataTables, and am sure the issue is with me having 2 x "/js/jquery.dataTables.min.js" scripts! But if I remove one or the other, I get variations of the table not responding/export buttons disappear etc.

Any help appreciated!!!

CODE: (Attached)

wixy · February 2021

kthorngren · February 2021

Load order is important. You are getting errors in the browser's console, some like this:

Uncaught ReferenceError: $ is not defined

I moved the order of your script so everything loads in the proper order:
http://live.datatables.net/xomigeha/1/edit

Also note that your page isn't a properly formatted HTML page. If you need help with your HTML layout please use a resource like w3cschools for tutorials.

Kevin

wixy · February 2021

Full Code (Excuse the mess):

<?php
// Initialize the session
session_start();
 
// Check if the user is logged in, if not then redirect him to login page
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
    header("location: Error.php");
    exit;
}

<?php
>
 
<!doctype html>




FLIGHT PORTAL


?>


<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://flighteducation.co.uk/">
<meta property="og:title" content="FLIGHT EDUCATION">
<meta property="og:description" content="The absolute pathways career source for all students and advisors within Secondary and Further Education in the UK.">
<meta property="og:image" content="img/OG.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://flighteducation.co.uk/">
<meta property="twitter:title" content="FLIGHT EDUCATION">
<meta property="twitter:description" content="The absolute pathways career source for all students and advisors within Secondary and Further Education in the UK.">
<meta property="twitter:image" content="img/OG.jpg">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!--FAVICON-->
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<!--FAVICON-->
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">-->
<!--    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">-->
<!--    <link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/1.1.1/css/searchPanes.dataTables.min.css">-->
<!--    <link rel="stylesheet" href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css">-->
<!--TABLE BUTTONS-->
<!--
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
-->

 <!--TABLE BUTTONS END-->   
<meta charset="utf-8">
<title>- FLIGHT -</title>
<link href="portal.css" rel="stylesheet" type="text/css">
<style type="text/css">
a:link {
    color: rgba(255,255,255,1);
    text-decoration: none;
}
a:visited {
    color: rgba(255,255,255,1);
    text-decoration: none;
}
a:hover {
    color: rgba(243,219,7,1);
    text-decoration: none;
}
a:active {
    color: rgba(255,255,255,1);
    text-decoration: none;
}
    /*  scrollbar*/
    body::-webkit-scrollbar {
  width: 10px;              
}
body::-webkit-scrollbar-track {
  background: Black;   
}
body::-webkit-scrollbar-thumb {
  background-color: rgba(243,219,7,1);  
  border-radius: 20px; 
}
.result {
    background-color: rgba(91,88,88,1.00) !important;
}

.odd {
    background-color: #f9f9f9 !important;
}

/*  scrollbar*/
</style>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>
<span class="wrapper"> 
<section class="header">
<h1>
Carr Manor Community School
  </h1>    
<p>Date/Time: <span id="datetime"></span></p>
<a href="CMCSlogout.php" class="btn btn-danger">Sign Out of Your Account?</a>
<br><br><br>
</section>


<section class="table-section">

<div class="container-fluid">
    <div class="row">
    <div class="col-md-1 col-xs-12">
       
<!--<br><br>-->
    
    </div>
    <div class="col-md-12 col-xs-12">
        <div class="table-responsive">
            <table id='example' class='table'>
                <thead>
                    <tr>
                        <th style='text-align:left'>Student Name</th>
                        <th style='text-align:left'>Year</th>
                        <th>My College</th>
                        <th>My University</th>
<!--                        <th>Subject Specialist Information</th>-->
                        <th>My Careers</th>
                        <th>School</th>
<!--                        <th>More Information</th>-->
<!--                        <th>Linked Career</th>-->
                </tr>
            </thead>
            </table>
        </div>
    </div>
    </div>
</div>
</div>

</section>

        
<span class="flightlogo"><img src="img/Top-LogoR.png" width="84" height="42" alt=""/></span>    
<section class="gatsby-icons">
<br><br>
    <img src="img/G2s.png" alt="G2"/>
    <img src="img/G3s.png" alt="G3"/>
    <img src="img/G4s.png" alt="G4"/>
<br>
<h6 class="g-lable">Gatsby Benchmarks</h6>
</section>



<script>
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toLocaleString();
</script>

</div>
    <!--IF I TAKE THIS OUT EXPORT BOXES STOP -->    
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js" type="text/javascript"></script>


    <script>

$('#example').DataTable({
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                'ajax': {
                    'url': 'CMCSajax-portal.php'
                },
                'columns': [{
                        data: 'username'
                    },
                    {
                        data: 'year'
                    },
                    {
                        data: 'college'
                    },
                    {
                        data: 'university'
                    },
                    {
                        data: 'careers'
                    },
                    {
                        data: 'school'
                    },
                ]
            });


    // Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

//   $('#example').DataTable();

    </script>

<link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css"  href="https://cdn.datatables.net/buttons/1.4.0/css/buttons.dataTables.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.27/build/vfs_fonts.js"></script>
<!--IF I ADD LINE BELOW AWAY BUTTONS APPEAR BUT IT ADDS TWO SEARCHES ETC>-->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<script src="https://cdn.datatables.net/buttons/1.4.0/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.4.0/js/buttons.print.min.js"></script>

    <script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    } );
} );
    </script>

</body>
</html>

colin · February 2021

@wixy Have you resolved this? If not, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

wixy · February 2021

Morning Colin - Saddly no.

I have managed to remove one of the Search boxes, now just leaving me with 2 nav bars at the bottom - It's certainly me messing up the order, somehow overcomplicating things I believe!

Have popped a test case link below:

https://www.flighteducation.co.uk/PORTALS/TEST%20Case.php

Many thanks for all the support again!

tangerine · February 2021

<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>

.....

<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

You are loading two versions of DataTables.

wixy · February 2021

Hi Tangerine - Thanks for your response and eagle eye!

Have amended to the same version, but still no resolve, unfortunately.

Thanks again.

tangerine · February 2021

Have amended to the same version

That implies that you are still loading DT twice. Only load DT once.

wixy · February 2021

Hi Tangerine -

If I remove one, then the buttons disappear
If I remove the other, the data doesn't load from Mysql but the buttons exist

Have just tried rebuilding the file from scratch again with just 1 DT - but again, the buttons do not appear:

https://www.flighteducation.co.uk/PORTALS/TEST%20Case2.php

tangerine · February 2021

You have the console error "Uncaught Unknown button type: print", which suggests that you are missing the buttons.print js file.
https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js

wixy · February 2021

Thanks tangerine (again) - no joy!

If I remove the DT script before the:

<script>
$('#example').DataTable({
//                'searching': false,
                'processing': true,
                'serverSide': true,
                'serverMethod': 'post',
                
                'ajax': {
                    'url': 'CMCSajax-portal.php'
                },
                'columns': [{
                        data: 'username'
                    },
                    {
                        data: 'year'
                    },
                    {
                        data: 'college'
                    },
                    {
                        data: 'university'
                    },
                    {
                        data: 'careers'
                    },
                    {
                        data: 'school'
                    },
                ]
            });
    </script>

Console Error states that the code "Datatable is not a function"

When it is put back in - at does the 2 DataTables thing again.

Removing the one at the end of the code string - causes it all to fail.

wixy · February 2021

Have added the 'searching': false, back into the code above, which removes one of the search boxes.

Are you aware of another function that will take away the double Nav bars at the bottom?

tangerine · February 2021

You are still loading DataTables twice. Also you are loading jQuery three times.
Also you have two of these

 $('#example').DataTable({

where you only need one.

It seems that you need to return to basics and study some simple examples of web page design with DataTables.

wixy · February 2021

You were absolutely right! Have gone right back to basics and all is working fine bar one issue now (sorry!!)

Now I cannot get the dropdown that allows you to choose the amount in the table, she has disappeared!

Thanks, and apologies again!

wixy · February 2021

https://www.flighteducation.co.uk/PORTALS/TEST%20Case5.php

kthorngren · February 2021

See this FAQ.

Kevin

wixy · February 2021

I actually think I could cry!!

Gentlemen - I seriously cannot thank you enough, for all your time and efforts!!!

Export button issues - Code adding 2 search boxes & 2 Navigation bars

Export button issues - Code adding 2 search boxes & 2 Navigation bars

Answers

Howdy, Stranger!

Categories

DataTables

Export button issues - Code adding 2 search boxes & 2 Navigation bars

Export button issues - Code adding 2 search boxes & 2 Navigation bars

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables