I am trying to implement the most basic installation of datatable, where I failed to initialize it. Here is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Dashboard </title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
I have added link to CSS and JS file via CDN, and also referred to my main.js file which is:
$(document).ready( function () {
$('#table_id').DataTable();
} );
However, when I opened this HTML file, the table is still in plain status and not rendered as the examples in this official document. Where did I do wrong?
Related
I would like to create an simple table in html doc. The table exists but I cant order and operate with the table. I'm a noob in html and js.
My result:
<link rel="stylesheet" type="text/css" href="static/datatables.min.css"/>
<script type="text/javascript" src="static/datatables.min.js"></script>
<table id="example" class="display">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
<tr><td>Jan Molby</td><td>12</td></tr>
<tr><td>Steve Nicol</td><td>8</td></tr>
<tr><td>Steve McMahon</td><td>9</td></tr>
<tr><td>John Barnes</td><td>15</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
It seems you are missing few things.
Like correct path to your CSS and JavaScript for your DataTable
You can use directly the CDN for DataTable, also don't forget to add the CDN for jQuery.
You can get the DataTable CDN from here DataTable CDN Link
Check below the sample code.
$(document).ready(function() {
$('#example').dataTable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Person</th>
<th>Monthly pay</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan Molby</td>
<td>12</td>
</tr>
<tr>
<td>Steve Nicol</td>
<td>8</td>
</tr>
<tr>
<td>Steve McMahon</td>
<td>9</td>
</tr>
<tr>
<td>John Barnes</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>£45,000</td>
</tr>
</tfoot>
</table>
you do something like below:
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Make sure you have added below two JS:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js
And CSS file:
https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
Documentation: https://datatables.net/examples/basic_init/table_sorting.html
I'm trying out DataTables, and I have a similar issue to this user:
how to use jquery datatable plugin properly.
When I try their code I actually have a proper DataTable. But if I use the latest versions of jQuery and DataTables, I only have a basic HTML table.
Are there some issues of compatibility between DataTables and jQuery?
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.css"/>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
});
</script>
</html>
EDIT : Thanks to Rory McCrossan, the links to datatables that I copy-pasted were indeed broken!
The problem is the order of your Js
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
Jquery needs to be initialized first:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
Example:
$(document).ready( function () {
$('#table_id').DataTable();
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
You have a problem - you're importing jQuery DataTables before you're importing jQuery itself. Change your script loading order:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
I have a simple table of domains and subdomains.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
</body>
</html>
I need to show/hide subdomains when I click on domain row.
I tried jQuery slideToggle
$(document).ready(function(){
$(document).on("click", "tbody tr:eq(1)", function(){
$("tbody tr:nth-child(1n+3)").slideToggle(1000);
});
});
It works fine when I specify row numbers manually, but I need to find them automatically for every domain/subdomains, because table will grow in size.
So I need to check subdomain_name textContent:
If it's empty - this is a domain. Add EventListener to it, so on click it will show/hide it's subdomains.
If it's not empty - check domain_name textContect and add to rows that need to be hidden.
You can add class for the <td> of domain name using following css selector, then loop through the rows and using .closest().
ThefirstIndex is to determine the row without subdomain value
$(document).ready(function(){
$('tr>td:nth-child(1)').addClass('domainTd');
$(document).on("click", ".domainTd", function(){
var domainName= $(this).text();
var firstIndex=true;
$('tr>td:nth-child(1)').each(function(index){
if($(this).text()===domainName){
if(firstIndex){
firstIndex=false;
}else{
$(this).closest('tr').slideToggle()
}
}
})
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Table</title>
</head>
<body>
<table>
<thead>
<th>doamin_name</th>
<th>subdoamin_name</th>
</thead>
<tr>
<td>bing.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td></td>
</tr>
<tr>
<td>google.com</td>
<td>images.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>mail.google.com</td>
</tr>
<tr>
<td>google.com</td>
<td>maps.google.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td></td>
</tr>
<tr>
<td>yahoo.com</td>
<td>stores.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>tw.news.yahoo.com</td>
</tr>
<tr>
<td>yahoo.com</td>
<td>view.yahoo.com</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I can't get DataTables to work. After displaying the page the Firefox Development Tools show this error: TypeError: invalid 'in' operand a.
Does somebody know the solution to this problem? This is my code:
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.dataTables.min.css" rel="stylesheet">
<!-- <link href="css/dataTables.bootstrap.css" rel="stylesheet"> -->
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
</body>
</html>
Like Sirko mentioned, updated to datatables 1.10.9 & this solved the problem.
i am using datatable to search the table content.but datatable cant work in my html code
I want to introduce filtering and sorting functionality to my table .all the table library included in the html script
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<script type="text/javascript">
$('table').dataTable();
</script>
<table style="margin-top:100px">
<thead>
<tr class='header'>
<th>Name</th>
<th>Party</th>
<th>Constituency</th>
<th>Gender</th>
</tr>
</thead>
<tbody><tr>
<th>pom</th>
<th>1</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>santosh</th>
<th>2</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>deepak</th>
<th>3</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>sudhir</th>
<th>1</th>
<th>savarde</th>
<th>male</th>
</tr>
</tbody>
</table>
</body>
</html>
Since you've placed your script before your DOM, you need to put your jQuery code inside DOM ready handler $(document).ready(function() {...}); or shorter form $(function(){...}):
This step is used to make sure all of your DOM elements have been loaded to the page before executing your jQuery code:
$(function() {
$('table').dataTable();
});
Try this code now work fine:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
</head>
<body>
<script type="text/javascript">
$('table').dataTable();
</script>
<table style="margin-top:100px" class="table table-striped table-bordered datatable dataTable">
<thead>
<tr class='header'>
<th>Name</th>
<th>Party</th>
<th>Constituency</th>
<th>Gender</th>
</tr>
</thead>
<tbody><tr>
<th>pom</th>
<th>1</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>santosh</th>
<th>2</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>deepak</th>
<th>3</th>
<th>bachni</th>
<th>male</th>
</tr>
<tr>
<th>sudhir</th>
<th>1</th>
<th>savarde</th>
<th>male</th>
</tr>
</tbody>
</table>
<script>
$(function() {
$('table').dataTable();
});
</script>
</body>
</html>
please check this fiddle