I have a spring boot app that uses thyemeleaf for html and boostrap for design.
I'm looking for a table that can do the following functions
Sort option in the header. Upon clicking it sort all rows according to the value of the particular col
Allow search of values in one particular row
Limit the rows showed in page. E.g. page 1 shows 30 rows, clicking on 2 shows 30 rows
I looked around and saw usage of Javascript but I'm not sure how to use Javascript. Any help if appreciated!
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<title>Home</title>
</head>
<body>
<div class="jumbotron">
<h1 class="display-4">Coronavius tracker application</h1>
<p class="lead">This application tracks the coronavirus situation around the globe</p>
<hr class="my-4">
<div class="container">
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<p class="font-weight-bold" th:text="${worldPop}"></p>
</h3>
</div>
</div>
</div>
</div>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
Using datatables, I was able to get the table with the desired function. My code is as attached
<!DOCTYPE html>
<!-- To use thymeleaf -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready( function () {
$('#dataTable').DataTable();
} );
</script>
<title>Home</title>
</head>
<body>
<!-- Creates a big gray field -->
<div class="jumbotron">
<!-- Big words -->
<h1 class="display-4">Coronavirus tracker</h1>
<!-- Big words description -->
<p class="lead">Tracking this pandemic one at a time</p>
<!-- Marks bottom part of jumbotron -->
<hr class="my-4">
<div class="container">
<!-- Gride layout with each col detonated by class ="col" -->
<div class="row">
<div class="col">
<h3>
<p class="font-weight-bold">Total world cases</p>
<!-- p tag takes up the entire width -->
<p class="font-weight-bold" th:text="${worldCases}"></p>
<p class="font-weight-bold" th:text="${percentage}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">Total world deaths</p>
<p class="font-weight-bold"th:text="${worldDeaths}"></p>
</h3>
</div>
<div class="col">
<h3>
<p class="font-weight-bold">World population</p>
<div class="font-weight-bold" th:text="${worldPop}"></div>
</h3>
</div>
</div>
</div>
</div>
<!-- #id give id to the table and match the javascript
#page-length to match the default entries per page
#data-order to set the default way to display order. It is now 1st col in descending order -->
<table class="table table-striped" id="dataTable" data-page-length='50' data-order='[[1, "desc"]]'>
<thead>
<tr>
<th scope="col">County</th>
<th scope="col">Total cases</th>
<th scope="col">New cases</th>
<th scope="col">Total deaths</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr th:each="item :${alldata}">
<td th:text="${item.country}"></td>
<td th:text="${item.totalCases}"></td>
<td th:text="${item.newCases}"></td>
<td th:text="${item.totalDeaths}"></td>
<td th:text="${item.pop}"></td>
</tr>
</tbody>
</table>
</body>
</html>
Related
Hard refresh removes the search cookie:
cookieId.bs.table.searchText
All other cookie values are maintained including filter values.
Using the refresh button keeps the cookie value. My main issue is the following:
Why does the value get removed with a hard refresh?
I just noticed that the live example has two search options, which I'm not understanding why is happening. The local environment shows only one search. Removing data-search="true" removes both searches.
Code below is available in this live example
Update:
I'm noticed that removing the jquery script only shows one search box instead of two, but the issue still persists with regards to caching. When there are two search boxes, the second box retains the cache. Again the two searches never occur in my local environment.
Update: Removing data filter control options fixes the cookie search issue. Seems like data-filter-control="true" might be the cause.
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<div class="container">
<h1 id="title"></h1>
<div id="toolbar">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="xxx"><span class="glyphicon glyphicon-facetime-video"></span>
Other Dashboard </a> </li>
<li class="nav-item">
<a class="nav-link" href="xxxx"><span class="glyphicon glyphicon-tag"></span> X Dashboard</a>
</li>
<li class="nav-item">
<a class="nav-link" href="xxx"><span class="glyphicon glyphicon-user"></span> Personal Dashboard</a>
</li>
</ul>
</div>
<table id="table"
data-cookie="true"
data-cookie-id-table="cookieId"
data-cookie-expire="2y"
data-toggle="table"
data-toolbar="#toolbar"
data-show-columns="true"
data-show-refresh="true"
data-show-button-text="true"
data-auto-refresh="true"
data-flat="true"
data-search="true"
data-filter-control="true"
data-sort-name="env"
data-sort-order="desc"
data-detail-view="true"
data-detail-view-by-click="true"
data-detail-view-icon="false"
data-detail-formatter="detailFormatter"
data-url="/data.json"
data-mobile-responsive="true"
data-show-search-clear-button="true"
data-show-button-icons="true"
data-buttons-class="primary">
<thead>
<tr>
<th data-field="env" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Environment</th>
<th data-field="job_id_href" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true" data-sorter="sortTable" >Job</th>
<th data-field="repo_id" data-sortable="true">Repo Id</th>
<th data-field="created_by" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Created By</th>
<th data-field="version_id" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">Version</th>
<th data-field="state" data-cell-style="stateCellStyle" data-filter-control="input" data-filter-control-placeholder="Search" data-sortable="true">State</th>
<th data-field="duration" data-sortable="true">Duration</th>
<th data-field="telemetry_ui_href" data-sortable="false">Telemetry</th>
<th data-field="spark_ui_href" data-sortable="false">Spark</th>
<th data-field="logs_ui_href" data-sortable="false">Logs</th>
<th data-field="success_ratio" data-cell-style="cellStyle" data-sortable="true" data-sorter="sortSuccess">Success</th>
<th data-field="update_time_pst" data-cell-style="lastUpdateCellStyle" data-sortable="true">Last Update (PST)</th>
</tr>
</thead>
</table>
</div>
<div class="container">
<br>
<button onclick="darkModeToggle()">Toggle Dark Mode</button>
<a target="_blank" href='__health'>Health</a>
<a target="_blank" href='XXX>Hubble</a>
<a target="_blank" href='XXX'>GitHub</a>
</div>
<script src="http://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/cookie/bootstrap-table-cookie.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/auto-refresh/bootstrap-table-auto-refresh.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/mobile/bootstrap-table-mobile.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/addrbar/bootstrap-table-addrbar.min.js"></script>
```
I'm getting one issue in the datable. I added datatable in my laravel blade file, but when I clicked on the menu (call blade file). Then it shows a normal table, but when I refresh the same page again and then it shows datatable properly. My question is when I click on the menu(call blade file), then why it is not showing datatable properly. It shows a normal table only. How to fix this.
please check imagesthis image is before refresh
this image is after refresh
and this is my blade file
#extends('backEnd.layout')
<!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->
#section('content')
<div class="padding">
<div class="box">
<div class="box-header dker">
<h3>Product List</h3>
<small>
{{ trans('backLang.home') }} /
Product List
</small>
</div>
<table class="table table-bordered" id="table" >
<thead class=" primary">
<tr >
<th class="text-center">Category</th>
<th class="text-center">Title</th>
<th class="text-center">Make</th>
<th class="text-center">Rate</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
#foreach($records as $record)
<tr>
<td class="text-center">{{$record->section_title}}</td>
<td class="text-center">{{$record->title_en}}</td>
<td class="text-center">{{$record->make}}</td>
<td class="text-center">{{$record->rate}}</td>
<td class="text-center">#if($record->status != 1) Used
#else New #endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
#endsection
#section('footerInclude')
<script type="text/javascript">
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#action").change(function () {
if (this.value == "delete") {
$("#submit_all").css("display", "none");
$("#submit_show_msg").css("display", "inline-block");
} else {
$("#submit_all").css("display", "inline-block");
$("#submit_show_msg").css("display", "none");
}
});
</script>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
#endsection
any help will be appreciated.
Thanks in advance.
Your Blade file should be like this.
You should add script files before you write your script.
#extends('backEnd.layout')
<!--page level css starts-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<!--end of page level css-->
#section('content')
<div class="padding">
<div class="box">
<div class="box-header dker">
<h3>Product List</h3>
<small>
{{ trans('backLang.home') }} /
Product List
</small>
</div>
<table class="table table-bordered" id="table" >
<thead class=" primary">
<tr >
<th class="text-center">Category</th>
<th class="text-center">Title</th>
<th class="text-center">Make</th>
<th class="text-center">Rate</th>
<th class="text-center">Status</th>
</tr>
</thead>
<tbody>
#foreach($records as $record)
<tr>
<td class="text-center">{{$record->section_title}}</td>
<td class="text-center">{{$record->title_en}}</td>
<td class="text-center">{{$record->make}}</td>
<td class="text-center">{{$record->rate}}</td>
<td class="text-center">#if($record->status != 1) Used
#else New #endif
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table').DataTable();
$("#checkAll").click(function () {
$('input:checkbox').not(this).prop('checked', this.checked);
});
$("#action").change(function () {
if (this.value == "delete") {
$("#submit_all").css("display", "none");
$("#submit_show_msg").css("display", "inline-block");
} else {
$("#submit_all").css("display", "inline-block");
$("#submit_show_msg").css("display", "none");
}
});
} ;
</script>
#section('footerInclude')
#endsection
I tried different ways to identify the nested frame using page-object i tried like
in_iframe(index: 1) do |frame|..end and i tried with id & class as well but no luck
<div id="tabsWrapper">
<table id="defaultTabs" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td class="tabContentCell">
<div id="tabContentContainer" style="height: 443px;">
<a id="top" name="top"></a>
<div id="tabDefaultContent"> </div>
<div id="tab14036918566282Content" class="tabContent" style="display: none;">
<iframe id="tab14036918566282Frame" class="portal xicSeamlessUI" width="100%" height="716px" frameborder="0" "="" name="tab14036918566282Frame" marginheight="0" marginwidth="0" src="/mywork/ptl/secure/defaultportal" style="height: 443px;">
<!DOCTYPE html>
<html class="ltr yui3-js-enabled gecko ltr js firefox firefox24 firefox24-0 win secure" lang="en-US" dir="ltr">
</iframe>
</div>
<div id="tab14036918654673Content" class="tabContent">
<iframe id="tab14036918654673Frame" class="portal xicSeamlessUI" width="100%" height="716px" frameborder="0" "="" name="tab14036918654673Frame" marginheight="0" marginwidth="0" src="/ncs/secure/jas/create" style="height: 443px;">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<body class="browserFF browserFF3 Init">
<div class="xicSeamlessUI" xic:app="Create" xic:title="Create">
<span id="bFeedback" class="feedback"> </span>
<div id="confirmationWindow69" xic:width="50%">
<div id="contentModalWindow6c" xic:width="50%">
<input id="hiddenText" class="xicInputText" type="text" size="1" style="visibility:hidden" name="hiddenText">
<input id="hiddenCheckBox" type="checkbox" onclick="var wcall=wicketAjaxPost('?wicket:interface=:0:hiddenCheckBox::IBehaviorListener:0:', wicketSerialize(Wicket.$('hiddenCheckBox')),null,null, function() {return Wicket.$('hiddenCheckBox') != null;}.bind(this));" name="hiddenCheckBox" style="visibility: hidden">
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="83%"> </td>
<td width="17%" align="right" nowrap="nowrap">
<label id="categoryDescription65">Select Category: </label>
<span id="categoryDescriptionDropDown66">
<div class="xicInputWrapper xicInputWrapperSelect">
<select id="cellDropDown67" class="xicSmartSelectLoaded" name="categoryDescriptionDropDown:cellDropDown" onchange=".page.showPleaseWait('Processing...');var wcall=wicketAjaxPost('?wicket:interface=:0:categoryDescriptionDropDown:cellDropDown::IBehaviorListener:0:', wicketSerialize(Wicket.$('cellDropDown67')),null,null, function() {return Wicket.$('cellDropDown67') != null;}.bind(this));">
<option value="0" selected="selected">New</option>
<option value="1">Basic</option>
<option value="2">Advanced</option>
<option value="3">Premium</option>
<option value="4">Other</option>
</select>
</div>
</span>
</td>
</tr>
<tr>
<tr>
<tr>
</tbody>
</table>
<div id="myPleaseWait22" class="xicPleaseWait xicFullPageZIndex" style="z-index: 2000; display: none;">
</div>
<div id="PleaseWait" class="xicPleaseWait xicFullPageZIndex" style="z-index: 6000; display: none;">
</body>
</html>
</iframe>
</div>
</div>
</td>
</tr>
<tr>
</tbody>
</table>
Here, there are two frames 1 is active and other hidden.
Exception:
timed out after 30 seconds, waiting for {:css=>"select[name*='Description']", :tag_name=>"select"} to become present (Watir::Wait::TimeoutError)
This seems to me an IEDriver issue when i tried with firefox and chrome it is working fine
Explicitly switching to the frame in question worked for me.
First you switch to the frame and once you are done working inside the frame don't forget to return to your default content:
driver.switch_to.frame "frameName"
Do your stuff within IFrame
driver.switch_to.default_content
To find the solution the selenium docs were helpful as well as a this post about handling Iframes with selenium webdriver.
I got a problem that I can't solve despite searching for answer.
It's the code of the index.php:
<?php
session_start();
?>
<html>
<head>
<title>Elektromechanika Pojazdowa</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#170266">
<center>
<div id="naglowek">ELEKTROMECHANIKA POJAZDOWA</div>
<div id="menu">
<table width="100%">
<tr>
<td width="50%">
<a class="menu" href="index.php?p=main">Strona Główna</a>
</td>
<td width="50%">
<a class="menu" href="index.php?p=contact">Kontakt</a>
</td>
</tr>
</table>
</div>
</center>
<?php
$p = $_GET['p'];
if(!empty($p))
include("$p".'.php');
else
include('main.php');
?>
<div id="stopka">
<center>
<table>
<tr>
<td width="30%">
<center><img src="img/bendiks.jpg"></center>
</td>
<td width="30%">
<center><img src="img/magneti marelli.jpg" width="300px" height="170px"></center>
</td>
<td width="30%">
<center><img src="img/bosch.jpeg"></center>
</td>
</tr>
</table>
</center>
</div>
<div id="link">
<a class="admin" href="index.php?p=admin">Panel adminitracyjny</a>
</div>
</body>
I can't get it to work, because I get error:
Warning: session_start() [function.session-start]: Cannot send session cookie -
headers already sent by (output started at D:\Program Files\WebServ\httpd-users\dla
Gabi\index.php:1) in D:\Program Files\WebServ\httpd-users\dla Gabi\index.php on line 2
I tried using ob_start(); but it just doesn't work. I don't understand why there is a problem, cause session_start(); is the first function, placed even before any html code..
Enable ob_start in php.ini file
<?php
session_start();
ini_set("ob_start","On");
?>
To get to the php.ini on the external hosting server, I think you need to set up a Virtual Private Server (VPS). At least from the problems I myself encountered with the lack of a custom php.ini file on our hosting server, we needed a VPS in order to use our own ini files for the php protocol.
I am using Spring MVC 3 and Thymeleaf. I want to display string in the table but there are no results (blank table cell). What am I doing wrong? My controller class:
#Controller
#RequestMapping(value="table", method = RequestMethod.GET)
public class TableController {
#Autowired
DaneEndpoint daneEndpoint;
public String tabela(Model model){
model.addAttribute("tytul", daneEndpoint.getAll().get(0));
model.addAttribute(model);
return "table";
}
}
and html page (table.html):
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h3 align="center">table</h3>
<div align="left">
<form action="table.html" th:object="${tytul}" method="get">
<fieldset>
<div align="center">
<table border="1">
<thead>
<tr>
<th th:text="">tytul</th>
</tr>
</thead>
<tbody>
<tr>
<td th:text=""><span th:text="#{table.tytul}"/></td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Thanks for help.
<span th:text="#{table.tytul}"/>
`
fetches value from message properties so if table.html is opened directly in browser,it will be blank
If this page is accessed through application, since ,
<th th:text="">
is not valid thymeleaf expression syntax(because of empty string) , parse error will occur.. And
<td th:text=""><span th:text="#{table.tytul}"/></td>
contains span as child of td so, th:text need not be included in td as th:text in td will replace ultimately..
further meta tag is not closed..
Try this
> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head>
> <title></title>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
> </head> <body>
> <h3 align="center">table</h3>
> <div align="left">
> <form action="table.html" th:object="${tytul}" method="get">
> <fieldset>
> <div align="center">
> <table border="1">
> <thead>
> <tr>
> <th >tytul</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td><span th:text="#{table.tytul}"/></td>
> </tr>
> </tbody>
> </table>
> </div>
> </fieldset>
> </form>
> </div> </body> </html>
And if value on table need to be displayed when directly opened in browser for prototyping purpose, try this
> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head>
> <title></title>
> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body>
> <h3 align="center">table</h3>
> <div align="left">
> <form action="table.html" th:object="${tytul}" method="get">
> <fieldset>
> <div align="center">
> <table border="1">
> <thead>
> <tr>
> <th >tytul</th>
> </tr>
> </thead>
> <tbody>
> <tr>
> <td><span th:text="#{table.tytul}"/> <span th:remove="all">content</span></td>
>
> </tr>
> </tbody>
> </table>
> </div>
> </fieldset>
> </form>
> </div> </body> </html>
Seems like you were missing an ending </tr> and ending </div>. try adding that.