Info: I want to make nested draggable table using sortable js. This is like a tree table.
The .detail-view tr is a child of previous tr or which have Parent data. I want If user Drag the parent tr the child(.detail-view) also dragged along with it. each parent tr have there separate zone with there child table.
The childs are not shared able with other childs or parents.
https://jsfiddle.net/47r95hbs/
<table class="table" id="mytable">
<thead>
<tr>
<th>Sortable Table</th>
</tr>
</thead>
<tbody id="ptable">
<tr>
<td>Parent subject 1</td>
</tr>
<tr class="detail-view" data-subject="1">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 1 child</td>
</tr>
<tr data-id="2">
<td>Subject 1 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 2</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 2 child</td>
</tr>
<tr data-id="2">
<td>Subject 2 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>Parent subject 3</td>
</tr>
<tr class="detail-view" data-subject="2">
<td>
<table class="table detail-table">
<tbody>
<tr data-id="1">
<td>Subject 3 child</td>
</tr>
<tr data-id="2">
<td>Subject 3 child</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Related
I have the following nested HTML table. I am using the Datatables API to make my tables searchable. One problem I have faced is with the nested tables I'm not sure how to make the nested tables searchable? I have tried adding additional ID tags to the nested tables HTML code and adding that into the dataTables JS code call but that did not work. Any idea how to make the sub-tables searchable?
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
<div class="container">
<table id="example" class="table table-striped">
<thead>
<tr>
<th>Image</th>
<th>Date</th>
<th>TC NAME</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
<th>NS FLOW</th>
<th>SN FLOW</th>
</tr>
</thead>
<tbody>
<tr>
<td>721</td>
<td>3/15/20</td>
<td>
<table id="example1" class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>722</td>
<td>3/16/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>633</td>
<td>3/17/20</td>
<td>
<table class="table table-nostriped">
<tr>
<td>TC1</td>
</tr>
<tr>
<td>TC2</td>
</tr>
<tr>
<td>TC3</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>300</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>600</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>800</td>
</tr>
<tr>
<td>400</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>300</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>200</td>
</tr>
</table>
</td>
<td>
<table class="table table-nostriped">
<tr>
<td>100</td>
</tr>
<tr>
<td>200</td>
</tr>
<tr>
<td>300</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
If you by "searchable" mean DataTables inside DataTables you can use the createdRow callback to initialize tables inside a <tr>'s columns.
You must have a columns section in order to compensate for the missing <thead> in the nested tables (avoiding the TypeError: col is undefined error) :
const columns = [
{ title: '' },
]
Init the nested tables in the createdRow callback:
let table = $('#example').DataTable({
createdRow: function(row) {
$(row).find('td table')
.DataTable({
columns: columns,
dom: 'tf'
})
}
})
Notice the dom section. Here only showing the table itself and the filter box. You
can remove the header with
table.dataTable td table thead {
display: none;
}
Dont add this CSS if you want sortable columns in the nested tables.
demo using the markup in question -> http://jsfiddle.net/davidkonrad/8pzkr6yn/
Update. If your concern just is to be able to search within the content of the nested tables (e.g the HTML markup scraped away) just define the relevant columns type as 'html' (https://datatables.net/reference/option/columns.type) :
let table = $('#example').DataTable({
columnDefs: [
{ targets: [2,3,4,5,6,7], type: 'html' },
],
...
})
I expect next to name column is besides iphone, why my table doesn't work as expected?
<table>
<tbody>
<tr>
<td>
<tr>
<td>Name:</td>
<td>iphone</td>
</tr>
<tr>
<td>Price:</td>
<td>123</td>
</tr>
<tr>
<td>Qty</td>
<td>1</td>
</tr>
</td>
<td>next to name:</td>
<td>12345</td>
</tr>
</tbody>
</table>
You can't write tr inside of td. You can add table wrapper for the <tr>
<table border='1'>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Name:</td>
<td>iphone</td>
</tr>
<tr>
<td>Price:</td>
<td>123</td>
</tr>
<tr>
<td>Qty</td>
<td>1</td>
</tr>
</table>
</td>
<td>next to name:</td>
<td>12345</td>
</tr>
</tbody>
</table>
I'm trying to transition from jsRender to AngularJs and can't seem to figure out how to generate multiple table rows with ng-repeat.
I need to generate two table rows per ng-repeat, these rows are related to each other. The second row is actually a hidden row that expands out like an accordion. This works perfectly fine with renderJs:
With renderJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
{{for myArray}} <!-- Creates two rows per item in array -->
<tr>
<td>{{data}}</td>
<td>{{data2}}</td>
</tr>
<tr class="special-row">
<td>{{otherData}}</td>
<td>{{otherData2}}</td>
</tr>
{{/for}}
</tbody>
</table>
With AngularJs:
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<div ng-repeat="element in myArray"> <!-- This gets removed since it's not a valid element for a table body -->
<tr>
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</div>
</tbody>
</table>
I cannot have a <div> inside of my table body to put the ng-repeat on. How can I do this?
You should do it like this
<table>
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="element in myArray">
<td>{{element.data}}</td>
<td>{{element.data2}}</td>
</tr>
<tr ng-repeat-end class="special-row">
<td>{{element.otherData}}</td>
<td>{{element.otherData2}}</td>
</tr>
</tbody>
https://jsfiddle.net/feq6pe7m/1/
<body ng-app="SampleApp">
<table ng-controller="fcController" border="1px">
<thead>
<tr>
<th>Stuff</th>
<th>Stuff2</th>
</tr>
</thead>
<tbody ng-repeat="element in myArray">
<tr>
<td>{{element .Data1}}</td>
<td>{{element .Data2}}</td>
</tr>
<tr class="special-row">
<td>{{element.OtherData1}}</td>
<td>{{element.OtherData2}}</td>
</tr>
</tbody>
</table>
</body>
The basic structure is a table with a few rows. I would like the top half of the table showing and the bottom half collapsed until a user clicks on the READ MORE cell. I have that functionality working but I can't get the JQuery right that selects all of the ".collapseThis" rows and hides them on page load.
Here is the table
<div id="tables">
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
</div>
Here is the JQuery.
$(document).ready(function () {
function getCollapsable($row) {
var children = [];
while ($row.next().hasClass('collapseThis')) {
children.push($row.next());
$row = $row.next();
}
return children;
}
function hideTableRows($row) {
children = getCollapsable($row);
$.each(children, function () {
$(this).toggle();
});
}
$('#tables').each($('expandableTable'), function () {
hideTableRows($(this).children().hasClass('.accordion'));
});
You can just use css to set the display value, there is no need to use jQuery to set the initial state.
If you want to use jQuery, use a simple selector like $('#tables .expandableTable .collapseThis').hide().
$(document).ready(function() {
//if you don't want to use css
//$('#tables .expandableTable .collapseThis').hide();
});
#tables .expandableTable .collapseThis {
display: none;
}
<div id="tables">
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</div>
I am currently developing a tool to display large amount of data in different tables. Different amount of data from one table has to be assigned into another table more than once. This view takes almost 20 seconds to load and i want to lower the time by manipulating the DOM instead of assigning every match within PHP. I want to place a few identifiers hidden in the first table and on click of one row, show the additional data within the next element.
Here is an example how the Tables look before:
<table>
<tr>
<th>Name</th>
</tr>
<tr class="iWantToClickThis">
<td>Bla Bla</td>
<td style="visibility:hidden;">3,5</td>
</tr>
</table>
<table style="visibility:hidden">
<tr>
<th>Additional Header</th>
</tr>
<tr id="1">
<td>Additional Info 1</td>
</tr>
<tr id="2">
<td>Additional Info 2</td>
</tr>
<tr id="3=>
<td>Additional Info 3</td>
</tr>
<tr id="4">
<td>Additional Info 4</td>
</tr>
<tr id="5">
<td>Additional Info 5</td>
</tr>
<tr id="6">
<td>Additional Info 6</td>
</tr>
</table>
And after the click:
<table>
<tr>
<th>Name</th>
</tr>
<tr class="iWantToClickThis">
<td>Bla Bla</td>
<td style="visibility:hidden;">3,4,5</td>
</tr>
<tr>
<td colspan="2>
<table>
<tr>
<th>Additional Header</th>
</tr>
<tr id="3">
<td>Additional Info 3</td>
</tr>
<tr id="5">
<td>Additional Info 5</td>
</tr>
</table>
</td>
</table>
I've found out how to achieve this with a single row but how do i do that with different, identitying them by their ids?