We Keep Coding

I have data table in my page and data table sort is not working

I have data table in my page and I want to add sort in my table but its is not working.
View:
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.css">
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/custom/css/custom_style.css">
<style>
.highlight { background-color: #1DA5FF; color:#fff; }
th,
td {
white-space: nowrap;
}
div.dataTables_wrapper {
direction: rtl;
}
div.dataTables_wrapper {
width: 1000px;
margin: 0 auto;
font-family: Vazir;
font-size: 10px;
}
th {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
}
td {
min-width: 80px;
height: 32px;
border: 1px solid #222;
white-space: nowrap;
text-align: center;
}
</style>
<style type="text/css" media="screen">
td{
padding: 0;
}
</style>
<form role="form" id="print_booking_register" method="POST" enctype="multipart/form-data">
<section class="content">
<div class="row">
<div class="table-responsive">
<table id="booking_register_table" class="table table-bordered table-sm" style=" overflow: auto;"> </table>
</div>
</div>
</section>
</form>
<button id="print" name="print" onclick="printContent('print_booking_register')" class="btn btn-block btn-outline-primary fa fa-newspaper-o col-10 offset-1" style="margin-top: 35px; margin-bottom: 25px;" data-clicked="unclicked"> Print Booking Register</button>
<!-- DataTables -->
<script src="<?php echo base_url(); ?>assets/plugins/datatables/jquery.dataTables.js"></script>
<script src="<?php echo base_url(); ?>assets/plugins/datatables/dataTables.bootstrap4.js"></script>
<script href=" https://code.jquery.com/jquery-3.3.1.js"></script>
<script src=" <?php echo base_url(); ?>assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script href=" https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script href=" https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<script>
$(document).ready(function() {
$('#booking_register_table').dataTable({
order: [[ 3, 'desc' ], [ 0, 'asc' ]]
});
});
</script>
<script>
function printContent(e1) {
event.preventDefault();
var allVals = [];
$('input[name=selectedrecord]:not(:checked').each(function() {
allVals.push($(this).val());
});
allVals.forEach(function(i){
$('tr').each(function(){
$(this).find('td, th').eq(i-1).css({
display:'none'
});
});
});
$('#print').css('visibility', 'hidden'); //hiding print button on print page
$('input[name=selectedrecord]').css('visibility', 'hidden'); //hiding Check box on print page
var restorepage = document.innterHTML;
var printContent = document.getElementById(e1).innterHTML;
document.innterHTML = printContent;
window.print();
document.location.href = "<?php echo base_url(); ?>";
location.href="<?php echo base_url(); ?>booking/report/booking_register/BookingRegisterController/bookingRegister", 'refresh';
}
</script>
</body>
</html>
Controller:
$modelResult = $this->reportModel->bookingRegisterReportByLrno($data);
?>
<table id="bilty_table" class="table table-bordered table-striped table-sm" style=" overflow: auto;">
<thead>
<tr>
<th class="col2"><input type="checkbox" name="selectedrecord" value="2">LR No</th>
<th class="col3"><input type="checkbox" name="selectedrecord" value="3">Consignor Name</th>
</tr>
</thead>
<tbody>
<?php foreach($modelResult as $bilty){?>
<tr>
<td><?php echo $counter;?></td>
<td><?php echo $bilty->lr_no;?></td>
<td><?php echo $bilty->consignor;?></td>
</tr>
<?php }?>
</tbody>
</table>
Added jquery file in my code but i this it not support.
I do not know that where I am wrong in my code.
I try this code but its not working.
I have table in my controller and I am showing in view page

Display content from DIV

I have the two text button Main Folder & Second Folder using the <a> tag inside the div element.
<div class="zf-folder">
<!-- another div elements -->
Main Folder
<!-- another div elements -->
</div>
Unfortunately, I have to click the text to move tabs, can't use the button (div) column to display the content.
How can I display tab content not only from text, but can from clicking on div element.
Please help me, I give a lot of code on JSFiddle.
Thanks in advance
$(document).ready(function() {
$('table.table').DataTable();
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});
});
._tabFolder {
cursor: pointer;
position: relative;
}
._tabFolder:hover {
background-color: rgba(255, 255, 255, 0.2)
}
._tabFolder:active {
background-color: rgba(29, 33, 41, 1)
}
._itemPosition {
align-items: center;
display: flex
}
._sideFolder {
background-color: none;
height: 90%;
left: 0;
position: absolute;
top: 2px;
width: 5px
}
._iconText:hover ._1i5y,
.uiPopover.selected ._1i5y {
display: block
}
._iconText {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
margin-left: 13px;
}
._iconFolder,
._1i5x,
._1i5w {
display: inline-block;
margin-right: 5px;
vertical-align: middle
}
._iconFolder {
background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -437px -21px;
height: 24px;
position: relative;
width: 24px
}
._5bme ._iconFolder {
background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -412px -21px
}
._icon-col {
height: 16px;
left: 4px;
position: absolute;
top: 4px;
width: 16px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="column-folder">
<ul class="nav nav-tabs" role="tablist">
<!-- *********** MAIN FOLDER BUTTON ************* -->
<div class="zf-folder">
<li role="presentation" class="active">
<div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
Main Folder
</div>
</div>
</div>
</li>
</div>
<!-- *********** MAIN FOLDER BUTTON ************* -->
<!-- *********** SECOND FOLDER BUTTON ************* -->
<div class="zf-folder">
<li role="presentation" class="active">
<div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
Second Folder
</div>
</div>
</div>
</li>
</div>
<!-- *********** SECOND FOLDER BUTTON ************* -->
</ul>
</div> <!-- Zf-Folder -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="mainTab">
<div class="row">
<div class="col-md-6">
<h3>Main Folder</h3>
</div>
</div>
<div class="table-responsive">
<table id="pendingOffTable" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${pendingOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td>
<input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}" class="btn btn-success btn-xs approve-off" type="submit" value="approve">
<span class="fa fa-check-square-o"></span> Approve
</button>
<button th:id="${off.id}" class="btn btn-danger btn-xs reject-off" type="submit" value="reject">
<span class="fa fa-times"></span> Reject
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in" id="example1-tab2">
<div class="row">
<div class="col-md-6">
<h3>Second Folder</h3>
</div>
</div>
<div class="table-responsive">
<table id="approvedOffTable" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${approvedOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td>
<input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}" class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete">
<span class="fa fa-times"></span> Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>

You can add a span inside your link:
<a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">
Main Folder
<span class="hyperspan"></span>
</a>
And CSS:
.hyperspan
{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}

This should work for you. Just add these lines to your JS:
$(".mainFolder").click(function (e) {
$(this).find("a")[0].click();
});
$(".secondFolder").click(function (e) {
$(this).find("a")[0].click();
});
Working JSFiddle https://jsfiddle.net/Karadjordje1389/h14uv4ww/

Drag a picture, append html that corresponds to the picture

I'm new in jQuery and I would like to create a drag and drop HTML builder.
I have 2 divs: in the first I have pictures that represents HTML blocks in the other div I would like to have a sortable list with the divs that corresponds to the dropped picture.
I've tried a lot of things but It doesn't work. Here is one of multiple parts of code that I've tried :
<html>
<head>
<meta charset="utf-8">
<title>Drag and Drop tests</title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>
<body>
<style>
#div_1{height:200px;width:400px;border:5px dotted red;}
#div_2{height:200px;width:400px;background-color:yellow;}
#left{
width:400px;
min-height:400px;
max-height:;
float:left;
border:1px solid black;
margin:0;padding:0;
}
#right{
width:420px;
float:right;
border: 1px solid red;
margin:0;
padding:0;
}
</style>
<script>
$(function(){
$(function(){
$("#left").sortable({
revert: true
});
});
$(function(){
$(".my_div").draggable({
connectToSortable: "#left",
helper: "clone",
stop: function(e, ui){
$("#left").clone().append($(".bloc[data-id="+$(this).attr("data-id")+"]"));
}
});
});
$("div").disableSelection();
});
</script>
<div class="bloc" id="div_1" data_id="1"></div>
<div class="bloc" id="div_2" data-id="2"></div>
<div id="wrap" style="width:1000px;margin:auto">
<div id="left">
</div>
<div id="right" >
<table width="100%" style="text-align:center;height:100%">
<tbody>
<tr style="height:133px">
<td>
<div style="height:100%;width:100%;" class="my_div" data-type="content" data-id="1">
<img src="_pictures/1.png" alt="héhé" />
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="2">
<img src="_pictures/2.png" alt="héhé" />
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="3">
<img src="_pictures/3.png" alt="héhé" />
</div>
</td>
</tr>
<tr style="height:133px">
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="4">
<img src="_pictures/4.png" alt="héhé" />
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="5">
<img src="_pictures/5.png" alt="héhé" />
</div>
</td>
<td>
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="6">
<img src="_pictures/6.png" alt="héhé" />
</div>
</td>
</tr>
<tr style="height:133px">
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="7">
<img src="_pictures/7.png" alt="héhé" />
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="8">
<img src="_pictures/8.png" alt="héhé" />
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="9">
<img src="_pictures/9.png" alt="héhé" />
</div>
</td>
</tr>
<tr style="height:133px">
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="10">
<img src="_pictures/10.png" alt="héhé" />
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="11">
<img src="_pictures/11.png" alt="héhé" />
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="12">
<img src="_pictures/12.png" alt="héhé" />
</div>
</td>
</tr>
<tr style="height:133px">
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="13">
<img src="_pictures/13.png" alt="héhé" />
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="14">
<img src="_pictures/14.png" alt="héhé" />
</div>
</td>
<td class="my_td_parent">
<div style="height:100%;width:100%" class="my_div" data-type="content" data-id="15">
<img src="_pictures/15.png" alt="héhé" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
Or, if you prefer : https://jsfiddle.net/m2Lnzr1m/

