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.
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?
Can someone explain and give me a solution why the bootstrap toggle button works fine when page loads but does not when using template and javascript
This code works on load but the toggle button is a checked button when I click on the button "Add Row":
<!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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/css/bootstrap4-toggle.min.css"
rel="stylesheet">
</head>
<body>
<div class="container">
<div>
<button type="button" class="btn btn-primary" id="myButton">Add Row</button>
</div>
<div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Col 1</th>
<th scope="col">Col 2</th>
<th scope="col">Col 3</th>
<th scope="col">Col 4</th>
<th scope="col"><input type="checkbox" checked data-toggle="toggle" data-width="10"
data-height="" data-on=" " data-off=" " data-onstyle="primary" data-offstyle="warning">
</th>
</tr>
</thead>
<tbody id="tableBody">
<tr>
<td scope="col">Test 1</td>
<td scope="col">Test 2</td>
<td scope="col"><input class="form-control" type="number" value="12345" readonly>
</td>
<td scope="col">Test 4</td>
<td scope="col"><input type="checkbox" checked data-toggle="toggle" data-width="10"
data-height="" data-on=" " data-off=" " data-onstyle="primary" data-offstyle="warning">
</td>
</tr>
</tbody>
</table>
</div>
</div>
<template id="newRow">
<tr>
<td scope="col">Test 1</td>
<td scope="col">Test 2</td>
<td scope="col"><input class="form-control" type="number" value="12345" readonly>
</td>
<td scope="col">Test 4</td>
<td scope="col"><input type="checkbox" checked data-toggle="toggle" data-width="10" data-height=""
data-on=" " data-off=" " data-onstyle="primary" data-offstyle="warning"></td>
</tr>
</template>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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>
<script src="https://cdn.jsdelivr.net/gh/gitbrent/bootstrap4-toggle#3.6.1/js/bootstrap4-toggle.min.js"></script>
<script>
function insertNewRow() {
var template = document.querySelector("#newRow");
var tbody = document.querySelector("#tableBody");
var clone;
var td;
clone = document.importNode(template.content, true);
td = clone.querySelectorAll("td");
td[0].textContent = "A";
td[1].textContent = "B";
td[2].textContent = "C";
td[3].textContent = "D";
tbody.appendChild(clone);
}
$('#myButton').on('click', insertNewRow)
document.addEventListener('DOMContentLoaded', insertNewRow);
</script>
</body>
</html>
Can someone explain and give me a solution why the bootstrap toggle button works fine when page loads but does not when using template and javascript
This code works on load but the toggle button is a checked button when I click on the button "Add Row":
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
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>
I have a bootstrap page with a table loaded from a MySQL db. The table shows but it doesn't show up with the desired format.
The table is set up here.
<script type ="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#job_table').DataTable();
} ); >
</script>
<table id="job_table"
class = "table dataTable"
data-pagination ="true">
<thread>
<tr>
<th>#</th>
<th>Job Title </th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thread>
<tbody>
<?php
$result = mysqli_query($link,"Select * From Jobs");
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>
<tr class="info">
<td></td>
<td><?=$row['job_id']?></td>
<td><?=$row['name']?></td>
<td><?=$row['comp_name']?></td>
<td><?=$row['pay']?></td>
<td><?=$row['location']?></td>
<td><?=$row['date_posted']?></td> </tr>
<?php
}
?>
</tbody>
This is what i have in the header section
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="starter-template.css" rel="stylesheet">
<script src="bootstrap/js/respond.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
The table displays data but the pagination setting in the table doesn't do anything when added. The Javascript I have to set up the table in the dataTable doesn't do anything either. I"m not sure what i'm missing.
This is the source of the html table. The rest was omitted because this table has about 500 rows of data.
<div class="tab-pane" id="joblist">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Active Employment Listings</h3>
</div>
<script type ="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#job_table').DataTable();
} ); >
</script>
<table id="job_table"
class = "table dataTable"
data-pagination ="true">
<thead>
<tr>
<th>#</th>
<th>Job Title </th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td></td>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr class="info">
<td></td>
<td>2</td>
<td>Administrative </td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>