I have a data-toggle in tr and once click,the underlying tr will display in the last part of all the tr. Example: If I click the name John, its corresponding tr with <td>test2</td> will display in the last part.Let us say, it will display under Genrevel. What is wrong with my javascript?
$(function() {
$("#example1").DataTable();
});
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://adminlte.io/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css">
<table id="example1" class="table table-bordered" style="border-collapse:collapse;">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Level</th>
</tr>
</thead>
<tbody>
<tr>
<td><a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"> Joseph</a></td>
<td>15</td>
<td>8</td>
</tr>
<tr id="demo1" class="accordian-body collapse">
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
<tr>
<td><a data-toggle="collapse" data-parent="#accordion" href="#accordionOne"> John</a></td>
<td>12</td>
<td>6</td>
</tr>
<tr id="accordionOne" class="panel-collapse collapse">
<td>test 2</td>
<td>test 2</td>
<td>test 2</td>
</tr>
<tr>
<td><a data-toggle="collapse" data-parent="#accordion" href="#accordionTwo"> Genrevel</a></td>
<td>10</td>
<td>5</td>
</tr>
<tr id="accordionTwo" class="panel-collapse collapse">
<td>test 3</td>
<td>test 3</td>
<td>test 3</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="https://adminlte.io/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Related
So I'm trying to do a collapse info from each row of a table. The rows are generated from the Odoo framework, so, in order to associate the data-target to the corresponding ID, I iterated the table and changed the values of each.
Dispite the ids on the console and ,after inspecting the element being the same, the collapse does not work.
Can you guys help me to find the reason and a possible solution? Thanks in advance.
Javascript
var table = document.getElementById("social_programs_table");
var incr = 0;
//i = 1, because the first row should be ignored
for (var i = 1, row; row = table.rows[i]; i++) {
//iterate through rows
if (i % 2 != 0) {
incr++;
row.cells[5].firstChild.nextElementSibling.dataset.target = "target" + incr;
console.log("Row Target ID: " + row.cells[5].firstChild.nextElementSibling.dataset.target);
}
else {
row.id = "target" + incr;
console.log("Row ID: " + row.id);
}
}
Respective Table
<table class="table table-striped" id="social_programs_table">
<thead>
<tr>
<th scope="col">Nome da Entidade</th>
<th scope="col">Designação do Projeto</th>
<th scope="col">Duração (meses)</th>
<th scope="col">População-alvo</th>
<th scope="col">Fonte de Financiamento</th>
<th scope="col">Saber Mais</th>
</tr>
</thead>
<tbody>
<!-- ? Loop -->
<t t-foreach="programs" t-as="obj">
<tr>
<th scope="row"><t t-esc="obj.beneficiary_entity" /></th>
<td><t t-esc="obj.name" /></td>
<td><t t-esc="obj.duration" /></td>
<td><t t-esc="obj.target_audience" /></td>
<td><t t-esc="obj.financial_source" /></td>
<td id="collapse_td">
<button class="btn btn-primary" data-toggle="collapse" data-target="#target" id="collapse_btn">+</button>
</td>
</tr>
<tr class="collapse out" id="target">
<td>This txt should be collapsed</td>
</tr>
</t>
<!-- ? End loop -->
</tbody>
</table>
The reason it's not working could be duplicate ids.
Try using any other unique value as id, like t-att-id="obj.name" & similarly assign the data-target as t-att-data-target="obj.name" and use name only if it's unique and here's code for your reference.
HTML CODE:
<table class="table table-bordered table-sm ">
<thead class="thead-dark">
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
</tbody>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td><i class="fa fa-folder"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="table-warning">
<td><i class="fa fa-folder-open"></i> child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
I am using bootstrap 4. In my project I need toggle responsive table inside another table. When I click to expand show inner table and again click collapse inner table like below Image.
You can use this code for toggle responsive table inside another table
<!DOCTYPE html>
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Column</th>
<th>Column</th>
<th>Column</th>
<th>Column</th>
</tr>
</thead>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-1" aria-expanded="false" aria-controls="group-of-rows-1">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-1" class="collapse">
<tr>
<td>- child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
<tr>
<td>- child row</td>
<td>data 1</td>
<td>data 1</td>
<td>data 1</td>
</tr>
</tbody>
<tbody>
<tr class="clickable" data-toggle="collapse" data-target="#group-of-rows-2" aria-expanded="false" aria-controls="group-of-rows-2">
<td><i class="fa fa-plus" aria-hidden="true"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
<tbody id="group-of-rows-2" class="collapse">
<tr>
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr>
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
</body>
</html>
I am having an odd issue using DataTables with fixedColumn. Everything works fine but there is an space between the header and the list of rows that is displayed every-time I scroll the table horizontally.
Datatable issue
However, I can scroll all fixed rows and the table looks fine. (Try this by clicking on any row into the first column and press arrows up and down)
DataTable after scrolling the fixedColumn
Does anyone knows how to avoid this annoying issue? I appreciate any suggestion.
Here the code and libraries I am using.
$(document).ready(function() {
$('#MyTable').DataTable({
paging: false,
info: false,
scrollX: true,
fixedColumns: {
leftColumns: 1
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Data Table-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<table class="table table-bordered text-center" id="MyTable" style="width: 100%;">
<thead style="background-color: black; color: white;">
<tr>
<th style="vertical-align: middle; text-align: center;">Fixed</th>
<th style="vertical-align: middle; text-align: center;">X</th>
<th style="vertical-align: middle; text-align: center;">Y</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>row 1</td>
<td>193.38867</td>
<td>150.45493</td>
</tr>
<tr class="danger">
<td>row 2</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 3</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 4</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="success">
<td>row 5</td>
<td>578.30164</td>
<td>544.329</td>
</tr>
<tr class="success">
<td>row 6</td>
<td>934.5156</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 7</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
You need to use fixedColumns.bootstrap.min.css instead of fixedColumns.dataTables.min.css
See official example for more information.
See updated example below.
$(document).ready(function() {
$('#MyTable').DataTable({
paging: false,
info: false,
scrollX: true,
fixedColumns: {
leftColumns: 1
}
});
});
.table-style1 thead th {
background-color: black;
color: white;
vertical-align: middle;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Data Table-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<table class="table table-bordered text-center table-style1" id="MyTable" style="width: 100%;">
<thead>
<tr>
<th>Fixed</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>row 1</td>
<td>193.38867</td>
<td>150.45493</td>
</tr>
<tr class="danger">
<td>row 2</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 3</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 4</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="success">
<td>row 5</td>
<td>578.30164</td>
<td>544.329</td>
</tr>
<tr class="success">
<td>row 6</td>
<td>934.5156</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 7</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
You are using too much css files fo dataTables which are conflicting with each other.
Just use dataTables.bootstrap.min.css
Stack Snippet
$(document).ready(function() {
var table = $('#MyTable').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<table class="table table-bordered text-center" id="MyTable" style="width: 100%;">
<thead style="background-color: black; color: white;">
<tr>
<th style="vertical-align: middle; text-align: center;">Fixed</th>
<th style="vertical-align: middle; text-align: center;">X</th>
<th style="vertical-align: middle; text-align: center;">Y</th>
<th style="vertical-align: middle; text-align: center;">Z</th>
<th style="vertical-align: middle; text-align: center;">Z</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>row 1</td>
<td>193.38867</td>
<td>150.45493</td>
<td>150.45493</td>
<td>150.45493</td>
</tr>
<tr class="danger">
<td>row 2</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 4</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="success">
<td>row 5</td>
<td>578.30164</td>
<td>544.329</td>
<td>544.329</td>
<td>544.329</td>
</tr>
<tr class="success">
<td>row 6</td>
<td>934.5156</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 7</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
Hello everyone i started learning bootstrap for a while,
And i want to make close button for div boxes i have this code but the X button doesn't work:
<div class="panel panel-default">
<table class="table table-hover">
<thead>
<tr style="background-color: lavender;">
<th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
<th>×</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester</td>
<td>T1 2+p.p</td>
</tr>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr style="background-color: lightgreen;">
<th>Bet: 2100</th>
<th>Win: 55864</th>
</tr>
</tbody>
</table>
</div>
and here is the JavaScript:
$(document).ready(function() {
$("#hide").click(function(){
$("panel").hide();
});
});
You have to set an Id to the div class="panel" and set this id in a href=#id. THen change data-dismiss="modal" to data-dismiss="panel" and you can remove the javascript code.
You can check it here
https://jsfiddle.net/foyckLaf/
<div class="panel panel-default" id="current-pane">
<table class="table table-hover">
<thead>
<tr style="background-color: lavender;">
<th><button type="button" class="btn btn-primary btn-xs">Share</button></th>
<th>×</th>
</tr>
</thead>
<tbody>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester</td>
<td>T1 2+p.p</td>
</tr>
<tr>
<td>Manchester United - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr>
<td>FC Barcelona - Manchester United</td>
<td>2 - 1</td>
</tr>
<tr style="background-color: lightgreen;">
<th>Bet: 2100</th>
<th>Win: 55864</th>
</tr>
</tbody>
</table>
</div>
Related: How can I dismiss a bootstrap panel using data-dismiss?
There is no panel element, you need .panel:
$(".panel").hide();
panel corresponds to <panel></panel> element, clearly you don't have in in your code.
The tableSorter plugin is not working.I have downloaded the plugin included in file.
<script type="text/javascript" src="~/Assets/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="~/Assets/js/tablesorter/jquery.tablesorter.js"></script>
<div class="panel-body">
<div class="table-responsive">
<table id="sortTable" class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr class="danger" >
<th>TOKENS</th>
<th>REVISIONNOTES</th>
<th>REVISION</th>
<th>TARGETPROFICENCY</th>
<th>QUESTIONSAVAIL</th>
<th>QUESTIONSTOASK</th>
</tr>
</thead>
<tbody>
<script>
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
When i debug the code, it says 'tablesorter' is not an function, basically the plugin is loaded i believe. I dont know what wrong i have did, could anyone please help. Thanks.
your html code is wrong. Also I have implemented an example for you:
http://jsfiddle.net/xrda9p5t/
html:
<table id="sortTable" class="table table-bordered table-hover table-striped tablesorter">
<thead>
<tr class="danger" >
<th>TOKENS</th>
<th>REVISIONNOTES</th>
<th>REVISION</th>
<th>TARGETPROFICENCY</th>
<th>QUESTIONSAVAIL</th>
<th>QUESTIONSTOASK</th>
</tr>
</thead>
<tbody>
<tr>
<td>test </td>
<td>test </td>
<td>test </td>
<td>test </td>
<td>test </td>
<td>test </td>
</tr>
<tr>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
<td>test 1</td>
</tr>
</tbody>
js
$(document).ready(function () {
$(".tablesorter").tablesorter();
});
make sure you have added all the files properly. It's a good practice add the scripts files at the end of the html.
Hope it's helps!