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.
Related
I am attempting to format my table using DataTables, however I can't seem to get it working properly. I searched stack overflow, youtube, and the DataTables website for solutions and I have tried everything that I have found but still haven't gotten the result I'm looking for, particularly a horizontal scroll bar. I am very new to html and javascript so any help would be much appreciated.
Here are some of the changes I have tried, but there are many more I cannot remember.
using scrollX: true instead of "sScrollX" : "100%
setting the style tag of the table to style="overflow-x:auto;"
Removing the divs before the table
Here is what my code currently looks like:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#recon-table').DataTable({
"sScrollX": "100%",
"sScrollXInner": "110%"
});
});
</script>
<html>
<head>
<title>Recon Table</title>
</head>
<body>
<div class="box-transparent">
<div class="box-content table-scroll-box">
<table class="display nowrap" id="recon-table" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Username</th>
<th>Date of Birth</th>
<th>Language</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>somet#email.com</td>
<td>1234567890</td>
<td>uname</td>
<td>English</td>
<td>Male</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Your HTML is the issues, your missing a td tag line for the DOB column, just add that and it should work like so:
$(document).ready(function() {
$('#example').DataTable({
scrollX: true,
});
});
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Username</th>
<th>Date of Birth</th>
<th>Language</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>somet#email.com</td>
<td>1234567890</td>
<td>uname</td>
<td>01-June-1982</td>
<td>English</td>
<td>Male</td>
</tr>
</tbody>
</table>
I hope this helps
I am trying to use Datatables with the responsive plugin. The Datatables table works correctly until I add the responsive option. The Table immediately drops the last column and when shrinking the screen the table does not collapse properly.
I removed all my local resources and loaded from CDN and problem still exists. No errors in console. I have played around with table format and just cant get to work correctly. What is weird is my code works correctly in a Jsfiddle but when loaded using Codepen I get same problem as on my local server.
<!--Bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Datatables Bootstrao -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<!-- Datatables Responsive -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap4.min.css">
<div class="container">
<div class="row">
<div class="col-12">
<table id="users" class="table table-striped table-sm">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Groups</th>
<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Admin</td>
<td>istrator</td>
<td>admin#admin.com</td>
<td>
admin<br />
members<br />
</td>
<td>Inactive</td>
<td>Edit | Delete</td>
</tr>
<tr>
<td>Test</td>
<td>User</td>
<td>test#admin.com</td>
<td>
admin<br />
members<br />
</td>
<td>Inactive</td>
<td>Edit | Delete</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Bootstrap -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<!-- Datatables -->
<script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js" type="text/javascript"></script>
<!-- Responsive -->
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.2/js/responsive.bootstrap4.min.js"></script>
<!-- Datatables Call function -->
<script type="text/javascript">
$(document).ready( function () {
$('#users').DataTable({
responsive: true,
});
});
</script>
Here is a codepen of the result.
https://codepen.io/xxnumbxx/pen/vYBGdmO
Solved. The table requires: style="width:100%" attribute with bootstrap 4.
How do I create a datatables-table? I have a table, but datatables is not working (search table, pagination, dropdown and sort by).
I'm using the CDN-version of CSS and JavaScript for datatables, but it's still not working.
This is my code:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<!-- DATATABLE -->
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="offset-2 col-sm-8 mt-2">
<table class="table table-hover table-striped table-bordered dataTable" id="isi">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">ID</th>
<th scope="col">Lokasi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- START SCRIPT -->
<script type="text/JavaScript">
$(document).ready(function() {
$(#isi).dataTable();
});
</script>
<!-- Optional JavaScript -->
<!-- DATATABLE -->
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.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>
</body>
</html>
I think the problem is my CDN is not working, like link rel stylesheet or script.
jQuery needs to be loaded before Bootstrap and dataTables files as they are dependent upon$.
So,
Move jQuery, popper and bootstrap.js files above the datatables' files
Add your js code like $(document).ready() below this.
Add quotes around the jquery selector: $("#isi")
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<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">
<!-- DATATABLE -->
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css">
<title>Hello, world!</title>
</head>
<body>
<div class="container fluid">
<div class="row">
<div class="offset-2 col-sm-8 mt-2">
<table class="table table-hover table-striped table-bordered dataTable" id="isi">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">ID</th>
<th scope="col">Lokasi</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- DATATABLE -->
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script type="text/JavaScript" src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function() {
$("#isi").dataTable();
});
</script>
</body>
</html>
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.