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>
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.
I'm following the demo example provided at tablesorter. I have confirmed that jquery is working properly. However, I tried recreating the demo and jquery.tablesorter.js is not producing any changes at all. The output is still a pure HTML text table.
What am I missing?
myTable.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../js/myTable.js"></script>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/__jquery.tablesorter/jquery.tablesorter.js"></script>
</head>
<body>
<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>
myTable.js
$(document).ready(function()
{
$("#myTable").tablesorter();
}
);
Move jQuery and tablesorter inclusion before js/myTable.js:
<head>
<script type="text/javascript" src="../js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="../js/__jquery.tablesorter/jquery.tablesorter.js"></script>
<script type="text/javascript" src="../js/myTable.js"></script>
</head>