Please help me, again. Because I'm newbie.
i've problem with my datatable. when i load in my chrome, it give me feedback like this:
i try to add this code, but it also doesnt work. what must i do?
<script type="text/javascript">
$(document).ready(function(){
siswa.php code:
<?php
$this->load->view('admin/head.php');
?>
<body>
<div class="wrapper">
<div class="col-sm-12">
<div class="card">
<div class="card-body">
<h4 class="card-title">Data Berhasil Dimasukkan</h4>
<br>
<a class="btn btn-info" href="<?php echo site_url("admin/nav_admin");?>" role="button" float="right">Back To</a>
<br>
<br>
<table class="table table-striped" style="width:100%">
<thead>
<tr>
<th style="width:20%">NISN</th>
<th style="width:35%">Nama</th>
<th style="width:15%">Jenis Kelamin</th>
<th style="width:20%">Nilai</th>
<th style="width:20%">Jurusan</th>
</tr>
</thead>
<tbody>
<?php
if( ! empty($import)){ // Jika data pada database tidak sama dengan empty (alias ada datanya)
foreach($import as $data){ // Lakukan looping pada variabel siswa dari controller
echo "<tr>";
echo "<td>".$data->nisn."</td>";
echo "<td>".$data->nama."</td>";
echo "<td>".$data->jenis_kelamin."</td>";
echo "<td>".$data->nilai_rata."</td>";
echo "<td>".$data->kode_jurusan."</td>";
echo "</tr>";
}
} else{ // Jika data tidak ada
echo "<tr><td colspan='4'>Data tidak ada</td></tr>";
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript"> // uncaught referenceerror $ is not defined in datatable
$(function(){
$("table").DataTable();
});
</script>
here's the head.php code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Halaman Admin</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="<?php echo base_url('assets/css/stylesidebar.css');?>">
<!-- Font Awesome JS -->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
</head>
Put your js code in:
jQuery(function($){
});
Related
I have created only one file index.php
in the header part I have included CSS link form the datatables.net
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<title>Crud application</title>
</head>
I have given the id as table in body section
<table class="table" id="mytable">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Title</th>
<th scope="col">Descriptioin</th>
<th scope="col">Action</th>
</tr>
</thead>
I have included JS CDN from datables.net and also the function at the end of the body tag
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
but the tables are displaying as shown in the datatables.net.
there are no errors in the console.
full code
<?php
//INSERT INTO `note` (`sno`, `title`, `description`, `tstamp`) VALUES (NULL, 'Buy fruits', 'buy fruits now', current_timestamp());
$insert = false;
$server = "localhost";
$user = "root";
$password = "";
$dbase = "notes";
// create a connection
$conn = mysqli_connect($server, $user, $password, $dbase);
// die connection if not connected
if(!$conn){
die("sorry connection not established".mysqli_connect_error());
}
// updating the database
if($_SERVER['REQUEST_METHOD'] == 'POST'){
$title = $_POST['title'];
$description = $_POST['description'];
}
global $title; global $description;
// adding the query
$sqld = "INSERT INTO `note` (`title`, `description`) VALUES ('$title', '$description')";
$resultd = mysqli_query($conn, $sqld);
// checking the query wether updated
if($resultd){
//echo "success";
$insert = true;
}
else{
echo "not success". mysqli_connect_error();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
<title>Crud application</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">PHP Crud</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact us</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<?php
if($insert){
echo"<div class='alert alert-success alert-dismissible fade show' role='alert'>
<strong>Success</strong> your notes submitted successfully.
<button type='button' class='close' data-dismiss='alert' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>";
}
?>
<div class="container my-4">
<form action="/crud/index.php" method="POST">
<h2>Add a note</h2>
<div class="form-group">
<label for="title">Note title</label>
<input type="text" class="form-control" id="title" name="title" aria-describedby="emailHelp" placeholder="note">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="description">note description</label>
<textarea class="form-control" id="description" name="description" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary">Add note</button>
</form>
</div>
<div class="container">
<table class="table" id="mytable">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Title</th>
<th scope="col">Descriptioin</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT * FROM `note`";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_assoc($result)){
echo "<tr>
<th scope='row'>". $row['sno']."</th>
<td>". $row['title']."</td>
<td>". $row['description']."</td>
<td>Actions</td>
</tr>";
}
?>
</tbody>
</table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready( function () {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
6) screenshot
screentshot of tables
(1) Change $('#myTable').DataTable(); to $('#mytable').DataTable();
this worked fine for me and displayed my search table
I am using DataTables to have a pagination.
I think I set the script correctly, since I followed the instruction in their website. But feel free to pinpoint if there's any wrong/mistake to the indicated script link
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin Reservation Management</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/datepicker3.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
<!--Custom Font-->
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
td,tr {
white-space: nowrap;
width: 45%;
}
th{
text-align: center;
}
form {
display: inline;
}
</style>
</head>
And now this is my table and stuff, I am fetching the datas from my database.
I did some research here in Stackoverflow, regarding to this issue and the results that I've found was they did not put and which I included, but feel free to pinpoint if I haven't included any.*
php
<div class="col-sm-9 col-sm-offset-3 col-lg-10 col-lg-offset-2 main">
<div class="row">
<ol class="breadcrumb">
<li> <em class="fa fa-home"></em></li>
<li class="active">Manage Room</li>
</ol>
</div>
<div class="row">
<div class="col-lg-12">
<br>
<h3> Super Admin Reservation Management </h3>
<hr>
<!-- ################### FUNCTIONALITY ####################### -->
<!-- ################### FUNCTIONALITY ####################### -->
<div class="container">
</div>
<br>
<div class="container">
<table class="table table-bordered" id="myTable" style="background-color: white;" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th> Room Number</th>
<th> Room Availability </th>
<th> Action </th>
</tr>
</thead>
<!-- ############################################# FETCHING DATA FROM THE DATABASE ######################################################### -->
<?php
$connection = mysqli_connect("localhost", "root");
$db = mysqli_select_db($connection, 'db_hotelreservation');
$query = "SELECT * FROM tbl_reservation WHERE room_status = 'Pending' OR room_status ='Booked'";
$query_run = mysqli_query($connection, $query);
$resultCheck = mysqli_num_rows($query_run);
if($resultCheck > 0)
{
while($row = mysqli_fetch_assoc($query_run))
{
?>
<tbody>
<tr>
<td style="display: none;"> <?php echo $row['ID'];?> </td>
<td> <?php echo $row['room_number']; ?></td>
<td> <?php echo $row['room_status'];?></td>
<td style="display: none;"> <?php echo $row['room_type'];?> </td>
<td style="display: none;"> <?php echo $row['first_name'] . " " .$row['last_name']?> </td>
<td style="display: none;"> <?php echo $row['check_in'];?> </td>
<td style="display: none;"> <?php echo $row['check_out'];?> </td>
<td style="display: none;"> <?php echo $row['contact_number'];?> </td>
<td style="display: none;"> <?php echo $row['numberof_days'] ." ". "day/s";?> </td>
<td style="display: none;"> <?php echo $row['calculated_price'];?> </td>
<td>
<form action="approve.php" method="POST" onclick="return confirm('Are you sure you want to Approve this Booking?');">
<input type="hidden" name="id" value="<?php echo $row['ID'] ?>" style="">
<input type="submit" name="update" class="btn btn-success" value="Approve">
</form>
<button type="button" class="btn btn-primary viewbtn">View Details</button>
</td>
</tr>
</tbody>
<?php
}
}
else{
echo "No Records Found";
}
?>
</table>
</div>
</div>
</div>
</div>
This might be because of delayed data binding, you can try datatable ajax approach to bind the data. Refer datatable option.
Please, can you help me with integration datatables bootstrap on my simple table? I add this code, and not working for me.
I also tried to add links of scripts to head, but not working too. What am I doing wrong in this code?
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
</html>
You had three problems one I didnt notice and one I found out while helping.
You called your jquery before your script was loaded(My comments on the post are wrong). Call this after the script loads this is why people were telling you to add your scripts into the head.
You used two versions of jQuery. This should not
be done as the final jQuery to load will be the one you use. If you intend to use multiple jQuery files look at no conflict between versions
You load jQuery after bootstrap where it should load before because bootstrap uses jQuery.
Below will run if you want to test it. Change the script urls to your local ones and it should still run. change the css links too to your local one
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css"></link>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h3>Požičovňa náradia SEAS</h3>
</div>
<table id="tabulka_kariet" class="table table-bordered">
<thead>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Kód karty</th>
<th>Názov karty</th>
<th>Počet ks na všetkých skladoch</th>
</tr>
</tfoot>
<tr>
<td>13245</td>
<td>Sekacie kladivo Bosch 5184</td>
<td class="pocet">12</td>
</tr>
<tr>
<td>6789</td>
<td>Brúska Bosch 5184</td>
<td class="pocet">7</td>
</tr>
</table>
<?php
?>
</div>
</body>
<!-- Jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<!-- Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('#tabulka_kariet').DataTable();
});
</script>
</html>
As said in the comments you need to place the jQuery scripts above the bootstrap link. This is because bootstrap needs jQuery to work so you need to load jQuery before bootstrap loads
Try it like this:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="bootstrap/js/bootstrap.min.js" />
<script src="jquery/jquery-3.0.0.min.js" />
<script src="jquery/dataTables.bootstrap.min.js" />
<script src="jquery/jquery.dataTables.min.js" />
<script src="jquery/jquery-1.12.4.js" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="jquery/dataTables.bootstrap.min.css" />
</head>
Using PHP, I am trying to get data and display it using a bootstrap modal.
I can't get the bootstrap modal to open.
My PHP code connects to the server and database, and sends the information back, but since the modal does not work, it can't display the data received.
I also tried to activate the modal using JavaScript, but it still did not work.
Here is my code:
<html lang="en">
<div id="head">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<img id="JLogo" src="ACILogo.png" alt="">
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting"><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color: white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body" style="padding:40px 50px;">
<?php
if($_SERVER["REQUEST_METHOD"]="GET"){
if (isset($_GET['uni_name']) && is_string($_GET['uni_name'])) {
$uname = $_GET['uni_name'];
} else {
$uname = "";
}
}
$con = mysqli_connect('', '', '', '');
if ($con->connect_errno) {
echo "
<script> alert('We are experiencing problems.') </script>";
exit;
}
$sql = "SELECT * FROM students WHERE university like '%".$uname."%'";
if (!$result = $con->query($sql)) {
echo "
<script> alert('Sorry, the website is experiencing problems.') </script>";
exit;
}
if ($result->num_rows === 0) {
echo "
<script> alert('We could not find a match for ID ".$uname.", sorry about that. Please attempt again.') </script>";
exit;
} else {
echo "<ul>
";
while($row = $result->fetch_assoc()){
echo sprintf("
<li>%s %s - %s</li>", $row["firstName"], $row["lastName"], $row["university"]);
//echo sprintf("
<li>%s</li>", $row["lastName"]);
//echo sprintf("
<li>%s</li>", $row["university"]);
}
echo "
</ul>";
}
$result->free();
$con->close();
?>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
</body>
</html>
The main reason it is not working is because "Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3". Then you can in your own words "activate it using javascript" (jQuery).
There's a lot wrong with your HTML as well, but even while leaving that in place, using for example jQuery 1.12.4 makes the difference (left out your PHP):
<html lang="en">
<div id="head">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css"
integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" type="text/css" href="stylesheet.css" media="screen">
<title> IUC Alumni Connect </title>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-md-4">
<img id="JLogo" src="ACILogo.png" alt="">
</div>
<div class="col-md-7">
<h1 id="JTitle" class="greeting" ><b> Welcome to the IUC Reachout Page </b></h1>
<p id="JExplanation" class="greeting"> Find alumni, contact them, make the right choices.</p>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
<style>
.modal-header, h4, .close {
background-color: #5cb85c;
color:white !important;
text-align: center;
font-size: 30px;
}
.modal-footer {
background-color: #f9f9f9;
}
</style>
</div>
<body>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="padding:35px 50px;">
<h4><span class="glyphicon glyphicon-search"></span>Results</h4>
</div>
<div class="modal-body">
<p>Put your php code here</p>
</div>
<div class="modal-footer">
<button onclick="graduateYearPage.html" type="submit" class="btn btn-danger btn-default pull-left" data-dismiss="modal">Return to search </button>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#myModal').modal();
});
</script>
</body>
</html>
So I followed everything on the basic example at : http://datatables.net/examples/basic_init/zero_configuration.html
Unfortunately, My current table stays in the bootstrap style and nothing of the DataTable is shown, No errors occurred. If you see anything wrong please let me know.
Table design :
<div class="table-responsive">
<table class="table table-hover" id="mw_table">
<thead>
<th>Volledige naam</th>
<th>E-mail</th>
<th></th>
<th></th>
</thead>
<tbody>
#foreach($medewerkers as $medewerker)
<tr>
<td>{{$medewerker->voornaam . ' ' . substr($medewerker->tussenvoegsel,0,5) . ' ' . $medewerker->achternaam}}</td>
<td>{{$medewerker->email}}</td>
<td>
{{--<input type="hidden" class="zoeknaam2" value="{{$project->projectnaam}}" name="zoeknaam2" class="form-control" placeholder="Projectnaam">--}}
<button class="btn btn-success btn-xs wijzigKnop2" name="zoekProject" type="button" data-project="{{$medewerker->email}}">
<i class="glyphicon glyphicon-pencil"></i>
</button>
</td>
<td>
<a href="/verwijderGebruiker/{{$medewerker->id}}" class="">
<button type="submit" class="btn btn-danger btn-xs">
<i class="glyphicon glyphicon-remove"></i>
</button>
</a>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
JavaScript code:
<script type="text/javascript">
$(document).ready( function () {
$('#mw_table').DataTable();
} );
</script>
Includes:
<script src="{{URL::asset('../assets/js/bootstrap.min.js')}}"></script>
<script type="text/javascript" src="{{URL::asset('../assets/js/jquery.js')}}"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.10/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
got it working. builded an new datatables library in the Downloader of their website and voila!