Select-Checkbox shows up but cannot be clicked
Select-Checkbox shows up but cannot be clicked
cfast20
Posts: 2Questions: 0Answers: 0
I'm trying to incorporate check boxes into my site where a table is created from a database using DataTables. The end goal is to have a function run for all the lines that are checked. So far everything looks correct and the check boxes appear in the correct column, but I cannot actually click on them. Any ideas?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" language="javascript" src="/static/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="/static/DataTables/datatables.min.css"/>
<script type="text/javascript" src="/static/DataTables/datatables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
#MainHead thead{
background-color : #FF0000;
font-weight: bold;
}
#results:hover{background-color: #A9A9A9}
</style>
</head>
<body>
<a href = "{{ url_for('FWLog') }}">
<img src="/static/banner.jpg" alt = "Logo" width="100%" height="100%" class="center">
</a>
<h2 align="center">Testing Results Table</h2>
<table id="MainHead" class="display">
<thead>
<tr>
<th></th>
<th>Test ID</th>
<th>Test Name</th>
<th>Test Category</th>
<th>Software Version</th>
<th>Environment</th>
<th>Test Status</th>
<th>Test Run Time (s)</th>
<th>Platform / Method</th>
<th>Time Started</th>
<th>Time Finished</th>
</tr>
</thead>
<tbody>
{% for h in data %}
<tr id="results">
<td></td>
{% for i in h %}
<td>
<a href = "{{ url_for('Details' ,testid=h[0]) }}"> {{i}} </a>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready(function() {
$('#MainHead').DataTable( {
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'os',
selector: 'td:first-child'
},
order: [[ 1, 'desc' ]]
} );
} );
</script>
</body>
</html>
This discussion has been closed.
Replies
Looks like you are loading the
select.dataTables.min.cssCSS but not the select JS. You can get it from the Download BUilder. Also take a look at the Select Checkbox example to see what you need.Kevin
Well I'll be darned. Thanks that worked!