How to apply script to a table
How to apply script to a table
fhaff
Posts: 9Questions: 0Answers: 0
Hello everybody.
I don't understand how to apply the DataTables script to my table, can you help me ?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Table - Brand</title>
<link rel="stylesheet" href="sortable-theme-dark.css" />
<script src="sortable.min.js"></script>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/shCore.css">
<link rel="stylesheet" type="text/css" href="assets/bootstrap/css/demo.css">
<style type="text/css" class="init"></style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/shCore.js"></script>
<script type="text/javascript" language="javascript" src="assets/js/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#myTable').DataTable();
} );
</script>
</head>
<body id="page-top">
<div id="wrapper">
<nav class="navbar navbar-dark align-items-start sidebar sidebar-dark accordion bg-gradient-primary p-0">
<div class="container-fluid d-flex flex-column p-0">
<a class="navbar-brand d-flex justify-content-center align-items-center sidebar-brand m-0" href="#">
<div class="sidebar-brand-icon rotate-n-15"><i class="fas fa-laugh-wink"></i></div>
<div class="sidebar-brand-text mx-3"><span>OPS FRANCE</span></div>
</a>
<hr class="sidebar-divider my-0">
<ul class="nav navbar-nav text-light" id="accordionSidebar">
<li class="nav-item" role="presentation"><a class="nav-link" href="index.html"><i class="fas fa-tachometer-alt"></i><span>Dashboard</span></a></li>
<li class="nav-item" role="presentation"><a class="nav-link active" href="table.html"><i class="fas fa-table"></i><span>Stock</span></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="login.html"><i class="far fa-user-circle"></i><span>Login</span></a></li>
<li class="nav-item" role="presentation"><a class="nav-link" href="register.html"><i class="fas fa-user-circle"></i><span>Register</span></a></li>
</ul>
</div>
</nav>
<div class="d-flex flex-column" id="content-wrapper">
<div id="content">
<nav class="navbar navbar-light navbar-expand bg-white shadow mb-4 topbar static-top">
<div class="container-fluid"><button class="btn btn-link d-md-none rounded-circle mr-3" id="sidebarToggleTop" type="button"><i class="fas fa-bars"></i></button><img src="assets/img/dogs/Fortinet_Logo.png" style="width: 312;padding: -80px;height: 19px;">
<form class="form-inline d-none d-sm-inline-block mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group"></div>
</form>
<ul class="nav navbar-nav flex-nowrap ml-auto">
<li class="nav-item dropdown d-sm-none no-arrow"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#"><i class="fas fa-search"></i></a>
<div class="dropdown-menu dropdown-menu-right p-3 animated--grow-in" role="menu" aria-labelledby="searchDropdown">
<form class="form-inline mr-auto navbar-search w-100">
<div class="input-group"><input class="bg-light form-control border-0 small" type="text" placeholder="Search for ...">
<div class="input-group-append"><button class="btn btn-primary py-0" type="button"><i class="fas fa-search"></i></button></div>
</div>
</form>
</div>
</li>
</ul>
</div>
</nav>
<table id="myTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th class="th-sm">Name
</th>
<th class="th-sm">Position
</th>
<th class="th-sm">Office
</th>
<th class="th-sm">Age
</th>
<th class="th-sm">Start date
</th>
<th class="th-sm">Salary
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name
</th>
<th>Position
</th>
<th>Office
</th>
<th>Age
</th>
<th>Start date
</th>
<th>Salary
</th>
</tr>
</tfoot>
</table>
</div>
<footer class="bg-white sticky-footer">
<div class="container my-auto">
<div class="text-center my-auto copyright"><span>Copyright © Brand 2020</span></div>
</div>
</footer>
</div><a class="border rounded d-inline scroll-to-top" href="#page-top"><i class="fas fa-angle-up"></i></a></div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/chart.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.js"></script>
<script src="assets/js/theme.js"></script>
</body>
</html>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This discussion has been closed.
Replies
One problem is you are loading
jquery.jstwice, once in line 20 then again in line 152. It should be loaded only once. Remove line 20 and move lines 21-23 below line 152. Load order is important and you don't want to duplicate any of the libraries.Kevin
Hello Kevin,
Thanks to highlight this problem
I fixed this error, unfortunately it doesn't solved my issue.
Thanks for your help
What happens?
Look in the browser's console for errors.
Post a link to your page or a test case so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Ok I solved the issue.
The problem was coming from the jQuery include...
Thanks again for your help
Regards