This question already has answers here:
Can the <script> tag not be self closed?
(4 answers)
Closed 5 years ago.
I have the below html code and i have included few js files in it. Only jquery file loads while the other 2 files don't . Can someone point out where i am going wrong. When i check in network tab through inspect element , i see that the request for the other js files haven't hit at all.
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css">
<style>
div.container { max-width: 1200px }
</style>
</head>
<body>
<table id="example" class="display compact nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Rhona</td>
<td>Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>2010/10/14</td>
<td>$327,900</td>
<td>6200</td>
<td>r.davidson#datatables.net</td>
</tr>
<tr>
<td>Colleen</td>
<td>Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$205,500</td>
<td>2360</td>
<td>c.hurst#datatables.net</td>
</tr>
</tbody>
</table>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.js"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"/>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"/>
<script>
$(document).ready(function() {
var table = $('#example').DataTable( {
responsive: true
} );
} );
</script>
</html>
<script> is not a self closing tag. Try the following:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script> tag may have some problems with the self-closing form. Try this:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
Related
This question already has answers here:
How can I remove the search bar and footer added by the jQuery DataTables plugin?
(22 answers)
Closed 3 months ago.
I've a custom search bar built into my website, and I wanted to hide the default Datatables search bar, I still need the search function but without the default search...
I've tried to hide the default search bar by using CSS, but it didn't work I also tried to disable bInfo and bFilter but it will disable the search function completely...
Here is some code:
<script>
var oTable = $('#players_tools').DataTable({
paging: false,
info: false,
//searching: hide...
});
$('#players_search_tool').keyup(function() {
oTable.search($(this).val()).draw();
});
</script>
If you check the example you can see that it contains
<div id="example_filter" class="dataTables_filter"
you can use
$(".dataTables_filter").hide();
to hide that part.
Let's try it:
$(document).ready(function () {
$('#example').DataTable();
$(".dataTables_filter").hide();
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>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>
</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>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
Sorry for asking very newbie question, but I am completely new to web development and trying to build a simple 1-page site which will reflect some "table" data using DataTables package. I tried enomorous amount of different ways to initiate it, but with not much success.
What I am doing wrong? My code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#example').DataTable();
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
</body>
</html>
Assuming you mean this plugin: https://datatables.net/
You are using an old version of jQuery that is not compatible with this plugin. 1.11.3 is really old and it's highly recommended to update. Using the latest (SO) version of jQuery will fix your problem as you can see in the snippet below. Any 3.x version should do the job.
$(document).ready(function () {
$('#example').DataTable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
</tbody>
</table>
Responsive Datatable with child rows works on DataTables own page example, but the same code dosen't work on my HTML page. No '+' button shows and all the child columns are included in the main table. I have tried using all the examples but getting the same result.
table without expand/collapse icon
I'm using this example for this question
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/responsive/2.2.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
order: [ 1, 'asc' ]
} );
} );
</script>
</head>
<body>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
</tr>
<tr>
<td></td>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
</tr>
</tbody>
<tfoot>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
</tr>
</tfoot>
</table>
</body>
</html>
Also, copying the whole source of the example page in local html gives the same result. But the example in the page itself i.e. by opening page as link in datatables site works in chrome.
as I said in the forum, it does work - have you tried resizing the screen? Bear in mind you only see the child rows when the screen has shrunk enough that the whole line cannot be displayed.
I want display all data using datatables. But I want this data to automatically (animate) scroll each row every 3 seconds
This is my code and this is my jsfiddle
I want to show data on a BIG screen.
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css">
<script type="text/javascript" src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.0/css/dataTables.responsive.css">
<script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.0/js/dataTables.responsive.js"></script>
<style type="text/css">
table th:nth-child(3), td:nth-child(3) {
display: none;
}
</style>
<title>jQuery Datatables responsive example</title>
<script type='text/javascript'>
$(window).load(function(){
$(document).ready(function() {
$('#example').DataTable({
"scrollX": true,
"animate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo" : false,
"paging": false
});
});
});
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<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>
</table>
</body>
</html>
Help me, thanss
You can user delay() like this:
$(document).ready(function() {
$('#example').DataTable({
"scrollX": true,
"animate": true,
"bLengthChange": false,
"bFilter": false,
"bInfo" : false,
"paging": false
});
$('#example > tbody > tr').each(function() {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 200).delay(2800);
});
} );
fiddle
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
I have used this even though it is not workin..
I am assuming based on your questing you are not able to sort your table by using jQuery plugins you have used.
For sorting your table first of all you have to add css and js file (check in following code and then in javascript code give your table ID (here id is example).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<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>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
</body>