Trying to get the jquery visualization working. The table works fine and and the caption is rendering but there is no data in the chart. I've followed the example and searched for issues but not seeing what is going wrong. Nothing is breaking in the console just no data populating the chart. I've scaled it back thinking before my grid view table was causing the issue and hand coded a table but still the same results no chart. Here the whole page because its really not that much please let me know what I messed up.
Thanks in advance
<head>
<title>test chart</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<link href="Content/visualize-dark.css" rel="stylesheet" />
<link href="Content/visualize-light.css" rel="stylesheet" />
<link href="Content/visualize.css" rel="stylesheet" />
<script src="Scripts/visualize.jQuery.js"></script>
<script>
$(document).ready(function () {
$('table').visualize({ type: 'bar' });
});//end ready function
</script>
<body>
<table>
<caption>Test Data</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
</tbody>
It looks like this particular plugin won't work with jQuery version above 1.7.x
In this demo I am plugging your code with version 1.7.2 and it seems to work.
Related
I have a table with multiple columns. 1 column contains date in format dd.mm.yyyy (example: 26.05.2021). I'm trying to achieve a default sorting by date.
My table looks like this:
<table id="myTable" class="table table-striped table-hover" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text.</td>
<td>25.06.2021</td> <!-- This is the date column I want to sort by -->
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text</td>
<td>22.07.2020</td> <!-- This is the date column I want to sort by -->
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
So far, I have this JS at the end of my <body> in my HTML file:
<script type="text/javascript" href="https://cdn.datatables.net/plug-ins/1.10.25/sorting/date-eu.js"></script>
<script type="text/javascript">
$('#myTable').DataTable({
"language": {
"url": "https://cdn.datatables.net/plug-ins/1.10.18/i18n/Slovak.json"
},
columnDefs: [{
type: 'date-eu',
targets: 1
}],
"order": [
[1, "desc"],
[2, "desc"]
],
"pagingType": "first_last_numbers"
});
</script>
The issue is, that this does not order the table correctly. It seems to be ordering only by the day (ignoring month and year), not by the whole date.
Any ideas how to proceed?
I have tried all the available answers I was able to find here and also on the DataTables forums, but there weren't any answers which would fix my issue...
Thank you
Because you have two different date/time formats in your table (one for the column 2 date and one for the column 3 time), I recommend using the ultimate date/time sorting plug-in.
You need these extra resources in the page header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
Then, in the body script, you can define the two formats you need:
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
Formatting options for those two strings are documented here as part of the moment.js library.
DataTables takes care of the rest.
It looks through the list of date/time formats you have provided and automatically fits the correct format to the relevant column data. It then uses that format to ensure the data is sorted chronologically, while leaving the display format unchanged.
A demo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Text A</td>
<td>21.06.2021</td>
<td>15:10</td>
<td>Some Text 2</td>
</tr>
<tr>
<td>Some Text B</td>
<td>22.07.2020</td>
<td>16:00</td>
<td>Some Text XYZ</td>
</tr>
<tr>
<td>Some Text C</td>
<td>22.07.2020</td>
<td>15:59</td>
<td>Some Text XYZ</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Title</th>
<th>Date</th>
<th>Time</th>
<th>Notes</th>
</tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.fn.dataTable.moment( 'DD.MM.YYYY' );
$.fn.dataTable.moment( 'HH:mm' );
$('#example').DataTable( {
order: [
[1, "desc"],
[2, "desc"]
],
} );
} );
</script>
</body>
</html>
I am struggling to show footable pagination and still can't figure it out even though I checked documentation and all other examples. In the following code, two tables are tried in different ways and both don't show pagination. Does anyone could explain and point out what is needed to show pagination in this code ? Thanks.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.core.bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.css">
</head>
<body>
<table class="table footable table-striped" data-paging="true">
<thead>
<tr>
<th data-breakpoints = "xs">Col 1</th>
<th data-breakpoints = "xs">Col 2</th>
<th data-breakpoints = "xs">Col 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
<tr>
<td>test1</td>
<td>test2</td>
<td>test3</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
<table id="tblTesting" class="testingTable table table-striped" data-paging="true" data-page-navigation=".pagination" >
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.js"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery-footable/3.1.6/footable.paging.js"></script>
</body>
</html>
<script>
$(document).ready(function(){
$('.footable').footable();
$('#tblTesting').footable({
paging:{"enabled": true},
columns:[
{"name":"id","title":"ID","breakpoints":"xs sm","type":"number","style":{"width":80,"maxWidth":80}},
{"name":"firstName","title":"First Name"},
{"name":"lastName","title":"Last Name"},
{"name":"something","title":"Never seen but always around","visible":false,"filterable":false},
{"name":"jobTitle","title":"Job Title","breakpoints":"xs sm","style":{"maxWidth":200,"overflow":"hidden","textOverflow":"ellipsis","wordBreak":"keep-all","whiteSpace":"nowrap"}},
{"name":"started","title":"Started On","type":"date","breakpoints":"xs sm md","formatString":"MMM YYYY"},
{"name":"dob","title":"Date of Birth","type":"date","breakpoints":"xs sm md","formatString":"DD MMM YYYY"},
{"name":"status","title":"Status"}
],
"rows":[
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"},
{"id":1,"firstName":"Annemarie","lastName":"Bruening","something":1381105566987,"jobTitle":"Cloak Room Attendant","started":1367700388909,"dob":122365714987,"status":"Suspended"}
]
});
});
</script>
It's just because the data is small, try populating with over 10 or smth like that. Most pagination plugins use 10 for default.
I have been trying a lot since yesterday and looking at the following solutions but not working!
http://www.srccodes.com/p/article/27/make-html-table-sortable-jquery-tablesorter-plugin
http://tablesorter.com/docs/
Link the Following files:-
<!-- choose a theme file -->
<link rel="stylesheet" href="/path/to/theme.default.css">
<!-- load jQuery and tablesorter scripts -->
<script type="text/javascript" src="/path/to/jquery-latest.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.js"></script>
<!-- tablesorter widgets (optional) -->
<script type="text/javascript" src="/path/to/jquery.tablesorter.widgets.js"></script>
Use THEAD and TBODY in your HTML:-
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
use javascript function as follow:-
$(function() {
$("#myTable").tablesorter();
});
Its dependency says
Dependencies
jquery >=1.2.6
check https://plugins.jquery.com/tablesorter/
So, it should work with jquery version 1.8.3
Ad their github says
Works with jQuery 1.2.6+ (jQuery 1.4.1+ needed with some widgets).
Works with jQuery 1.9+ ($.browser.msie was removed; needed in the original version).
check https://github.com/Mottie/tablesorter.
I am getting the below error when I use the jQuery data table.
Error: Unable to get property 'mData' of undefined or null reference
Code
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#empTable').DataTable();
} );
</script>
<table id="empTable" class="display" width="100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>AAAAA</td>
<td>32</td>
<td>Colombo</td>
</tr>
<tr>
<td>BBBBB</td>
<td>29</td>
<td>Kandy</td>
</tr>
</table>
Please suggest me how to fix this issue?
Your html structure is not proper, you need to have a thead element where the header is specified and the content should be in tbody.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>
HTML structures in the table needs to match.
For instance, <th> tags in your <thead> with the <tr>'s in the <tbody>. That is, if in the table you expect 5 columns , there should be 5 <th> tags in the table head and 5 <tr> tags in the table body.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>
I have the code below, I have been fighting to get this to work, to the point where I copied the example from the tablesorter website. Can anyone help me with what I'm doing wrong? I've followed tutorial videos http://www.youtube.com/watch?v=-wAWfPVXlME
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Table</title>
<link rel="stylesheet" type="text/css" href="testTable.css">
<script src="jquery-1.8.3.min.js" type="text/javascript" ></script>
<script src="jquery.tablesorter.pager.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
</script>
</head>
<body>
<h4>Table Testing</h4>
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
Make sure you load the tablesorter core:
<script src="jquery-1.8.3.min.js"></script>
<script src="jquery.tablesorter.js"></script>
<script src="jquery.tablesorter.pager.js"></script>
And since it looks like you're using HTML5, the type="text/javascript" isn't needed inside the script tag.