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>
Related
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
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!
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
On my page, I use bootstrap. I created table and it has 3 classes, check it:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Now I use code jQuery. This code added class highlight. Class highlight:
.highlight {
background-color: orange;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
When table has only one class: "table" it's working.
But I must have table-striped and table-bordered. When it is, highlight is working only with even numbers. How can I fix that?
It's a css specificity issue.
Bootstrap applies the alternating row class like this:
.table-striped>tbody>tr:nth-of-type(odd)
You need to be as specific as that or more.
Row highlight example:
.table>tbody>tr.highlight>td {
// change your background color here
}
Cell highlight example:
.table>tbody>tr>td.highlight {
// change your background color here
}
Note: I'm assuming you want to highlight some rows or cells, not the entire table.
If I understand your problem: every time you add highlight with jQuery to your table nothing happens (or not all table raws become orange).
Probably if the background-color of the table isn't set on table but on td.
Try to change simply your CSS selector:
.highlight{
background-color:orange;
}
to
.highlight tr td{
background-color:orange;
}
Watch this example: http://jsfiddle.net/pujsghe6/
In your jQuery code, instead of .highlight use .highlight > tbody > tr
.highlight > tbody > tr {
background-color: orange;
}
I have a bootstrap page with a table loaded from a MySQL db. The table shows but it doesn't show up with the desired format.
The table is set up here.
<script type ="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#job_table').DataTable();
} ); >
</script>
<table id="job_table"
class = "table dataTable"
data-pagination ="true">
<thread>
<tr>
<th>#</th>
<th>Job Title </th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thread>
<tbody>
<?php
$result = mysqli_query($link,"Select * From Jobs");
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
?>
<tr class="info">
<td></td>
<td><?=$row['job_id']?></td>
<td><?=$row['name']?></td>
<td><?=$row['comp_name']?></td>
<td><?=$row['pay']?></td>
<td><?=$row['location']?></td>
<td><?=$row['date_posted']?></td> </tr>
<?php
}
?>
</tbody>
This is what i have in the header section
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="starter-template.css" rel="stylesheet">
<script src="bootstrap/js/respond.js"></script>
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
The table displays data but the pagination setting in the table doesn't do anything when added. The Javascript I have to set up the table in the dataTable doesn't do anything either. I"m not sure what i'm missing.
This is the source of the html table. The rest was omitted because this table has about 500 rows of data.
<div class="tab-pane" id="joblist">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Active Employment Listings</h3>
</div>
<script type ="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#job_table').DataTable();
} ); >
</script>
<table id="job_table"
class = "table dataTable"
data-pagination ="true">
<thead>
<tr>
<th>#</th>
<th>Job Title </th>
<th>Company</th>
<th>Salary</th>
<th>Location</th>
<th>Date Posted</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td></td>
<td>1</td>
<td>VP Marketing</td>
<td>Devify</td>
<td>22.38</td>
<td>222 Lillian Hill</td>
<td>2015-02-17</td>
</tr>
<tr class="info">
<td></td>
<td>2</td>
<td>Administrative </td>
<td>Skiba</td>
<td>10.92</td>
<td>3 Corscot Terrace</td>
<td>2015-02-03</td>
</tr>