I would like to change the border color and add an icon of the right side to search-tool in the bootstrap-table framework.
Also I would like to align to the other buttons at the top of the table.
My code is:
/* SEARCH TOOL */
.search{
width: 25%;
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
line-height: 34px;
}
<table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='descripcion' data-sortable='true' data-switchable='false'>DESCRIPCIÓ</th>
<th data id='image' data-switchable='false'>imatge</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='fecha-mod' data-sortable='true'>FECHA-MOD</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<!— Function to load registres —>
</tr>
</tbody>
</table>
if (this.options.search) {
html = [];
html.push(
'<div class="pull-' + this.options.searchAlign + ' search">',
sprintf('<input class="form-control' +
sprintf(' input-%s', this.options.iconSize) +
'" type="text" placeholder="%s">',
this.options.formatSearch()),
'</div>');
this.$toolbar.append(html.join(''));
$search = this.$toolbar.find('.search input');
$search.off('keyup drop').on('keyup drop', function (event) {
if (that.options.searchOnEnterKey && event.keyCode !== 13) {
return;
}
if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
return;
}
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
if (isIEBrowser()) {
$search.off('mouseup').on('mouseup', function (event) {
clearTimeout(timeoutId); // doesn't matter if it's 0
timeoutId = setTimeout(function () {
that.onSearch(event);
}, that.options.searchTimeOut);
});
}
}
It doesn't works. I think that the problem is that the search-tool use an input tag and the class form-control, I do not sure it.
Maybe you are trying to do like this Live Fiddle Here. I also comment out where I add or change. And btw you don't need that script you added in your question. Any Question ask me in comment. Happy coding :)
$(function(){
$(".search").append('<span class="glyphicon glyphicon-search"></span>');
/* add the span inside search div with append box*/
});
.search {
width: 25%;
position: relative;
}
.search span {
position: absolute; /*Set search icon*/
right: 10px;
top: 10px;
}
.search input[type=text]{
border-color: red; /*Set the border color for search box*/
}
.search input[type=text]:focus{
outline:none;
box-shadow:none; /*If you dont need the shadow on click*/
}
.fixed-table-toolbar .bs-bars,
.fixed-table-toolbar .search,
.fixed-table-toolbar .columns {
position: relative;
margin-top: 10px;
margin-bottom: 10px;
line-height: 34px;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.css">
</head>
<body>
<table class='table-bordered' id='tableprod' data-toggle='table' data-toolbar='#toolbar' data-show-refresh='true' data-show-toggle='true' data-sort-name='name' data-sort-order='desc' data-show-columns='true' data-pagination='true' data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='descripcion' data-sortable='true' data-switchable='false'>DESCRIPCIÓ</th>
<th data id='image' data-switchable='false'>imatge</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='fecha-mod' data-sortable='true'>FECHA-MOD</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<tr>
<!— Function to load registres —>
</tr>
</tbody>
</table>
<!-- Script CDN's-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.0/bootstrap-table.min.js"></script>
</body>
</html>
Related
Using jQuery I have a button Hide Columns option. I want to add a button to each column head in the table. Having added by jQuery is preferred. The Button will hide it's respective column. It appears that the button when appended does not utilize the jQuery to hide column. I have copied and pieced different parts together. Please help me I don't really know this.
$(document).ready(function(){
$("#btn").click(function(){
$("th").append('<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">H</button>' );
});
});
$(function() {
// on init
$(".table-hideable .hide-col").each(HideColumnIndex);
// on click
$('.hide-column').click(HideColumnIndex)
function HideColumnIndex() {
var $el = $(this);
var $cell = $el.closest('th,td')
var $table = $cell.closest('table')
// get cell location - https://stackoverflow.com/a/4999018/1366033
var colIndex = $cell[0].cellIndex + 1;
// find and hide col index
$table.find("tbody tr, thead tr")
.children(":nth-child(" + colIndex + ")")
.addClass('hide-col');
// show restore footer
$table.find(".footer-restore-columns").show()
}
// restore columns footer
$(".restore-columns").click(function(e) {
var $table = $(this).closest('table')
$table.find(".footer-restore-columns").hide()
$table.find("th, td")
.removeClass('hide-col');
})
$('[data-toggle="tooltip"]').tooltip({
trigger: 'hover'
})
})
body {
padding: 15px;
}
.table-hideable td,
.table-hideable th {
width: auto;
transition: width .5s, margin .5s;
}
.btn-condensed.btn-condensed {
padding: 0 5px;
box-shadow: none;
}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style></style>
</head>
<body>
<button id="btn">Hide Columns option</button>
<table class="table table-condensed table-hover table-bordered table-striped table-hideable">
<thead>
<tr>
<th>
Controller
</th>
<th>
Action
<button class="pull-right btn btn-default btn-condensed hide-column" data-toggle="tooltip" data-placement="bottom" title="Hide Column">
x
</button>
</th>
<th>
Type
</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Edit</td>
<td>ActionResult</td>
</tr>
</tbody>
<tfoot class="footer-restore-columns">
<tr>
<th colspan="4"><a class="restore-columns" href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
</body>
</html>
I hope this is you want:
UPDATE:
(function ($) {
$.fn.clickToggle = function (func1, func2) {
var funcs = [func1, func2];
this.data("toggleclicked", 0);
this.click(function () {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
})(jQuery);
//NEW FUNCTION:
function addColumnsOption(view, className) {
if (view == 1) {
$("#myTable thead tr th").append(
"<button class='pull-right btn btn-sm btn-danger btn-condensed " +
className +
"'><i class='bi bi-trash3'></i></button>"
);
} else if (view == 0) {
$("#myTable thead tr th ." + className + "").remove();
}
}
$(document).ready(function () {
$("#btn").clickToggle(
function () {
addColumnsOption(1, "removeButton"); //1 for show
let theadThLength = $("#myTable thead th").length;
for (let i = 0; i < theadThLength; i++) {
$(".removeButton").eq(i).click(function () {
let tbodyTrLength = $("#myTable tbody tr").length;
for (let t = 0; t < tbodyTrLength; t++) {
$("#myTable tbody tr").eq(t).find("td").eq(i).hide();
$("#myTable thead th").eq(i).hide();
$(".footer-restore-columns").removeClass("d-none");
}
});
}
},
function () {
addColumnsOption(0, "removeButton"); //0 for hide
}
);
$(".restore-columns").click(function () {
$("#myTable tbody tr td").show();
$("#myTable thead th").show();
$(".footer-restore-columns").addClass("d-none");
});
});
body {
padding: 15px;
}
.table-hideable td,
.table-hideable th {
width: auto;
transition: width .5s, margin .5s;
}
.btn-condensed.btn-condensed {
padding: 0 5px;
box-shadow: none;
}
/* use class to have a little animation */
.hide-col {
width: 0px !important;
height: 0px !important;
display: block !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<button class="btn btn-sm btn-primary mb-2" id="btn">Show Columns option</button>
<table id="myTable" class="table table-condensed table-hover table-bordered table-striped table-hideable">
<thead>
<tr>
<th>
Controller
</th>
<th>
Action
</th>
<th>
Type
</th>
</thead>
<tbody>
<tr>
<td>Home</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Index</td>
<td>ActionResult</td>
</tr>
<tr>
<td>Client</td>
<td>Edit</td>
<td>ActionResult</td>
</tr>
</tbody>
<tfoot class="footer-restore-columns d-none">
<tr>
<th colspan="4"><a class="restore-columns " href="#">Some columns hidden - click to show all</a></th>
</tr>
</tfoot>
</table>
I have a requirement for an icon with a styled hover-over tooltip within the <thead> of a table. Basically, my hover-over tooltip appears as it should when the user hovers over the icon, however, the bottom half of the tooltip text goes under the <tbody> data.
I'm fairly sure my issue is purely css based, and doesn't have anything to do with the fact that the table is styled by DataTables. The z-index does not appear to be the issue, as I have tried playing with that with no success. I think it's that the tooltip does not want to be able to show outside of it's <thead> parent since it starts in the <thead>.
I have created a TryIt Editor showing the problem, here.
And, since I don't know how long those TryIt Editor URLs last (I assume not forever), I am also including some example code, here:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hover Over Issue Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script>
$(document).ready(function() {
$('#styledtable').DataTable({
"destroy" : true,
"scrollY" : 300,
"scrollCollapse" : true,
"paging" : true,
"autoWidth" : true,
"ordering" : true,
"searching" : false,
"order" : [ [ 0, 'asc' ] ],
"pageLength" : 20,
"lengthChange" : false,
"pagingType" : "full_numbers",
"dom" : '<"top"ip>rt<"bottom"fl><"clear">'
});
});
</script>
<style>
.mySpecialTooltip {
position: relative;
display: inline-block;
float: right;
top: 0px;
right: 0px;
cursor: pointer;
}
.mySpecialTooltip span {
visibility: hidden;
width: 200px;
background-color: black;
color: white;
text-align: left;
padding: 5px 5px;
border-radius: 6px;
white-space: normal;
font-weight: normal;
font-size: 12px;
position: absolute;
z-index: 2;
top: 100%;
left: 50%;
margin-left: -200px;
}
.mySpecialTooltip:hover span {
visibility: visible;
}
</style>
</head>
<body>
<div class="container">
<h2>Hover Over Issue Example</h2>
<p>I need the hover overs on the top right column icons to show up entirely. Hover over the <b>small orange exclamation mark icon</b> which looks like <img src="https://cdn3.iconfinder.com/data/icons/tiny-icons/warning.png"/> above the <b>email</b> header for an example of the problem.</p>
<table class="table" id="styledtable">
<thead>
<tr>
<th style="border: 0px; !important"></th>
<th style="border: 0px; !important"></th>
<th style="border: 0px; !important">
<div class="mySpecialTooltip">
<img src="https://cdn3.iconfinder.com/data/icons/tiny-icons/warning.png" style="cursor: pointer;"/>
<span>
This is some hover over text. It can be long - long enough that it needs to be able to
float over the data in the top rops of the table. So I will just keep typing to ensure
that this box is very long. This is probably long enough.
</span>
</div>
</th>
</tr>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Any help would be greatly appreciated!
It would appear this does indeed have to do with Datatables.
The element.style on class="dataTables_scrollHead" has overflow: hidden. If you remove this, you will have expected functionality.
On my website, I have a class to change font and text size named class='q'. the class will not work even though I copy and pasted this from the home page as It is menu bar for all pages. All other classes work but not this one, Why?
th.q {
font-family: avenir;
font-size: 25px;
}
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH class='q'><a class="hover">About</a></TH>
<TH class='q'><a>Products</a></TH>
<TH class='q'><a>Pricing</a></TH>
<TH class='q'><a>Contact</a></TH>
</TR>
</TABLE>
(Referring to your answer:)
Unfortunately, giving multiple elements the same id invalidates your HTML. If the #font selector was enough to fix the problem, you should be able to give the <table> an id instead and select its <th> descendants:
#navigation th {
font-size: 25px;
}
<TABLE id='navigation' class='a' border='0' width='100%'>
<TR height='20%'>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Also, the border, width, and height attributes should be in CSS, not HTML:
#navigation th {
font-size: 25px;
}
#navigation {
border: none;
width: 100%;
}
#navigation tr {
height: 20%;
}
<TABLE id='navigation' class='a'>
<TR>
<TH><a class="hover">About</a></TH>
<TH><a>Products</a></TH>
<TH><a>Pricing</a></TH>
<TH><a>Contact</a></TH>
</TR>
</TABLE>
Of course, you shouldn't be using tables for layout, anyway.
Since nothing else works I have used Ids to fix it.
HTML
<BODY>
<TABLE class='a' border='0' width='100%'>
<TR height='20%'>
<TH id='font'><a class="hover">About</a></TH>
<TH id='font'><a>Products</a></TH>
<TH id='font'><a>Pricing</a></TH>
<TH id='font'><a>Contact</a></TH>
</TR>
</TABLE>
CSS
#font {
font-family: avenir;
font-size: 25px;
}
I'm working on application for booking rooms and I use Angular 2. I would like to select cell in my table and get values of vertical and horizontal headers, like "Room 1" and "9:00". I'm getting data for table's headers from server. This is my html code:
<div class="table">
<table class="schedule-table" *ngIf="titles && titles.length && intervals && intervals.length">
<tr>
<th class="vertical-header-cell"></th>
<th class="horizontal-header-cell" *ngFor="let title of titles">{{ title }}</th>
</tr>
<tr *ngFor="let interval of intervals">
<th class="vertical-header-cell">{{ interval }}</th>
<th class="body-cell" *ngFor="let title of titles"></th>
</tr>
</table>
My css:
table {
width: 100%;
margin-top: 100px;
border-collapse: collapse;
}
th {
height: 60px;
}
table, th, td {
border: 1px solid black;
}
.body-cell:hover{
background-color: green;
}
.vertical-header-cell {
width: 100px;
}
My table
use a click function
<th class="horizontal-header-cell" *ngFor="let title of titles" (click)="clickHeader(title,intervals)" >{{ title }}</th>
clickHeader(title: any, intervals: any){
console.log(title + intervals)
}
I need to print my html so I lay out the way I want the print out to be. But when I click on the print button and get directed to the print preview, the layout are all messed up. Please see my code below:
in html
<div id="print-section" *ngIf="propertyLedger">
<h2>SOSA | PMIS</h2>
<hr>
<table class="table borderless">
<tr>
<th class="col-md-2">Transaction Date</th>
<td>{{dateToday | date}}</td>
</tr>
<tr>
<th class="col-md-2">Collecting Agent</th>
<td>{{propertyLedger.CollectinAgentName}}</td>
</tr>
<tr>
<th class="col-md-2">Unit Name</th>
<td>{{propertyLedger.UnitName}}</td>
</tr>
<tr>
<th class="col-md-2">Payment Type</th>
<td>{{propertyLedger.PaymentType}}</td>
</tr>
<tr>
<th class="col-md-2">O.R. Number</th>
<td>{{propertyLedger.ORNumber}}</td>
</tr>
<tr>
<th class="col-md-2">Remarks</th>
<td>{{propertyLedger.Remarks}}</td>
</tr>
</table>
<hr>
<h3>Details</h3>
<hr>
</div>
<button
class="btn btn-primary" (click)="print()">Print</button>
in the ts file
print() {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<style>
//........Customized style.......
</style>
</head>
<body onload="window.print();window.close()">${printContents}</body>
</html>`
);
popupWin.document.close();
}
in my layout
as soon as I click the print =>
in my print preview
It seems that the texts in the left part of the table goes to the center. Can you help me with this please. If you have a way to get my desired layout without any table that will be best! Thank you so much.
Just read up. A default in HTML has these properties.
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: center
}
You have to change it to something like this:
th {
display: table-cell;
vertical-align: inherit;
font-weight: bold;
text-align: left;
}
Moreover, if you are not using HTML5 you can also make the tag something like this:
<th align="left" class="col-md-2">Unit Name</th>