We Keep Coding

Add DataTable with sort in html doc

I would like to create an simple table in html doc. The table exists but I cant order and operate with the table. I'm a noob in html and js.
My result:
<link rel="stylesheet" type="text/css" href="static/datatables.min.css"/>
<script type="text/javascript" src="static/datatables.min.js"></script>
<table id="example" class="display">
<thead>
<tr><th>Person</th><th>Monthly pay</th></tr>
</thead>
<tbody>
<tr><td>Jan Molby</td><td>12</td></tr>
<tr><td>Steve Nicol</td><td>8</td></tr>
<tr><td>Steve McMahon</td><td>9</td></tr>
<tr><td>John Barnes</td><td>15</td></tr>
</tbody>
<tfoot>
<tr><td>TOTAL</td><td>£45,000</td></tr>
</tfoot>
</table>
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>

It seems you are missing few things.
Like correct path to your CSS and JavaScript for your DataTable
You can use directly the CDN for DataTable, also don't forget to add the CDN for jQuery.
You can get the DataTable CDN from here DataTable CDN Link
Check below the sample code.
$(document).ready(function() {
$('#example').dataTable();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<table id="example" class="display">
<thead>
<tr>
<th>Person</th>
<th>Monthly pay</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jan Molby</td>
<td>12</td>
</tr>
<tr>
<td>Steve Nicol</td>
<td>8</td>
</tr>
<tr>
<td>Steve McMahon</td>
<td>9</td>
</tr>
<tr>
<td>John Barnes</td>
<td>15</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>TOTAL</td>
<td>£45,000</td>
</tr>
</tfoot>
</table>

you do something like below:
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
Make sure you have added below two JS:
https://code.jquery.com/jquery-3.5.1.js
https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js
And CSS file:
https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css
Documentation: https://datatables.net/examples/basic_init/table_sorting.html

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

jQuery drag and drop table column

I'm very new to frontend work. I tried understanding all the previous questions about this theme on Stack Overflow. But they are full of things I don't understand. Short story: I want to make a drag and drop table for columns.
I found this site: https://akottr.github.io/dragtable/
I want to make it possible with the drag and drop with jQuery. How can I do it?
Edit
I tried experimenting with info from the page I found above. I want to do the first demo table they show. But I just can't get it to work. I put their jQuery script in my header and after inspection I mimic and call my class with a # (for some reason?? shouldn't they be with a dot?).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My page</title>
<link href="StyleSheet.css" rel="stylesheet" />
<link href="Content/bootstrap-grid.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/jquery-3.3.1.js"></script>
<script src="Scripts/bootstrap.bundle.js"></script>
<script>$('#table).dragtable();</script>
</head>
<body style="cursor: auto;">
<div class="content">
<table class="table table-striped" draggable="true">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Found the answer at this guys git:
https://github.com/alexshnur/drag-n-drop-table-columns
Huge thanks to the guy, Alex!

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>

materialize: make table row accordion header

I am trying to use materialize to create a table that allows for each table row to be clickable. Clicking on a row should expand an accordion under the row that holds more data for the row. I can not seem to get the accordion to open or set the whole as the header for the accordion. I have tried adding the classes straight to the tr's as well as wrapping each tr in a div. neither solution gave the right behavior. Here is the code I currently have:
<script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script type="text/javascript">
$('.collapsible').collapsible({
accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
});
</script>
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr class="collapsible" data-collapsible="accordion">
<td class="collapsible-header">Alvin</td>
<div class="collapsible-body">
<p>
hello
</p>
</div>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>

The Materialize Collapsible needs to be configured on an li element.
Try this:
<table class="bordered">
<thead>
<tr>
<th data-field="id">Name</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header">Alvin</div>
<div class="collapsible-body">
<p>
hello
</p>
</div>
</li>
</td>
<td>Eclair</td>
<td>$0.87</td>
</tr>
<tr>
<td>Alan</td>
<td>Jellybean</td>
<td>$3.76</td>
</tr>
<tr>
<td>Jonathan</td>
<td>Lollipop</td>
<td>$7.00</td>
</tr>
</tbody>
</table>
The layout is not so good, but works as you expect.
If you are using Materialize just for the collapsible, I suggest you use another component, like Bootstrap Collapse