You would accomplish this by merging two concepts that have already been developed. Sort lists via jQuery tinysort + Connect lists via jQuery UI. If you can get a basic concept of a 2 row list working, then you can add more and fill the list content with images. I've updated the code to start out as <li> tags but then transform them to <div> tags. That way you can keep your code conceptually fluid (that is, you should be using lists) but use divs instead.
Fiddle Example
var origSort1 = $('#sortable1').html();
var origSort2 = $('#sortable2').html();
$('button#sort').on("click", function(e) {
e.preventDefault();
triggerSort();
});
//http://stackoverflow.com/a/8584217/5076162
(function($) {
$.fn.changeElementType = function(newType) {
this.each(function() {
var attrs = {};
$.each(this.attributes, function(idx, attr) {
attrs[attr.nodeName] = attr.nodeValue;
});
$(this).replaceWith(function() {
return $("<" + newType + "/>", attrs).append($(this).contents());
});
});
};
})(jQuery);
$("ol").changeElementType("div");
$("li").changeElementType("div");
function triggerSort() {
if ($('#sortable2 .li').length > 0) {
tinysort('#sortable2>.li', {
selector: 'img',
attr: 'title'
});
numberItems();
removeNumberedItems();
} else {
return false;
}
}
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable",
placeholder: "ui-state-highlight"
}).disableSelection();
});
$('#sortable2').on('mouseenter, mouseoutm mousemove', function() {
numberItems();
});
$('#sortable1').on('mousemove', function() {
removeNumberedItems();
});
function numberItems() {
$('#sortable2').find($('.listNum')).each(function(i) {
$(this).text(i + 1);
});
}
function removeNumberedItems() {
$('#sortable1').find($('.listNum')).each(function(i) {
$(this).text("");
});
}
img {
width: 150px;
clear: both;
display: block;
}
#img02 {
border: solid 3px #ACE;
}
#img01 {
border: solid 2px #FF0;
}
button {
clear: both;
width: 404px;
height: 20px;
display: inline-block;
}
div#sortable1,
div#sortable2 {
float: left;
clear: none;
padding-left: 25px;
margin: 0;
}
div#sortable1 {
float: left;
clear: none;
list-style-type: none;
}
div#sortable1,
div#sortable2 {
min-height: 175px;
max-width: 175px;
min-width: 175px;
border: solid 1px #000;
}
.ui-state-highlight {
border: solid 1px #ACE;
height: 45px;
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<ol id="sortable1" class="connectedSortable ol">
<li class="ui-state-default li">Item <span class='listNum'></span>
<img id="img01" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="1" />
</li>
<li class="ui-state-default li">Item <span class='listNum'></span>
<img id="img02" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="2">
</li>
</ol>
<ol id="sortable2" class="connectedSortable ol">
</ol>
<button id='sort'>Sort by Title Value</button>
$('button#sort').on("click", function(e) {
e.preventDefault();
triggerSort();
});
function triggerSort() {
if ($('ol#sortable2 li').length > 0) {
tinysort('ol#sortable2>li', {
selector: 'img',
attr: 'title'
});
} else {
return false;
}
}
$(function() {
$("#sortable1, #sortable2").sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});
img {
width: 150px;
clear: both;
display: block;
}
#img02 {
border: solid 3px #ACE;
}
#img01 {
border: solid 2px #FF0;
}
button {
clear: both;
width: 100%;
height: 20px;
display: inline-block;
}
ol#sortable1,
ol#sortable2 {
float: left;
clear: none;
padding-left: 25px;
margin: 0;
}
ol#sortable1 {
float: left;
clear: none;
list-style-type: none;
}
ol#sortable1,
ol#sortable2 {
min-height: 175px;
max-width: 175px;
min-width: 175px;
border: solid 1px #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinysort/2.2.4/tinysort.min.js"></script>
<ol id="sortable1" class="connectedSortable">
<li class="ui-state-default">Item 1<img id="img01" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="1" /></li>
<li class="ui-state-default">Item 2<img id="img02" src="https://s.rrimr.com/SPSSMR/ImageCache/ImageCache.aspx?Project=S1910683&File=B10_COLOR_IMG.jpg" title="2"></li>
</ol>
<ol id="sortable2" class="connectedSortable">
</ol>
<button id='sort'>Sort by Title Value</button>

