We Keep Coding

Datatable Jquery based plugin - table - issues with collapsible in table - Javascript/HTML

I need to create a web-based table of grants focused on access to care that can be filtered and sorted by results. Although I've never really worked much with Javascript (a little with HTML a long time ago), I've been able to complete most of my objective through the use of the Jquery DataTable plugin. I would like to provide our users with the option to hit a collapse button to review the abstract (which is oftentimes 1000 characters) if they want to find additional details.
I've been on Stackoverflow for a long time and I know it's expected to at least make an attempt, which I did. Sadly, I know I'm off. I am grateful for any help here, since once I get this to work, I'm done with this project!
$(document).ready(function() {
$('#example').DataTable();
});
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Project Name</th>
<th>Project Number</th>
<th>PI(s)</th>
<th>End Date</th>
<th>Organization</th>
<th>Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
<td>DHI 06-010</td>
<td>Diane Cowper, Ph.D </td>
<td>9/30/2007</td>
<td>VA</td>
<td>
<button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button>
<div id="demo" class="collapse">Abstract language example 2.</div>
</
</td>
<tr>
<td>Access to Specialty Dental Care - Racial Disparities</td>
<td>R01-234i482</td>
<td>John Summerton, MD</td>
<td>1/1/2020</td>
<td>AHRQ</td>
<td>
<button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example">Simple collapsible</button>
<div id="demo" class="collapse">Abstract language example 1.</div>
</
</td>
</tr>
</tbody>
</table>

Here is a demo using DataTable responsive plugin
control classes
all - Always display
none - Don't display as a column, but show in the child row
never - Never display
control - Used for the column responsive.details.type option.
So, the last th in the header must have class="none"
responsive.details.target
This can be one of an column index, or a jQuery selector
$(document).ready(function() {
$('#example').DataTable({
responsive: {
details: {
type: 'column',
target: '.collapse'
}
},
columnDefs: [{
orderable: false,
targets: 5
}],
});
});
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th class="all">Project Name</th>
<th class="all">Project Number</th>
<th class="all">PI(s)</th>
<th class="all">End Date</th>
<th class="all">Organization</th>
<th class="all">Abstract</th>
<th class="none"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
<td>DHI 06-010</td>
<td>Diane Cowper, Ph.D </td>
<td>9/30/2007</td>
<td>VA</td>
<td>
<button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button>
</td>
<td>Abstract language example 2.</td>
</tr>
<tr>
<td>Access to Specialty Dental Care - Racial Disparities</td>
<td>R01-234i482</td>
<td>John Summerton, MD</td>
<td>1/1/2020</td>
<td>AHRQ</td>
<td>
<button type="button" class="btn btn-info collapse" data-toggle="collapse" data-target="#example">Simple collapsible</button>
</td>
<td>Abstract language example 1.</td>
</tr>
</tbody>
</table>

You can use jQuery to hide() and show() elements using these functions or you can use toggle()
$(document).ready(function() {
$('#example').DataTable();
$('#demo').toggle();
});
function myFunction(){
$('#demo').toggle();
}
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js">
</script>
<body>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Project Name</th>
<th>Project Number</th>
<th>PI(s)</th>
<th>End Date</th>
<th>Organization</th>
<th>Abstract</th>
</tr>
</thead>
<tbody>
<tr>
<td>Geographic Access to VHA Rehabilitation Services for OEF/OIF Veterans</td>
<td>DHI 06-010</td>
<td>Diane Cowper, Ph.D </td>
<td>9/30/2007</td>
<td>VA</td>
<td>
<button type="button" class="btn btn-info" data- toggle="collapse" data-target="#example" onclick="myFunction()">Simple collapsible</button>
<div id="demo" class="collapse" >Abstract language example 2.</div>
</td>
</tr>
</tbody>
</table>
</body>

Struts 2 use javascript in child jsp

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

Overriding bootstrap table-striped rows with jquery onclick function

hello everyone.
I've used bootstrap 4 table classes to build the table shown in the image, including the table-striped class which gives the table it's alternate row bg-colors. I've then used a jquery function to give the highlighted row it's deep blue bg-color.
everything works as expected, except that the bg-color gotten from the jquery function, does not override the alternate (gray colored) rows of the table, it only works on the white colored rows. Is there a way to make this work? i.e make the function override the color of the gray colored rows as well as the white ones? I don't want to have to stop using the bootstrap table-striped class.
below is the jquery function I'm using:
$('tbody tr').click(function(){
var selected = $(this).hasClass("highlight");
$("tbody tr").removeClass("highlight");
if(!selected)
$(this).addClass("highlight");
});

Use link to your CSS file after link to the bootstrap CSS. For example:
<head>
...
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
...
<link rel="stylesheet" type="text/css" href="mytheme.css">
</head>
Note, you could add any query string to your CSS-file URL to avoid сaching problem:
<link rel="stylesheet" href="mytheme.css?version=new">
Also you can use !important rules in your CSS as a last resort.
.highlight {
background-color: red !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="table-responsive">
<table class="table table-bordered table-striped">
<colgroup>
<col class="col-xs-1">
<col class="col-xs-7"> </colgroup>
<thead>
<tr>
<th>Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Text</th>
<td>Text</td>
</tr>
<tr>
<th scope="row">Text</th>
<td>Text</td>
</tr>
<tr class="highlight">
<th scope="row">Text</th>
<td>highlited row</td>
</tr>
<tr>
<th scope="row">Text</th>
<td>Text</td>
</tr>
<tr>
<th scope="row">Text</th>
<td>Text</td>
</tr>
</tbody>
</table>
</div>

How can I use ng-repeat in a table body to encompass multiple rows?

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>

My HTML is rearranging itself how is this happening?

As the title says, my markup is rearranging itself. I have absolutely no idea how that works.
The accordion moves itself outside of the table, if you right click and inspect the table the markup shows it's actually moved.
I understand that this would make for some weird looking results, but it's a start to figuring out how to have accordion tables. I'm aiming to have a table row clickable and the accordion rolls out under it.
JSFiddle: https://jsfiddle.net/f6dn4pec/2/
$('.ui.accordion')
.accordion();
<script src="https://cdn.jsdelivr.net/jquery/2.1.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<div>
<table class="ui single line table">
<thead>
<tr>
<th>Name</th>
<th>Registration Date</th>
<th>E-mail address</th>
<th>Premium Plan</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Lilki</td>
<td>September 14, 2013</td>
<td>jhlilk22#yahoo.com</td>
<td>No</td>
</tr>
<tr id="test">
<td>Jamie Harington</td>
<td>January 11, 2014</td>
<td>jamieharingonton#yahoo.com</td>
<td>Stuff</td>
</tr>
<tr>
<div class="ui styled accordion">
<div class="title">
<i class="dropdown icon"></i> What is a dog?
</div>
<div class="content">
<p class="transition hidden">A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
</div>
</tr>
<tr>
<td>Jill Lewis</td>
<td>May 11, 2014</td>
<td>jilsewris22#yahoo.com</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>

<div> is not a valid child of <tr>.
When browsers run into invalid markup they kick it out of current part of the dom tree...with unpredictable results.
Final answer...use valid html
Reference MDN - <tr> Usage Context

The accordion div needs to be in a <td> tag. The <td> tag is the actual table cell.