I am using bootstrap-table and I would like to color certain columns red or green based on the value that they are having.
I am having the following table:
function ajaxRequest(params) {
var url = 'https://jsonplaceholder.typicode.com/todos'
$.get(url + '?' + $.param(params.data)).then(function(res) {
params.success(res)
console.log(res)
})
}
function rowStyle(row, index) {
if (row.trx_type.includes("Purchase")) {
return {
css: {
'background-color': 'lightcoral';
}
}
}
if (row.trx_type.includes("Sale")) {
return {
css: {
'background-color': 'lightgreen';
}
}
}
}
function BuySellFormatter(value, row, index) {
if (row.title.includes("et")) {
return "Purchase"
}
return "Sale"
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<h2>Products</h2>
<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" data-row-style="rowStyle" class="table table-striped table-hover">
<thead>
<tr>
<th data-field="userId" scope="col">userId</th>
<th data-field="id" scope="col">id</th>
<th data-field="title" scope="col">title</th>
<th data-field="completed" scope="col" data-formatter="BuySellFormatter">Buy/Sell</th>
<th data-field="completed" scope="col">completed</th>
</tr>
</thead>
</table>
Is there a way to style each row like the following:
I am using rowStyle to apply my style, however, as you can see above the css is not correctly applied.
Any suggestions what I am doing wrong?
I appreciate your replies!
Based on your data-field, there's no property for trx_type therefore in your rowStyle function, the row.trx_type will be undefined.
You can achieve the effect similar to your BuySellFormatter method, by accessing the title property.
function ajaxRequest(params) {
var url = 'https://jsonplaceholder.typicode.com/todos'
$.get(url + '?' + $.param(params.data)).then(function(res) {
params.success(res)
console.log('res', res)
})
}
function rowStyle(row, index) {
if (row.title.includes("et")) {
return {
css: {
'background-color': 'lightcoral'
}
}
} else {
return {
css: {
'background-color': 'lightgreen'
}
}
}
}
function BuySellFormatter(value, row, index) {
if (row.title.includes("et")) {
return "Purchase"
}
return "Sale"
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<h2>Products</h2>
<table id="table_2" data-toggle="table" data-height="1200" data-page-size="50" data-ajax="ajaxRequest" data-pagination="true" data-row-style="rowStyle" class="table table-striped table-hover">
<thead>
<tr>
<th data-field="userId" scope="col">userId</th>
<th data-field="id" scope="col">id</th>
<th data-field="title" scope="col">title</th>
<th data-field="buysell" scope="col" data-formatter="BuySellFormatter">Buy/Sell</th>
<th data-field="completed" scope="col">completed</th>
</tr>
</thead>
</table>
Related
I'm trying achieving a datatable like in laravel the yajra datatable, so I thought that I will try the jquery datatable all of them works, but it says no data available and whenever I search or sort it says no data available, even if the data is there. Anyways here is the code, I also added the picture so you would understand. Thank you in advance :)
Picture :
enter image description here
Client.js:
<table className="table table-striped" id="table">
<thead className="thead-dark">
<tr>
<th>Name</th>
<th>Address</th>
<th>Mobile</th>
<th>Email</th>
<th>Gender</th>
<th>Birthday</th>
<th>Facebook Page</th>
<th>Facebook Name</th>
<th>Existing</th>
<th>Remarks</th>
<th>Actions</th>
</tr>
</thead>
<tbody>{this.clientList()}</tbody>
</table>
my index.html :
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<script>
$(document).ready(function () {
$('#table').DataTable();
});
</script>
Solved it using this to do it:
import MUIDataTable from "mui-datatables";
const columns = [
{
name: "name",
label: "Name",
options: {
filter: true,
sort: true,
},
},
];
render() {
const { clients } = this.state;
<MUIDataTable data={clients} columns={columns} />
}
I'm trying to use a bootstrap table with an ajax request like in this example:
https://examples.bootstrap-table.com/#options/table-ajax.html
But, like in the example, my data don't load and I only get a message saying "Loading, please wait...".
I tried to hide the message by using bootstrapTable('hideLoading'); but then I only get "No matching records found".
Do you have some ideas why either the example on the official website is not working ?
View some code:
function ajaxRequest(params) {
$.ajax({
type: "GET",
url: "getAjax.php",
dataType: "json",
success: function(data) {
params.success({
"rows": data,
"total": data.length
})
},
error: function(er) {
params.error(er);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
id="rtcapi">
<thead class="thead-light">
<tr>
<th data-field="id">#</th>
<th data-field="status">Status</th>
<th data-field="ln_demander">Last name</th>
<th data-field="fn_demander">First name</th>
</tr>
</thead>
I tried to console.log some tests in the js function and it seems it isn't called by the html...
Thank you for your answers !
Did you add Bootstrap and table JS?
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
Yes, I added all these css and js scripts :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Please add
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
after jquery.min.js
function ajaxRequest(params) {
$.ajax({
type: "GET",
url: "getAjax.php",
dataType: "json",
success: function(data) {
params.success({
"rows": data,
"total": data.length
})
},
error: function(er) {
params.error(er);
}
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
<table data-toggle="table" data-detail-view="true" data-detail-view-icon="false" data-detail-view-by-click="true" data-ajax="ajaxRequest" data-detail-formatter="detailFormatter" data-id-field="id" data-page-list="[10, 25, 50, 100, ALL]" class="table table-bordered table-sm table-hover table-responsive"
id="rtcapi">
<thead class="thead-light">
<tr>
<th data-field="id">#</th>
<th data-field="status">Status</th>
<th data-field="ln_demander">Last name</th>
<th data-field="fn_demander">First name</th>
<th data-field="date_request">Date request</th>
<th data-field="name">Name application</th>
<th data-field="irn">IRN</th>
<th data-field="internal">Internal/External</th>
<th data-field="description">Description</th>
<th data-field="users">Users</th>
<th data-field="country">Country</th>
<th data-field="valid_proof">Validation</th>
<th data-field="date_prod">Date for prod</th>
</tr>
</thead>
I am trying to append chrome history URL, lastVisitTime, and Sno, everything work fine when URL is print as static text.
Problem arises when I print url's in table, it keep appending url, i don't understand this behaviour.
Here is popup.js
var count = 0;
var table = url = "";
var tbody = document.getElementById('tbody');
chrome.history.search({text: '', maxResults: 2}, function(data) {
data.forEach(function(page) {
count++;
url = page.url;
table += '<tr class="table-warning"><td scope="row">'+count+'</td><td>'+ url +'</td><td>'+page.lastVisitTime+'</td></tr>';
console.log('url', url);
});
tbody.innerHTML += table;
});
popup.html
<!DOCTYPE html>
<html>
<head>
<title>History tracker</title>
<link rel="stylesheet" href="bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Website</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
After checking and wasting much time with it, I have found it was an CSS issue,
The container class was creating the problem so I removed the container class. It was width issue, the width of popup was not enough to show urls, so I removed time column and provide fixed width to URL column.
<!DOCTYPE html>
<html>
<head>
<title>History tracker</title>
<link rel="stylesheet" href="bootstrap.min.css">
<style>
table{
overflow-x: scroll;
}
td#history_url {
max-width: 500px;
word-break: break-word;
min-width: 500px;
}
</style>
</head>
<body>
<div class="">
<div class="row">
<div class="col-md-12">
<table class="table table-hover responsive">
<thead>
<tr>
<th scope="col">Sno</th>
<th scope="col">Website</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
</div>
</div>
</div>
<script src="popup.js"></script>
</body>
</html>
My html header:
<link rel='stylesheet' href='/stylesheets/style.css' />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
<script type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
jquery:
function apply_pagination() {
console.log("apply_pagination called")
console.log("total pages", totalPages)
$pagination.twbsPagination({
totalPages: totalPages,
visiblePages: 6,
onPageClick: function (event, page) {
displayRecordsIndex = Math.max(page - 1, 0) * recPerPage;
endRec = (displayRecordsIndex) + recPerPage;
displayRecords = records.slice(displayRecordsIndex, endRec);
console.log("i am inside onpageclick");
generate_table();
}
});
}
html:
<div class="container">
<div class="table-responsive">
<h2>View Installment Details</h2>
<table class="table">
<tbody id="emp_body">
<tr>
<th>Customer ID</th>
</tr>
<tr>
<th>Transaction ID</th>
</tr>
<tr>
<th>First Due Amount</th>
</tr>
<tr>
<th>First Due Date</th>
</tr>
<tr>
<th>Second Due Amount</th>
</tr>
<tr>
<th>Second Due Date</th>
</tr>
</tbody>
</table>
<div id="pager">
<ul id="pagination" class="pagination-lg"></ul>
</div>
</div>
</div>
The console.log inside onPageClick is not being called. Is there a reason why ? It works in my staging environment but not in production.
EDITED:
Added html code for pagination. It works well in staging but not production.
The reason for twbs pagination to not display data is because your variable totalPages has a value of 1, as per this code function:
// hide if only one page exists
if (this.options.hideOnlyOnePage && this.options.totalPages == 1) {
if (this.options.initiateStartPageClick) {
this.$element.trigger('page', 1);
}
return this;
}
Make sure totalPages is >1 or it won't display any pager.
I have a Bootstrap table somewhat like this:
<table id="myTable">
<tr>
<th data-field="name" data-formatter="nameFormatter"></th>
<th data-field="number" data-formatter="numberFormatter"></th>
<th class="newClass"></th>
</tr>
</table>
jQuery
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
// $('.newClass').removeClass('newClass');
$('.newClass').addClass('shown') // <-- this doesn't seem to work
}
CSS
td.newClass {
background-image: url("../../Content/Images/open.png");
}
tr.shown td.newClass {
background-image: url("../../Content/Images/close.png");
}
I am trying to addClass() on the row click event of the table but it doesn't seem to work. Am I missing something or doing something incorrectly.
It appears that your CSS does not match your markup:
tr.shown td.newClass
{
background-image: url("../../Content/Images/close.png");
}
Which is looking for the shown class on the table-row. But it looks like you are adding the shown class to the table-cell:
$('#myTable').on('click-row.bs.table', function (e, row, $element) {
//$('.newClass').removeClass('newClass');
$('.newClass').addClass('shown') // isn't $('.newClass') the cell and not the row?
}
UPDATE:
To fix this you can change your CSS:
td.newClass.shown { ... }
or your jQuery:
$element.addClass('shown');
It will help you :
$(document).ready(function(){
$("#myTable tr").on('click',function(){
$(this).find(".newClass").addClass("shown");
});
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>SPLessons</title>
<script data-require="jquery#2.1.4" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body >
<div class="container">
<div class="jumbotron">
<h3>
SPLessons.com
</h3>
<table id="myTable" class="table table-bordered">
<tr>
<th data-field="name" data-formatter="nameFormatter"></th>
<th data-field="number" data-formatter="numberFormatter"></th>
<th class="newClass"></th>
</tr>
</table>
</div>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>