Javascript Uncaught Reference Error Anonymous Function [closed]

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
-I run a javascript file and jquery in a .php file. But anytime it runs I get the following error.
this is the javascript code : scroll.js
function setTableBody() {
$(".table-body").height(
$(".inner-container").height() - $(".table-header").height());
}
$(document).ready(function() {
var marginLeft = $(".outer-container").position().left; //Create var and calculate the difference from left
setTableBody();
$(window).resize(setTableBody);
$(".table-body").scroll(function() {
$(".table-header").offset({
left: marginLeft - this.scrollLeft //minus the difference while table header scroll with table body
});
});
});
This is the code from the header php file
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="layout.css">
<link rel="stylesheet" type="text/css" href="style.css">
<script language="javascript" type='text/javascript' src="jquery-1.11.3.min.js"></script>
<script language="javascript" type='text/javascript' src='scroll.js'></script>
</head>
<body>
<header>
<a href="/datacentre/admin/index.php" title="Return to the homepage" id="logo">
<img src="/datacentre/images/cagd_logo.jpg" alt="CAGD logo"
style="width:30px;height:30px;"/>
</a>
<span class="headerspan">CAGD Data Centre</span>
<a href="/datacentre/webhelp/index.htm" title="Return to the homepage" id="helpfile">
help
</a>
</header>
<div class="nav-div" id="nav-div">
<nav>
<ul id="nav-ul">
<li>Home</li>
<li>Booking</li>
<li>Activities <span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Waiting Approval</li>
<li>Approved</li>
<li>Work in process</li>
<li>Completed</li>
</ul>
</div>
</li>
<li>Manage User<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Create User</li>
<li>Delete User</li>
</ul>
</div>
</li>
<li>Manage System<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Request Table</li>
<li>Update Event</li>
<li>Delete Event</li>
</ul>
</div>
</li>
<li>Report<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Main</li>
<li>Sort By<span class="caret"></span>
<div id=drop-down-div>
<ul>
<li>Name</li>
<li>Purpse</li>
</ul>
</div>
</ul>
</div>
</li>
<form id="search-form" method="post" action="search.php">
<input name="searcher" id="search-bar" type="text" placeholder="Type to Search">
<input id="search-button" type="submit" value="Find">
</form>
</ul>
</nav>
</div>
This is the main php file
<?PHP
session_start();
if (!(isset($_SESSION['login_user']) && $_SESSION['login_user'] != '')) {
header ("Location: loginForm.php");
}
?>
<?php
include('/templates/header.php');
$host = "localhost"; // Host name
$username = "root"; // Mysql username
$password = ""; // Mysql password
$db_name = "datacentre"; // Database name
$tbl_name = "data_centre_users"; // Table name
$server_name = "localhost";
// Create connection
$con = new mysqli($server_name, $username, $password, $db_name, 3306);
if($con->connect_error){
die("Connection failed: ".$con->connect_error);
}
// Check connection
if($con->connect_error){
die("Connection failed: ".$conn->connect_error);
}
$sql = "SELECT * FROM $tbl_name ";
$result = $con->query($sql);
function myDate($x){
if ( !strtotime($x)) {
return "00-00-0000 00:00:00";
}
else{
return strftime('%Y-%m-%dT%H:%M:%S',
strtotime($x));
}
return "";
}
?>
<section id="content">
<div class="outer-container">
<div class="inner-container">
<div class="table-header">
<table id="headertable">
<thead>
<tr>
<th class="center"><strong>ID</strong></th>
<th class="center"><strong>FirstName</strong></th>
<th class="center"><strong>Lastname</strong></th>
<th class="center"><strong>Department</strong></th>
<th class="center"><strong>Unit</strong></th>
<th class="center"><strong>Request</strong></th>
<th class="center"><strong>Purpose</strong></th>
<th class="center"><strong>Description</strong></th>
<th class="center"><strong>Booking Time</strong></th>
<th class="center"><strong>Access Time</strong></th>
<th class="center"><strong>Exit Time</strong></th>
<th class="center"><strong>Status</strong></th>
<th class="center"><strong>Approved / Denied By</strong></th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table id="bodytable">
<?php
if($result->num_rows > 0){
// output data of each row
while($rows = $result->fetch_assoc()){ ?>
<tbody>
<tr>
<td class="center"><?php echo $rows['id']; ?></td>
<td class="center"><?php echo $rows['first_name']; ?></td>
<td class="center"><?php echo $rows['last_name']; ?></td>
<td class="center"><?php echo $rows['department']; ?></td>
<td class="center"><?php echo $rows['unit']; ?></td>
<td class="center"><?php echo $rows['request']; ?></td>
<td class="center"><?php echo $rows['purpose']; ?></td>
<td class="center"><?php echo $rows['description']; ?></td>
<td class="center" >
<input name="booking_time" type="datetime-local" id="booking_time" value="<?php echo myDate($rows ['booking_time']); ?>" size="15">
</td>
<td class="center">
<input name="access_time" type="datetime-local" id="access_time" value="<?php echo myDate($rows ['access_time']); ?>" size="15">
</td>
<td class="center">
<input name="exit_time" type="datetime-local" id="exit_time" value="<?php echo myDate($rows['exit_time']);
?>" size="15" </td>
<td class="center"><?php echo $rows['status']; ?></td>
<td class="center"><?php echo $rows['approved_by']; ?></td>
</tr>
</tbody>
<?php
}
}
?>
</table>
</div>
</div>
</div>
</section>
<?php
$con->close();
function concantName($first , $second){
return $first." ".$second;
}
?>
</body>
</html>
This is the CSS code
* {
padding: 0;
margin: 0;
}
body {
height: 100%;
width: 100%;
}
table {
border-collapse: collapse;
}
.outer-container {
background-color: #ccc;
position: absolute;
top: 10em;
left: 10em;
right: 200em;
bottom: 40em;
height:400px;
width:400px;
}
.inner-container {
height: 100%;
overflow: hidden;
position:relative;
}
.table-header {
position: relative;
}
.table-body {
overflow: auto;
}
.header-cell {
background-color: yellow;
text-align: left;
height: 40px;
}
.body-cell {
background-color: blue;
text-align: left;
}
.col1, .col3, .col4, .col5 {
width: 120px;
min-width: 120px;
}
.col2 {
min-width: 300px;
}
Any suggestion for a solution

