<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Dansk Kancelli</title>
<meta charset="utf-8" lang="da">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#tdata').dataTable( {
responsive:true,
select: true,
} );
} );
</script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Main page start-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:80%; margin-top: 10px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;"> <br>
<div id="KcList" class='list' ></div>
<hr style= 'border-color: #9F5584; margin-bottom:0px; margin-top:0px;'>
<br>
<div class="w3-row"> <!-- for content inside this column -->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile" style="width:15%; margin-top: 10px; margin-left: 10px; margin-bottom:10px;">
<div class="container" style="border: 1px solid #666666; margin-top: 20px; margin-bottom: 20px;"><h5>Interessante og meget anvendte arkivalier, herunder fra Dansk Kancelli, Suppliker og Registre og Tegnelser</h5>
</div>
<img src= "Praest_der_laeser.png" alt="Slægtsforsker" style="width:100%; border: solid 1px #cccccc;">
</div>
<!-- Column3 end-->
<script>
$('#KcList > table').remove();
$.ajax({
url: 'ajaxFtListHtml.php',
//data: $('#search').serialize(),
method:'POST',
dataType: 'html'
}).done(function (res){
$('#KcList').html(res);
$('#tdata').DataTable({select: true, searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []});
});
</script>
</div>
<!-- Main page end-->
</body>
</html>
</div>
<!-- Page content end-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
ASKER
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Dansk Kancelli</title>
<meta charset="utf-8" lang="da">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.4/css/select.dataTables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Main page start-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:80%; margin-top: 10px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;"> <br>
<div id="KcList" class='list' ></div>
<hr style= 'border-color: #9F5584; margin-bottom:0px; margin-top:0px;'>
<br>
<div class="w3-row"> <!-- for content inside this column -->
</div>
</div>
<!-- Column1, end-->
<!-- Column3 start-->
<div class="w3-col w3-mobile" style="width:15%; margin-top: 10px; margin-left: 10px; margin-bottom:10px;">
<div class="container" style="border: 1px solid #666666; margin-top: 20px; margin-bottom: 20px;"><h5>Interessante og meget anvendte arkivalier, herunder fra Dansk Kancelli, Suppliker og Registre og Tegnelser</h5>
</div>
<img src= "Praest_der_laeser.png" alt="Slægtsforsker" style="width:100%; border: solid 1px #cccccc;">
</div>
<!-- Column3 end-->
<script>
$('#KcList > table').remove();
$.ajax({
url: 'ajaxFtListHtml.php',
//data: $('#search').serialize(),
method:'POST',
dataType: 'html'
}).done(function (res){
$('#KcList').html(res);
$('#tdata').dataTable({select: true, searching: true, paging: false, info: false, "dom": '<"top"<if>', order: []});
});
</script>
</div>
<!-- Main page end-->
</body>
</html>
</div>
<!-- Page content end-->
<?php
$con = mysqli_connect("db credentials");
// Check connection
if($con === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
mysqli_select_db($con,"genealogisk_dk_db5");
mysqli_set_charset($con,"utf8");
$raw_results = mysqli_query($con, "SELECT * FROM danske_kancelli")
or die(mysql_error());
//var_dump($raw_results);
if(mysqli_num_rows($raw_results) > 0){ ?>
<div class="w3-row w3-mobile" style="width:100%; font-size: 12px">
<table id="tdata" style="width:100%;" class="dataTable">
<thead>
<tr>
<th class="sorting" aria-controls="tdata">Sted</th>
<th class="sorting" aria-controls="tdata">Fra</th>
<th class="sorting" aria-controls="tdata">Til</th>
<th class="sorting" aria-controls="tdata">Register</th>
<th class="sorting" aria-controls="tdata">Journal</th>
</tr>
</thead>
<?php while($row = $result=mysqli_fetch_array($raw_results)): ?>
<tr>
<td><?php echo $row["sted"] ?></td>
<td><?php echo $row["fra_aar"] ?></td>
<td><?php echo $row["til_aar"] ?></td>
<td><?php echo "<a href=\"".$row["url"]."\"target=\"_blank\">" . $row["register"] ?></td>
<td><?php echo "<a href=\"".$row["infourl"]."\"target=\"_blank\">" . $row["journal"] ?></td>
</tr>
<?php endwhile; ?>
</table>
</div>
<?php
mysqli_close($con);
}
?>
ASKER
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
You also look to have a slight error in your "dom" property. It should be this:"dom": '<"top"if>t'
You have a mismatch in the brackets and no T element.
ASKER
<?php
session_start();
error_reporting(E_ALL);
ini_set('display_errors', 1);
?>
<!DOCTYPE html>
<html lang="da">
<head>
<!-- Check for title-->
<title>Dansk Kancelli</title>
<meta charset="utf-8" lang="da">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.4/js/dataTables.select.min.js"></script>
</head>
<body>
<!-- Page content start-->
<div class="w3-row" style="overflow: auto">
<!-- Main page start-->
<div class="w3-row">
<!-- Column1 start-->
<div class="w3-col w3-mobile" style="width:80%; margin-top: 10px; margin-left: 20px; margin-bottom:10px; padding-bottom: 10px;"> <br>
<div id="KcList" class='table' ></div>
<hr style= 'border-color: #9F5584; margin-bottom:0px; margin-top:0px;'>
<br>
<div class="w3-row"> <!-- for content inside this column -->
</div>
</div>
<!-- Column1, end-->
<!-- Column2 start-->
<div class="w3-col w3-mobile" style="width:15%; margin-top: 10px; margin-left: 10px; margin-bottom:10px;">
<div class="container" style="border: 1px solid #666666; margin-top: 20px; margin-bottom: 20px;"><h5>Interessante og meget anvendte arkivalier, herunder fra Dansk Kancelli, Suppliker og Registre og Tegnelser</h5>
</div>
<img src= "Praest_der_laeser.png" alt="Slægtsforsker" style="width:100%; border: solid 1px #cccccc;">
</div>
<!-- Column2 end-->
<script>
$('#KcList > table').remove();
$.ajax({
url: 'ajaxFtListHtml.php',
method:'POST',
dataType: 'html'
}).done(function (res){
$('#KcList').html(res);
$('#tdata').DataTable({responsive: true, searching: true, paging: false, info: false, select: true, "dom": '<"top"if>t', order: []});
});
</script>
</div>
<!-- Main page end-->
</body>
</html>
</div>
<!-- Page content end-->
ASKER
ASKER
ASKER
$('#example').dataTable();
$('#example').DataTable();
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
TRUSTED BY
Also, line 78 references "DataTable" which is the OLD version of dataTable. It should be dataTable, not DataTable.
Also, why do you init dataTable twice? Line 30 & 78.
I have a basic demo here: https://jsfiddle.net/zephyr_hex/h13awjns/1/