th:each datatable is not working in Bootstrap 4 - spring-boot

I am using bootstrap4 DataTable.I am using spring boot. I have passed my data from my controller like bellow..
List<User> list = new ArrayList<>();
#GetMapping(value = "/staff-details")
public String staffDetails(Model model) {
model.addAttribute("staffList",list );
return "staff-details";
}
It is working fine when like bellow..that means there is no loop
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
</tbody>
When I want to populate data dynamically from database, it is not working..I am using like bellow..
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script src=" https://cdn.datatables.net/fixedheader/3.1.6/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.6/css/fixedHeader.bootstrap4.min.css">
<script type="text/javascript">
$(document).ready(function () {
var table = $('#example').DataTable({
fixedHeader: true
});
});
</script>
</head>
<body>
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr th:each="user: ${staffList}">
<td th:text="${user.firstName +' '+ user.lastName}"></td>
<td th:text="${user.email}"></td>
<td th:text="${user.restaurantId}"></td>
<td th:text="${user.restaurantBranchId}"></td>
<td th:text="${user.userRole}"></td>
</tr>
</tbody>
</table>
</body>
Please help me why it is not working in loop..

Related

Why do i have a blank pdf?

Im trying to generate and pdf and show it using Laravel-7 but when i generate my pdf it is blank
So this is my ProductController and its PDF method:
public function PDFProducts(){
$products = Product::all();
$pdf = \PDF::loadView('pdf-products', compact('products'));
return $pdf->stream('products.PDFProducts');
}
And this is my route:
Route::get('/pdfproduct', 'Backend\ProductController#PDFProducts')->name('products.PDFProducts');
And this is my pdf view named pdf-products.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Productos</title>
<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">
</head>
<body>
<div class="card-body">
<table id="example1" class="table table-striped table-responsive" width="100%">
<thead class="thead">
<tr>
<th style="display: none">Codigo</th>
<th>ID</th>
<th>Producto</th>
<th>Tipo de Producto</th>
<th>Marca</th>
<th>Modelo</th>
<th>Moneda de Compra</th>
<th class="quitarDecimales">Costo Total</th>
<th>Moneda de Venta</th>
<th class="quitarDecimales">Precio de Lista</th>
<th>Margen Bruto</th>
<th style="width: 12%">Accion</th>
</tr>
</thead>
<tbody>
#foreach($products as $product)
#if($product->status == 1)
<tr>
<td style="display: none">{{ $key+1 }}</td>
<td>{{ $product->id }}</td>
<td>{{$product->marca->brandName . " " . $product->modelo->modelName}}</td>
<td>{{ $product['ptype']['productType']}}</td>
<td>{{ $product->marca->brandName }}</td>
<td>{{ $product->modelo->modelName}}</td>
<td >{{ $product->coin }}</td>
<td class="numero">{{ $product->costUSD }}</td>
<td>{{$product->sale_coin}}</td>
<td class="numero">{{$product->list_priceUSD}}</td>
<td class="numero">{{$product->marginUSD}}</td>
#php
$count_product = App\Model\Purchase::where('product_id',$product->id)->count();
#endphp
</tr>
#endif
#endforeach
</tbody>
</table>
</div><!-- /.card-body -->
</body>
</html>
And in my view-products.blade.php i have the following button:
<a title="PDF" id="pdf" class="btn btn-sm btn-info btn btn-success" href="{{route('products.PDFProducts')}}" ><i class="fas fa-print" ></i></a>
And this is how my PDF looks like:
This is what i get in my dev tools console while inspecting:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body cz-shortcut-listen="true">
<div class="container"></div>
</body>
</html>
And not my h1
Try edit your controller to:
public function PDFProducts(){
$products = Product::all();
view()->share('products', $products);
$pdf = \PDF::loadView('pdf-products',
compact('products'));
return $pdf->stream('products.PDFProducts');
}

Displaying/Extracting Table Data

I plan on building a very simple webapp on Go using it's html/template module for the front end.
One typical function for the app is as follows:
Get some data from external app
Display that data in a table in one of the Go templates
Permit the user to edit certain rows, sort etc.
Retrieve data from the table to be stored in DB in backend, or sent on to other application.
Very early version of the template looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=9">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Delivery App</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous">
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">Tran id</th>
<th scope="col">Assembly Instructions</th>
<th scope="col">Miscalleanous</th>
</tr>
</thead>
<tbody>
{{ range . }}
<tr>
<th scope="row">{{.Id}}</th>
<td>{{.TranId}}</td>
<td>{{.Memo}}</td>
<td>{{.AssemblyInstructions}}</td>
<td>{{.AssemblingUnits}}</td>
</tr>
{{ end }}
</tbody>
</table>
</div>
<!-- /container -->
</body>
</html>
I would like to parse data from the table element and store to db, or process further in subsequent request to another service. Can anyone recommend some ways this could be achieved?

Attribute th:each is not allowed here(Error in Thymeleaf template)