The console is telling you the problem. You have an error when the browser is trying to reach http://localhost/datacentre/admin/jquery-1.11.3.min.js
The file name is wrong or maybe not here at all.

Trying to get the links when clicked to show the data in the divs?

I am not sure why this is not working. When I click the links the data suppose to show up in the divs, but for some reason nothing is showing up. Anyone have any suggestion on why that is? I am not sure if my script is setup right.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>test</title>
<!-- Bootstrap core CSS -->
<link href="../css/bootstrap.css" rel="stylesheet">
<link href="../css/custom.css" rel="stylesheet">
<script>
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
</script>
</head>
<body>
<nav>
Received
<a href="#" target="_top" data-id="one">
<?php
//conects to the database
require_once("../db_connect.php");
$stmt = $db->prepare ("SELECT COUNT(*) AS rows_cnt FROM receivingrequests WHERE status='Received'");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['rows_cnt'];
}
?></a>
<br>
Info Div #2<br> Info Div #3
<br>
Info Div #4
</nav>
<div id="one" class="toggle_content">
<?php
//conects to the database
require_once("../db_connect.php");
//prepared statement with PDO to query the database
$stmt = $db->prepare("SELECT * FROM receivingrequests WHERE Status='RECEIVED'");
$stmt->execute();
?>
<?php //start of the while loop ?>
<?php while( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) { ?>
<table border="1" style="border: thin #000000; table-layout: fixed; width: 100%; background-color: #FFFFFF; display: table;" class="style1">
<tr>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Request#</strong></th>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Status</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Comments</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Date Requested</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Name</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Department</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>VasLblDate</strong></th>
</tr>
<tr>
<?php $id = $row['RequestNumber'];?>
<?php echo "<td> <a href='../update.php?id=$id'>$id</a></td>"?>
<td class="style2" style="width: 62px"><strong><?php echo $row['Status']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Comments']; ?></strong></td>
<td class="style2"><strong><?php echo $row['DATEREQUESTED']; ?></strong></td>
<td class="style2"><strong><?php echo $row['EmpName']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Department']; ?></strong></td>
<td class="style2"><strong><?php echo $row['VasLbDate']; ?></strong></td>
</tr>
</table>
<?php } //end of the while loop?>
</div>
<div id="two" class="toggle_content">Lorem ipsum... Two</div>
<div id="three" class="toggle_content">Lorem ipsum... Three</div>
<div id="four" class="toggle_content">Lorem ipsum... Four</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="../javascript/jquery.js"></script>
<script src="../javascript/bootstrap.js"></script>
</body>
</html>

