I am using Bootstrap to build a website that calculates some one-variable statistics and displays the result. However, when the results are displayed, the table looks very uneven, as shown here (in the bottom table:
The contents of the table rows are filled by a JavaScript function (which does work).
.table {
width: 80vw;
content-align: center;
margin: 20px auto;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Statistics</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"> </script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Mean</th>
<th scope="col">Mode</th>
<th scope="col">Standard Deviation</th>
<th scope="col">Variance</th>
<th scope="col">Range</th>
</tr>
</thead>
<tbody>
<tr id="others">
</tr>
</tbody>
</table>
</body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table table-striped table-hover responsive" style="width:100%">
<thead>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</thead>
<tbody>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
</tbody>
</table>
1- THs needs to be inside a TR (table row)
2- TH and TD needs to match (use colspan to match if you don't have the relative TD).
<tbody>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr id="others">
<td colspan="6"></td>
</tr>
</tbody>
</tbody>
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 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 have following javascript:
$(function(){
$table = $('#myTable')
.tablesorter({
theme: 'blue',
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ['zebra','filter'],
widgetOptions: {
zebra: ["even", "odd"],
// filter_anyMatch replaced! Instead use the filter_external option
// Set to use a jQuery selector (or jQuery object) pointing to the
// external filter (column specific or any match)
filter_external : '.search',
// add a default type search to the first name column
filter_defaultFilter: { 1 : '~{query}' },
// include column filters
filter_columnFilters: true,
filter_placeholder: { search : 'Search...' },
filter_saveFilters : true,
filter_reset: '.reset'
}
})
// needed for pager plugin to know when to calculate filtered rows/pages
.addClass('hasFilters')
.tablesorterPager({
container: $(".table-pager"),
output: '{page} of {filteredPages} ({filteredRows})',
size: 5
});
$('#search').quicksearch('table tbody tr', {
delay: 500,
show: function () {
$(this).removeClass('filtered');
$table.trigger('pageSet'); // reset to page 1 & update display
},
hide: function () {
$(this).hide().addClass('filtered');
$table.trigger('pageSet'); // reset to page 1 & update display
},
onAfter: function () {
$table.trigger('update.pager');
}
});
});
(function(b,k,q,r){b.fn.quicksearch=function(l,p){var m,n,h,e,f="",g=this,a=b.extend({delay:100,selector:null,stripeRows:null,loader:null,noResults:"",matchedResultsCount:0,bind:"keyup",onBefore:function(){},onAfter:function(){},show:function(){this.style.display=""},hide:function(){this.style.display="none"},prepareQuery:function(a){return a.toLowerCase().split(" ")},testQuery:function(a,b,d){for(d=0;d<a.length;d+=1)if(-1===b.indexOf(a[d]))return!1;return!0}},p);this.go=function(){for(var c=0,b=
0,d=!0,e=a.prepareQuery(f),g=0===f.replace(" ","").length,c=0,k=h.length;c<k;c++)g||a.testQuery(e,n[c],h[c])?(a.show.apply(h[c]),d=!1,b++):a.hide.apply(h[c]);d?this.results(!1):(this.results(!0),this.stripe());this.matchedResultsCount=b;this.loader(!1);a.onAfter();return this};this.search=function(a){f=a;g.trigger()};this.currentMatchedResults=function(){return this.matchedResultsCount};this.stripe=function(){if("object"===typeof a.stripeRows&&null!==a.stripeRows){var c=a.stripeRows.join(" "),f=a.stripeRows.length;
e.not(":hidden").each(function(d){b(this).removeClass(c).addClass(a.stripeRows[d%f])})}return this};this.strip_html=function(a){a=a.replace(RegExp("<[^<]+>","g"),"");return a=b.trim(a.toLowerCase())};this.results=function(c){"string"===typeof a.noResults&&""!==a.noResults&&(c?b(a.noResults).hide():b(a.noResults).show());return this};this.loader=function(c){"string"===typeof a.loader&&""!==a.loader&&(c?b(a.loader).show():b(a.loader).hide());return this};this.cache=function(){e=b(l);"string"===typeof a.noResults&&
""!==a.noResults&&(e=e.not(a.noResults));n=("string"===typeof a.selector?e.find(a.selector):b(l).not(a.noResults)).map(function(){return g.strip_html(this.innerHTML)});h=e.map(function(){return this});f=f||this.val()||"";return this.go()};this.trigger=function(){this.loader(!0);a.onBefore();k.clearTimeout(m);m=k.setTimeout(function(){g.go()},a.delay);return this};this.cache();this.results(!0);this.stripe();this.loader(!1);return this.each(function(){b(this).on(a.bind,function(){f=b(this).val();g.trigger()})})}})(jQuery,
this,document);
following html:
<form>
<div>
<input id="search" type="search" placeholder="Search" />
</div>
</form>
<div class="table-pager">Show
<select class="pagesize">
<option selected="selected" value="5">5</option>
<option value="10">10</option>
</select>entries | <span class="pagedisplay"></span> |
<button type="button" class="btn prev">←</button>
<button type="button" class="btn next">→</button>
</div>
<table id="myTable">
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th>Three</th>
<th>Four</th>
</tr>
</thead>
<tbody>
<tr>
<td>abc 123</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>56</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>87</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>0</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>abc 111</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>56</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>87</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>0</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
<tr>
<td>abc 222</td>
<td>10</td>
<td>Koala</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>abc 1</td>
<td>234</td>
<td>Ox</td>
<td>http://www.yahoo.com</td>
</tr>
<tr>
<td>abc 9</td>
<td>10</td>
<td>Girafee</td>
<td>http://www.facebook.com</td>
</tr>
<tr>
<td>zyx 24</td>
<td>767</td>
<td>Bison</td>
<td>http://www.whitehouse.gov/</td>
</tr>
<tr>
<td>abc 11</td>
<td>3</td>
<td>Chimp</td>
<td>http://www.ucla.edu/</td>
</tr>
<tr>
<td>abc 2</td>
<td>56</td>
<td>Elephant</td>
<td>http://www.wikipedia.org/</td>
</tr>
<tr>
<td>abc 9</td>
<td>155</td>
<td>Lion</td>
<td>http://www.nytimes.com/</td>
</tr>
<tr>
<td>ABC 10</td>
<td>87</td>
<td>Zebra</td>
<td>http://www.google.com</td>
</tr>
<tr>
<td>zyx 1</td>
<td>999</td>
<td>Koala</td>
<td>http://www.mit.edu/</td>
</tr>
<tr>
<td>zyx 12</td>
<td>0</td>
<td>Llama</td>
<td>http://www.nasa.gov/</td>
</tr>
</tbody>
</table>
It works almost good. I have one issue only.
When I click X to reset filter - nothings to happens.
desired result - filter should reset and table should update.
Also I have a problem when I erase symbols in search field - table don't update
How to fix this issue?
It looks like the quicksearch demo no longer works properly.
So, instead of using the quicksearch plugin, you could use the filter widget to match content in all columns:
<input class="search" type="search" data-column="all">
then include that input as an external filter, and hide the filter row
filter_external : '.search',
filter_columnFilters: false
To do the same thing, and have the "x" in the input work properly.
Full code & demo:
$(function () {
$table = $('#myTable')
.tablesorter({
theme: 'blue',
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ['zebra', 'filter'],
widgetOptions: {
zebra: ["even", "odd"],
filter_external: '.search',
filter_columnFilters: false
}
})
.tablesorterPager({
container: $(".table-pager"),
output: '{page} of {filteredPages} ({filteredRows})',
size: 5
});
});
have already tried adding needed plugin in head section
<script src="https://my-script-hosting.googlecode.com/files/jquery.tablesorter.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/addons/pager/jquery.tablesorter.pager.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.21.5/addons/pager/jquery.tablesorter.pager.min.js"></script>
I need to drag and drop table rows by selecting desired rows from on table to another table. First provide option to select needed rows from one table and then all the selected rows need to be drag and drop into some other table.
I have done the sample to drag and drop single row from on table to another. Find the below code:
html:
<div id="table1" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td collspan = "2" >
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td collspan = "2">
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="table2" class="bitacoratable">
<table>
<thead>
<tr>
<th>ID</th>
<th>ClassName</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Class 1</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>1</td>
<td>Student 1</td>
</tr>
<tr class="draggable_tr">
<td>2</td>
<td>Student 2</td>
</tr>
<tr class="draggable_tr">
<td>3</td>
<td>Student 3</td>
</tr>
<tr class="draggable_tr">
<td>4</td>
<td>Student 4</td>
</tr>
<tr class="draggable_tr">
<td>5</td>
<td>Student 5</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>2</td>
<td>Class 2</td>
</tr>
<tr class="childrow">
<td>
<table class="childgrid">
<tr class="draggable_tr">
<td>6</td>
<td>Student 6</td>
</tr>
<tr class="draggable_tr">
<td>7</td>
<td>Student 7</td>
</tr>
<tr class="draggable_tr">
<td>8</td>
<td>Student 8</td>
</tr>
<tr class="draggable_tr">
<td>9</td>
<td>Student 9</td>
</tr>
<tr class="draggable_tr">
<td>10</td>
<td>Student 10</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Script:
$("#table1 .childgrid tr, #table2 .childgrid tr").draggable({
helper: 'clone',
revert: 'invalid',
start: function (event, ui) {
$(this).css('opacity', '.5');
},
stop: function (event, ui) {
$(this).css('opacity', '1');
}
});
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(ui.draggable).appendTo(this);
}
});
$(document).on("click", ".childgrid tr", function () {
$(this).addClass("selectedRow");
});
CSS:
table
{
border-collapse:collapse;
}
table, td, th
{
border:1px solid black;
}
.bitacoratable {
height: 400px;
overflow-y: auto;
width: 220px;
float:left;
}
#table1 {
margin-right: 100px;
}
.selectedRow {
background-color: #E7E7E7;
cursor: move;
}
How to do it for mutilple rows?
Regards,
Karthik.
You could use draggable's helper function. There's a nice implementation here.
Here's how it looks using the above as a guideline for your particular code:
JsFiddle Demonstration:
Explanation of what's going on:
(1) If there's only one selected, then we'll just treat this as a single drag and drop. Because it was not clicked yet (mouse holding down and dragging right away), we'll manually add the selectedRow class to ensure it gets properly removed from its original location.
(selected.length === 0) {
selected = $(this).addClass('selectedRow');
}
(2) Make a temporary container to store all the rows as one unit, as if we were dragging one item.
var container = $('<div/>').attr('id', 'draggingContainer');
container.append(selected.clone().removeClass("selectedRow"));
return container;
(3) You can modify the CSS so that we're always clicking on the items before it shows the move cursor. I already did, but feel free to change it as you like.
(4) Now we append all the table rows in our temporary divider into the .childgrid we chose to drop into and remove all elements that originally were selected.
$("#table1 .childgrid, #table2 .childgrid").droppable({
drop: function (event, ui) {
$(this).append(ui.helper.children());
$(this) is what we chose, and we're appending the elements inside our temporary divider that the helper returns, which are the table rows.
$('.selectedRow').remove();
}
Now to get rid of those table rows that we selected earlier.
});
Let me know if there are any bugs and I'll try my best to sort them out. It works on my end. Since you can highlight the text in the table rows, there could possibly be some issues if you drag and drop too fast and you're highlighting text rather than selecting the row itself.