I have created the application that stores the Information about dogs in the database,while running the project the tables where created but dogs information were not updates.
There is an error in running this below html file
The following code is not working
<html lang="en">
<head>
<!-- META SECTION -->
<title>Dog Rescue</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- END META SECTION -->
<!-- BEGIN STYLE -->
<style>
table, th, td {
border: 1px solid black;
padding: 1px;
}
</style>
<!-- END STYLE -->
</head>
<body>
<h2>Current Dogs In Rescue</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Rescue Date</th>
<th>Vaccinated</th>
</tr>
</thead>
<tbody>
<tr th:each="dogs : ${dogs}">
<td th:text="${dogs.id}">Text ...</td>
<td th:text="${dogs.name}">Text ...</td>
<td th:text="${dogs.rescued}">Text ...</td>
<td th:text="${dogs.vaccinated}">Text...</td>
</tr>
</tbody>
</table>
</div>
<h2>Add A Dog</h2>
<form action="#" th:action="#{/}" method="post">
<label>Name<input type="text" name="name" id="name"></input></label>
<label>Vaccinated<input type="text" name="vaccinated" id="vaccinated"></input></label>
<label>Rescued<input type="text" name="rescued" id="rescued"></input></label>
<input type="submit" value="Submit"></input>
</form>
</body>
</html>
The html file is not fetching the information.
Kindly help me
Whole Project is available in
https://github.com/arulsuju/DogRescue.git
You are using the same variable name for iteration as the list variable (dogs)
, Consider using different name for iteration variable like (dog), so the code should be:
<tr th:each="dog : ${dogs}">
<td th:text="${dog.id}">Text ...</td>
<td th:text="${dog.name}">Text ...</td>
<td th:text="${dog.rescued}">Text ...</td>
<td th:text="${dog.vaccinated}">Text...</td>
</tr>

Click on table of webpage with vbscript

I would like to click on the first row of the table as given below. (Ex on '5101170017') with vbscript code. with which I am trying to scrape the webpage info. How can I do this. as this webpage is password protected I can not share the details.
<html>
<head>
<script src='../../accidentweb/interface/DwrUtilsDao.js'></script>
<script src='../../accidentweb/engine.js'></script>
<script src='../../accidentweb/util.js'></script>
<base href="http://114.255.167.200:8092/cidasEN/extend/">
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<LINK href="css/css.css" type=text/css rel=stylesheet>
<title>Functional Query results</title>
</head>
<body bottomMargin=0 leftMargin=0 topMargin=0 >
<TABLE border="1" bordercolorlight="#6D6D6D" cellspacing="1"
bordercolordark="#C0C0C0" width="120%"
cellpadding="0" bgcolor="#FFFFFF" class=font9 style="BORDER-bottom: #4D5E8C 1px solid" >
<tr bgcolor="#CCCCCC" >
<td class="title_1" width ='6%' align="center">department</td>
<td class="title_1" width ='6%' align="center">case number</td>
<td class="title_1" width ='10%' align="center">time of accident</td>
<td class="title_1" width ='20%' align="center">location of scene of accident</td>
<td class="title_1" width ='6%' align="center">operator</td>
</tr>
<tr bgcolor="#FFFFFF" style="cursor:hand"
onmouseover="onmouseoverTR(this)"
onmouseout="onmouseoutTR(this)"
onclick="clearwsInfo('2017070100002','2017070100002',this);"
ondblclick='doSelect("auditflowForm","2017070100002");'>
<TD align="center">
<script type="text/javascript" >
outprint('ChengDu Branch');
</script>
</TD>
<TD align="center">
<script type="text/javascript" >
outprint('5101170017');
</script>
</TD>
<TD align="center">
<script type="text/javascript" >
outprint('2017-06-02 17:50');
</script>
</TD>
<TD align="left">
<script type="text/javascript" >
outprint('成赤高速成自段自贡往成都方向48km');
</script>
</TD>
<TD align="left">
<script type="text/javascript" >
outprint('杨东升');
</script>
</TD>
</TR>
<script anguage="javascript" >
//clearwsInfo("2017070100002","2017070100002","");
</script>
</TABLE>
</body>
</html>
I've tried the following:
Set iframe = IE.Document.getelementbyID("listInfoFrame")
For Each ele In iframe.contentDocument.getElementsByTagName("td")
msgbox(ele.innertext)
If InStr(ele.innertext, "department") > 0 Then
Set Row = ele.ParentNode.NextSibling
Row.Click
Exit For
End If
Next
I am getting an error as Permission Denied 'iframe.contentDocument. Any one can help me please

kendoDropDownList resetting inside kendoGrid after sort

I've added a kendoDropDownList in one of the cells in a kendoGrid, and it works fine at first. However, when I click on a column header to sort, the cell loses its formatting. Anyone have any idea how to prevent this? Here's a simple sample:
<html>
<head>
<title>test</title>
<link href="/kendoui.web.2013.2.716.open-source/styles/kendo.common.min.css" rel="stylesheet" type="text/css"/>
<link href="/kendoui.web.2013.2.716.open-source/styles/kendo.default.min.css" rel="stylesheet" type="text/css"/>
<script src="/kendoui.web.2013.2.716.open-source/js/jquery.min.js"></script>
<script src="/kendoui.web.2013.2.716.open-source/js/kendo.web.min.js" type="text/javascript"></script>
</head>
<body>
<table class="gridTable">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="options">Options</th>
</tr>
</thead>
<tbody>
<tr>
<td class="wrap">Item</td>
<td>
<select class="menuBar" style="width:80px;">
<option>Big</option>
<option>Medium</option>
<option>Small</option>
</select>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function() {
$(".gridTable").kendoGrid({
sortable: true
});
$(".menuBar").kendoDropDownList({
});
});
</script>
</body>
</html>
The Grid is reconstructed each time you perform Page/Sort/Group etc. For such cases you need to use the dataBound event of the Grid to re-initialize any widgets or executed any JavaScript code that affects what is displayed in the Grdi.

Resources