I was using the wrong Jquery. I also needed to put the Jquery script at the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="favicon.ico">
<title>test</title>
<link href="../css/custom.css" rel="stylesheet">
</head>
<body background="../images/background.jpg">
<nav>
Received
<a href="#" target="_top" data-id="one">
<?php
//conects to the database
require_once("../db_connect.php");
$stmt = $db->prepare ("SELECT COUNT(*) AS rows_cnt FROM receivingrequests WHERE status='Received'");
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo $row['rows_cnt'];
}
?></a>
<br>
Info Div #2<br> Info Div #3
<br>
Info Div #4
</nav>
<div id="one" class="toggle_content">
<?php
//conects to the database
require_once("../db_connect.php");
//prepared statement with PDO to query the database
$stmt = $db->prepare("SELECT * FROM receivingrequests WHERE Status='RECEIVED'");
$stmt->execute();
?>
<?php //start of the while loop ?>
<?php while( $row = $stmt->fetch(PDO::FETCH_ASSOC) ) { ?>
<table border="1" style="border: thin #000000; table-layout: fixed; width: 100%; background-color: #FFFFFF; display: table;" class="style1">
<tr>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Request#</strong></th>
<th style="width:15%; background-color: #000000;color: #FFFFFF;" class="style3">
<strong>Status</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Comments</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Date Requested</strong></th>
<th style="width:20%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Name</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>Department</strong></th>
<th style="width:10%; background-color: #000000; color: #FFFFFF;" class="style3">
<strong>VasLblDate</strong></th>
</tr>
<tr>
<?php $id = $row['RequestNumber'];?>
<?php echo "<td> <a href='../update.php?id=$id'>$id</a></td>"?>
<td class="style2" style="width: 62px"><strong><?php echo $row['Status']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Comments']; ?></strong></td>
<td class="style2"><strong><?php echo $row['DATEREQUESTED']; ?></strong></td>
<td class="style2"><strong><?php echo $row['EmpName']; ?></strong></td>
<td class="style2"><strong><?php echo $row['Department']; ?></strong></td>
<td class="style2"><strong><?php echo $row['VasLbDate']; ?></strong></td>
</tr>
</table>
<?php } //end of the while loop?>
</div>
<div id="two" class="toggle_content">Lorem ipsum... Two</div>
<div id="three" class="toggle_content">Lorem ipsum... Three</div>
<div id="four" class="toggle_content">Lorem ipsum... Four</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
</script>
</body>
</html>
</body>
</html>

Also, for running any code you want to run after the page has fully loaded, get into the habit of surrounding your code with this:
$( document ).ready(function() {
...
});
So for the your page, you'll want this:
<script>
$( document ).ready(function() {
$('a').on('click', function() {
var div_id = $(this).data('id');
$('.toggle_content').hide();
$('#' + div_id).toggle();
});
});
</script>

As one of the other posters has mentioned, you need to add JQuery to your project.
First, create a folder called "jquery" inside your web-page's directory. Then download the latest JQuery js file and save it inside your the "jquery" directory.
The latest JQuery (accurate at the time of posting this comment) is here.
http://code.jquery.com/jquery-2.1.3.min.js
After that, add this code to where the other links are:
<link href="jquery/jquery-2.1.3.min.js" rel="stylesheet">
Then adjust your href as necessary depending on whether your web-page is in the root directory or one of the sub-directories for your site.