I'm trying out DataTables, and I have a similar issue to this user:
how to use jquery datatable plugin properly.
When I try their code I actually have a proper DataTable. But if I use the latest versions of jQuery and DataTables, I only have a basic HTML table.
Are there some issues of compatibility between DataTables and jQuery?
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.css"/>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
});
</script>
</html>
EDIT : Thanks to Rory McCrossan, the links to datatables that I copy-pasted were indeed broken!
The problem is the order of your Js
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
Jquery needs to be initialized first:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
Example:
$(document).ready( function () {
$('#table_id').DataTable();
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
You have a problem - you're importing jQuery DataTables before you're importing jQuery itself. Change your script loading order:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.19/datatables.min.js"></script>
Related
I am trying to implement the most basic installation of datatable, where I failed to initialize it. Here is my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Dashboard </title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.2/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.2/js/jquery.dataTables.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
I have added link to CSS and JS file via CDN, and also referred to my main.js file which is:
$(document).ready( function () {
$('#table_id').DataTable();
} );
However, when I opened this HTML file, the table is still in plain status and not rendered as the examples in this official document. Where did I do wrong?
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
i'm trying to use bootstrap tables extension by wenzhixin. In my web app i've a parent page called Assets.jsp and other child pages with other names.
Now when i create a table in Assets.jsp there are no problems, then if i create a table in one of child pages the table appears without styles and filters, only html simple table.
Example: if i put table in Assets.jsp
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>
<table id="table" data-toggle="table" data-search="true" data-filter-control="true" data-show-export="true" class="table-responsive">
<thead>
<tr>
<th data-sortable="true" data-filter-control="input">Firstname</th>
<th data-sortable="true" data-filter-control="input">Lastname</th>
<th data-sortable="true" data-filter-control="input">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr style="">
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr style="">
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr style="">
<td>Anja</td>
<td>Ravendale</td>
<td>a_r#test.com</td>
</tr>
</tbody>
</table>
Jsfiddle example
Else if i put table into AssetsContent.jsp, that is child of Assets.jsp and included into body page with <s:include value="AssetsContent.jsp" />. I get this
Jsfiddle example2
How can i do? Thanks.
Use Data table with extra feature:-
see example:
https://datatables.net/
https://datatables.net/examples/styling/bootstrap.html
https://datatables.net/examples/styling/bootstrap4.html
Dropdown boxes are not removed as expected.
After the migration of Materialize from version 0.97 to 1.0.0 the function is not working. Only the text in the dropdown box is removed instead of the complete element.
M.AutoInit();
function removeEdit() {
var el = document.getElementById("edit");
el.parentNode.removeChild(el);
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
<!-- Record actions -->
<ul id="actions" class="dropdown-content">
<li>Edit</li>
<li>Delete</li>
</ul>
<button type="button" onclick="removeEdit()">Remove element edit</button>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="1" class="tr-d dropdown-trigger" href="#" hover="false" data-target="actions">
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
<td>Row 1, column 3</td>
</tr>
<tr id="2" class="tr-d dropdown-trigger" href="#" hover="false" data-target="actions">
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
<td>Row 2, column 3</td>
</tr>
</tbody>
</table>
</html>
In removeEdit function, el represents selected <a> so el.parentNode represents selected <li>.
When you use el.parentNode.removeChild(el), it means that remove child of selected <li> so it removes the <a> tag.
Change :
el.parentNode.removeChild(el);
To :
el.parentNode.remove();
And it removes selected <li>.
I can't get DataTables to work. After displaying the page the Firefox Development Tools show this error: TypeError: invalid 'in' operand a.
Does somebody know the solution to this problem? This is my code:
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/jquery.dataTables.min.css" rel="stylesheet">
<!-- <link href="css/dataTables.bootstrap.css" rel="stylesheet"> -->
</head>
<body>
<div class="container">
<div class="table-responsive">
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script src="js/dataTables.bootstrap.min.js"></script>
<script>
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
</body>
</html>
Like Sirko mentioned, updated to datatables 1.10.9 & this solved the problem.