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>
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 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>
I am unable to edit the HTML directly in a form and would like to move some things around. I created a very simplified version of what is going on below. So for example, if I would like to move the row with class "comments" to just below the row with class "matching" how could I do this on page load?
I tried doing something like:
$('tr.comments').closest('tr').after($('tr.matching').closest('tr'));
Here is the basic code, thank you for your help!! :)
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
Try with this $('tr.matching').after($('tr.comments'));.
$('tr.matching').after($('tr.comments'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="designation">
<td>Some text</td>
</tr>
<tr class="comments">
<td>More text</td>
</tr>
</tbody>
<tbody>
<tr class="levels">
<td>level 1</td>
</tr>
<tr class="amount">
<td>$500</td>
</tr>
</tbody>
<tbody>
<tr class="matching">
<td>donor</td>
</tr>
<tr class="mailing">
<td>yes</td>
</tr>
</tbody>
</table>
$(".matching").after($(".comments"));
I'm using a dynamic table example I found here (bootply). Its basically a table with a parent, child relationship, so you can click on a row and it will drop down another row. I added one more level to this example, so you can think of this example as a parent, child, grandchild relationship. My issue is that if you go two levels deep, and then click the parent row it only hides the child row, but not the grandchild rows. I need to fix this 'bug' somehow.. I've tried wrapping the parent row in a div and using href="#collapse1" and than putting that id on the grandchild row but that doesn't work. Any other suggestions are greatly appreciated. Here's the html..
<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" id="row1" data-target=".row1">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row1">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable collapse row1" data-toggle="collapse" id="row3" data-target=".row3">
<td>- child row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row3">
<td>- grandchild row</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2">
<td><i class="glyphicon glyphicon-plus"></i></td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
<tr class="collapse row2">
<td>- child row</td>
<td>data 2</td>
<td>data 2</td>
<td>data 2</td>
</tr>
</tbody>
</table>
Doesn't work with a fiddle.js for some reason.. but if you go to the link and copy&paste this code you can replicate the issue.
I'm surprised not to find Excel like filtering in DataTables (since it is such a widely used and advanced plugin). Does this exist, or is there an easy way to implement it? Examples of advanced menu filter (like Excel) below. Thanks!
Kendo UI: http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html
Yet Another DataTables Column Filter (yadcf) for jQuery DataTables
See this example for demonstration or the demo below.
$(document).ready( function () {
var table = $('#example').DataTable();
yadcf.init(table, [{
column_number: 0
}, {
column_number: 1,
filter_type: "range_number_slider"
}, {
column_number: 2,
filter_type: "date"
}, {
column_number: 3,
filter_type: "auto_complete",
text_data_delimiter: ","
}, {
column_number: 4,
column_data_type: "html",
html_data_type: "text",
filter_default_label: "Select tag"
}]);
// BOOTSTRAP: Tweaks
$('.yadcf-filter-wrapper').addClass('input-group');
$('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm');
$('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>');
});
table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc_disabled::after {
top: 8px;
}
.yadcf-number-slider-filter-wrapper-inner {
width:100px !important;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>
<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css" rel="stylesheet" type="text/css" />
<link href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.js"></script>
<script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-stripped table-bordered" id="example">
<thead>
<tr>
<th>Some Data</th>
<th>Numbers</th>
<th>Dates</th>
<th>Values</th>
<th>Tags</th>
</tr>
</thead>
<tbody>
<tr>
<td>Some Data 1</td>
<td>1000</td>
<td>01/24/2014</td>
<td>a_value,b_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 2</td>
<td>22</td>
<td>02/20/2014</td>
<td>b_value,c_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td>
</tr>
<tr>
<td>Some Data 3</td>
<td>33</td>
<td>02/26/2014</td>
<td>a_value</td>
<td><span class="label label-primary">Tag2</span> <span class="label label-primary">Tag3</span></td>
</tr>
<tr>
<td>Some Data 4</td>
<td>44</td>
<td>02/11/2014</td>
<td>b_value</td>
<td><span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 5</td>
<td>55</td>
<td>02/29/2014</td>
<td>a_value,b_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 1</td>
<td>111</td>
<td>11/24/2014</td>
<td>c_value,d_value</td>
<td><span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 2</td>
<td>222</td>
<td>02/03/2014</td>
<td>e_value,f_value</td>
<td><span class="label label-primary">Tag3</span> <span class="label label-primary">Tag4</span> <span class="label label-primary">Tag5</span></td>
</tr>
<tr>
<td>Some Data 3</td>
<td>33</td>
<td>02/03/2014</td>
<td>a_value,bb_value</td>
<td><span class="label label-primary">Tag5</span></td>
</tr>
<tr>
<td>Some Data 4</td>
<td>444</td>
<td>03/24/2014</td>
<td>a_value,f_value</td>
<td><span class="label label-primary">Tag4</span></td>
</tr>
<tr>
<td>Some Data 5</td>
<td>55</td>
<td>03/22/2014</td>
<td>a_value,c_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 1</td>
<td>300</td>
<td>02/20/2014</td>
<td>a_value,b_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td>
</tr>
<tr>
<td>Some Data 2</td>
<td>242</td>
<td>02/04/2014</td>
<td>d_value,aa_value</td>
<td><span class="label label-primary">Tag1</span></td>
</tr>
<tr>
<td>Some Data 3</td>
<td>703</td>
<td>02/05/2014</td>
<td>a_value,c_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 4</td>
<td>604</td>
<td>02/25/2014</td>
<td>a_value,bb_value</td>
<td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 5</td>
<td>550</td>
<td>02/01/2014</td>
<td>c_value,e_value</td>
<td><span class="label label-primary">Tag2</span></td>
</tr>
<tr>
<td>Some Data 1</td>
<td>901</td>
<td>02/02/2014</td>
<td>a_value,e_value</td>
<td><span class="label label-primary">Tag1</span></td>
</tr>
<tr>
<td>Some Data 11</td>
<td>911</td>
<td>02/22/2014</td>
<td>a_value,e_value</td>
<td><span class="label label-primary">Tag11</span></td>
</tr>
</tbody>
</table>
</body>
</html>