How to create a horizontally scrolling data table using datatables.js - javascript

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

Related

tablesorterPager is not a function

I'm trying to implement tablesorter with the pager function. I imported all the js files provided on the tablesorter website. Here I have my 'head' section of my Html file:
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="/js/jquery.tablesorter.pager.min.js"></script>
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
<script type="text/javascript">
$(function() {
$("#myTable")
.tablesorter({
theme : "bootstrap",
sortList: [[0, 0]]
},
widthFixed: true
})
.tablesorterPager({
size: 2,
container: $("#myContainer")
});
});
</script>
</head>
With the following table:
<table class="table table-bordered table-striped" id="myTable">
<thead class="thead-dark">
<tr>
<th scope="col">№</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<th colspan="3" class="ts-pager" id="myContainer">
...
</th>
</tr>
</tfoot>
</table>
However, I get this error:
$(...).tablesorter(...).tablesorterPager is not a function
What's wrong? I do everything like in the demo section and in youtube tutorials but this error appears and can't realize why.

bootstrap table stuck "loading please wait"

I'm trying to insert some data from an API into a table with bootstrapTable but I'm stuck on "loading.."
What's wrong in my code??
Many thanks for your help!
<table id="table" data-toggle="table" data-height="460" data-ajax="ajaxRequest" data-search="true"
data-side-pagination="server" data-pagination="true">
<thead>
<tr>
<th data-field="Country" data-sortable="true">Country</th>
<th data-field="CountryCode" data-sortable="true">CountryCode</th>
<th data-field="Confirmed" data-sortable="true">Confirmed</th>
<th data-field="Deaths" data-sortable="true">Deaths</th>
<th data-field="Recovered" data-sortable="true">Recovered</th>
<th data-field="Active" data-sortable="true">Active</th>
<th data-field="Date" data-sortable="true">Date</th>
</tr>
</thead>
<script>
$.get("https://api.covid19api.com/country/italy?from=2020-03-01T00:00:00Z&to=2020-04-01T00:00:00Z", function (data) {
$(function () {
$('#table').bootstrapTable({
data: JSON.parse(data)
});
});
});
I've added these first:
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<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">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
Just define the table with the data-url there and quit the <script>
<table
data-toggle="table"
data-url="https://api.covid19api.com/country/italy?from=2020-03-01T00:00:00Z&to=2020-04-01T00:00:00Z"
data-pagination="true"
data-search="true">
<thead>
<tr>
<th data-field="Country" data-sortable="true">Country</th>
<th data-field="CountryCode" data-sortable="true">CountryCode</th>
<th data-field="Confirmed" data-sortable="true">Confirmed</th>
<th data-field="Deaths" data-sortable="true">Deaths</th>
<th data-field="Recovered" data-sortable="true">Recovered</th>
<th data-field="Active" data-sortable="true">Active</th>
<th data-field="Date" data-sortable="true">Date</th>
</tr>
</thead>
</table>
Thanks all guys, the data wasn't a JSON string anymore, but already a JavaScript object.. my bad!
$("#table").bootstrapTable({
data: data,
});

Not able to increase number of column in datatable

I am using this default code of datatable #fiddle But i am facing 2 issues,
1) When i am trying to increase the number of column, the whole css gets disturbed, and the pagination,search, number of records gets disappeared
2) in responsive view, with the help of scrollbar i can view the data horizontally and vertically but i am not able to see all the headers
Can anyone please tell how to solve these 2 issues
code
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css"/>
<table id="example" class="table table-striped table-bordered" 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>
<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>
</tbody>
</table>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"scrollY": "400px",
"scrollCollapse": true
} );
} );
</script>

Getting this error - Unable to get property 'mData' of undefined or null reference

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>

Having trouble starting up tablesorter

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>

Categories

Resources