I did a lot of research concerning my question, but I didn't find an answer.
The tablesorter does not sort and I don't know why?.
Here is my test file. Can you tell me, what I'm doing wrong?
<html>
<head>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortable").tablesorter();
});
</script>
</head>
<body>
<table id="sortable">
<thead>
<tr>
<td>Username</td>
<td>Role</td>
</tr>
</thead>
<tbody>
<tr>
<td>SuperAdmin</td>
<td>SuperAdministrator</td>
</tr>
<tr>
<td>Simon</td>
<td>SuperAdministrator</td>
</tr>
<tr>
<td>Manfred</td>
<td>Administrator</td>
</tr>
<tr>
<td>test</td>
<td>test</td>
</tr>
</tbody>
</table>
</body>
</html>
I've got the jQuery file, the tablesorter.js...
the files are loaded correctly, cause I can read them (using firebug)...
Please help me, because I prefer not to write a tablesorter by myself.
For the headers (Username and Role), use <th> instead of <td>
See this JSFiddle
Use this:
<thead>
<tr>
<th>Username</th>
<th>Role</th>
</tr>
</thead>
Instead of:
<thead>
<tr>
<td>Username</td>
<td>Role</td>
</tr>
</thead>
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
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>
I've done a lot of searching and everyone says it is caused by including the DataTable script before jQuery, or double-including jQuery.
However, this is not the case for my code.
I keep getting $(...).DataTable is not a function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').DataTable();
});
</script>
</head>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped" >
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
https is secured connection.In your case you are using http in http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js which may be the source of the problem
$(document).ready(function() {
$('#myTable').DataTable();
});
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</div>
#Philip Tenn, I have checked the code with and without https. But I have no any issue with your code, its working fine.
You have a </div> at the end of your table that shouldn't be there, but otherwise your code works fine...
$(document).ready(function(){
$('#myTable').DataTable();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example of Employee Table with twitter bootstrap</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
</head>
<body style="margin:20px auto">
<table id="myTable" class="table table-striped" >
<thead>
<tr>
<th>ENO</th>
<th>EMPName</th>
<th>Country</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>001</td>
<td>Anusha</td>
<td>India</td>
<td>10000</td>
</tr>
<tr>
<td>002</td>
<td>Charles</td>
<td>United Kingdom</td>
<td>28000</td>
</tr>
<tr>
<td>003</td>
<td>Sravani</td>
<td>Australia</td>
<td>7000</td>
</tr>
<tr>
<td>004</td>
<td>Amar</td>
<td>India</td>
<td>18000</td>
</tr>
<tr>
<td>005</td>
<td>Lakshmi</td>
<td>India</td>
<td>12000</td>
</tr>
<tr>
<td>006</td>
<td>James</td>
<td>Canada</td>
<td>50000</td>
</tr>
<tr>
<td>007</td>
<td>Ronald</td>
<td>US</td>
<td>75000</td>
</tr>
<tr>
<td>008</td>
<td>Mike</td>
<td>Belgium</td>
<td>100000</td>
</tr>
</tbody>
</table>
</body>
</html>
Perhaps there is something else on your page that is interfering with it?
I have a datatable in which I am putting my data. You can see the code below. I want you to notice that; the code will work perfectly right now. However, when you uncomment the Mobile# from the code & then try searching using profile-ids (8 or 12); it doesn't show the records as it shows without mobile number. I am wondering why.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<!-- <th>Mobile#</th>-->
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<!-- <th>Mobile#</th>-->
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Keller</td>
<!--<td>12123123</td>-->
</tr>
<tr>
<td>2</td>
<td>Donald</td>
<td>Duck</td>
<!-- <td>12123123</td>-->
</tr>
</tbody>
</table>
Fiddle link ... : Fiddle link
This works for me. I cannot see any issues in Chrome at least
I can search for phone 1,2,3, and id 8 to find John, phone 4,5,6 and id 9 to find Duck
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>8</td>
<td>John</td>
<td>Keller</td>
<td>123</td>
</tr>
<tr>
<td>9</td>
<td>Donald</td>
<td>Duck</td>
<td>456</td>
</tr>
</tbody>
</table>
It seems that the search fields searches in all td elements if it contains that value, possibly using regular expressions for this?
I haven't worked with DataTables, but is there a way to set which field it should check in? That would most likely solve your problem.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script>
$(function() {
$(".datatable").DataTable();
});
</script>
<table class="datatable table table-bordered table-striped">
<thead>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Profile id</th>
<th>Name</th>
<th>Surname</th>
<th>Mobile#</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Keller</td>
<td>12123123</td>
</tr>
<tr>
<td>2</td>
<td>Donald</td>
<td>Duck</td>
<td>23232323</td>
</tr>
</tbody>
</table>
I am trying to find an OnClick Function that will work inside of a table.
When the page loads they content needs to be hidden, but given an option either but button or link to show it.
<div id="table-container">
<table id="maintable" border="1" cellspacing="0" cellpadding="1">
<thead>
<th class="blk" nowrap>Number</th>
<th class="blk" nowrap>Original Title</th>
<th class="blk" nowrap>Translated Title</th>
</thead>
<tbody>
<td class="lgt"><font size="4">2 Guns </font></td>
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
This is roughly what I am trying to do, is be able to hide
<tr><td class="lgt"><font size="4">Two Guns </font></td></tr>
<tr><td class="lgt"><font size="4">English, Spanish </font></td></tr>
<tr><td class="lgt"><font size="4">109 </font></td></tr>
and or unhide them..
I have tried using the below input..
<script language="javascript" type="text/javascript">
function showHide(shID) {
if (document.getElementById(shID)) {
if (document.getElementById(shID+'-show').style.display != 'none') {
document.getElementById(shID+'-show').style.display = 'none';
document.getElementById(shID).style.display = 'block';
}
else {
document.getElementById(shID+'-show').style.display = 'inline';
document.getElementById(shID).style.display = 'none';
}
}
}
</script>
<div id="wrap">
See more.</p>
<p>Hide this content.</p>
</div>
All that seems to do is lift the text in the cell of the table, and not the table..
UPDATE: Can't seem to get what exactly are you trying to do, so I'll try to cover the obvious.
I'm assuming you are coding the HTML yourself and not receiving the output of some server-side script, although that would be the most reasonable.
If you are coding the HTML, that means you can add classes, ids and tags as needed without problems. I would definitely do something entirely different but that would imply more convoluted code.
With multiple sections. A toggle per section:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
section = $(this).attr('data-section');
$(section + ' .hidethis').toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<caption>SECTION 1</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<table id='section-2' border="1">
<caption>SECTION 2</caption>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
<div class='toggle' data-section='#section-1'>Toggle section 1</div>
<div class='toggle' data-section='#section-2'>Toggle section 2</div>
</body>
</html>
One toggle per item:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src='http://code.jquery.com/jquery-1.11.1.min.js'></script>
<script>
$(document).ready(function(){
$('.hidethis').hide();
$('.toggle').click(function(){
$('.hidethis', $(this).parent()).toggle();
});
});
</script>
</head>
<body>
<table id='section-1' border="1">
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr class='toggle'>
<td>
Always visible<br/>
<small>Toggle this</small>
</td>
</tr>
<tr class="hidethis">
<td>Hide this</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
In this case, notice that in order to not over-complicate the jQuery code, you'll need some kind of container that parent both title and expandable content.
After much more searching about, I found this...
<html>
<head>
<script>
function toggle() {
if( document.getElementById("hidethis").style.display=='none' ){
document.getElementById("hidethis").style.display = '';
}else{
document.getElementById("hidethis").style.display = 'none';
}
}
</script>
</head>
<body>
<span onClick="toggle();">toggle</span><br /><br />
<table border="1">
<tr>
<td>Always visible</td>
</tr>
<tr id="hidethis">
<td>Hide this</td>
</tr>
<tr>
<td>Always visible</td>
</tr>
</table>
</body>
</html>
It worked a treat, the problem I found with it, was I couldn't work out how to make it do more than just 1 row.. But in the other posts someone mentioned using..
<tbody>
So I did over the ones I needed.. Now I have included a button and I am done with it :)
Thanks for your help though
Ok someone had helped me with this, and this was the solution to making it work a treat.
<script type='text/javascript'>
$(document).ready(function(){
$(document).on('keyup', '#search-box', function(){
$('#maintable tbody:not(.myContent)').each(function(){
var movieTitle = $(this).find('td:nth-child(2)').text();
if (RegExp($('#search-box').val(), 'i').test(movieTitle)) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
</script>
<tr><!-- FIX: Needed to wrap it in a row -->
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
<td class="lgt" style="height:120px;">Don't Hide</td>
</tr>
<tbody class="myContent" style="display:none;">
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This/td>
</tr>
<tr>
<td colspan="10"class="lgt">Hide This</td>
</tr><!-- FIX: close row -->
</tbody>