I want to let a user fire sql query and then see the result in grails view page.
My QueryController.groovy is
def query(){
def headers = null; //["id","name"]
Sql sql = new Sql(dataSource)
def rowResults = sql.rows(params.query) //GroovyRowResult
rowResults.eachWithIndex { row, index->
if (headers == null) {
headers = row.keySet()
}
}
[headers : headers, resultList: rowResults, total : rowResults.size() ]
}
In grails view page (query.gsp),
<table class="table table-striped">
<thead>
<tr>
<g:each in="${headers}" var="header">
<g:sortableColumn property="header" title="${header}" />
<th></th>
</g:each>
</tr>
</thead>
<tbody>
<g:each in="${resultList}" var="row">
<tr>
<g:each status="counter" in="${row}" var="val">
<td>${val}</td>
</g:each>
</tr>
</g:each>
</tbody>
</table>
The <td>${val}</td> part in view is not working as expected, because it gives result as id=1 instead of 1. I want only value to be displayed there.
Might be a smaller issue though, need to fix it.
Thanks.
Try accessing values by accessing the value on each map:
<table class="table table-striped" border="1">
<thead>
<tr>
<g:each in="${headers}" var="header">
<g:sortableColumn property="header" title="${header}" />
</g:each>
</tr>
</thead>
<tbody>
<g:each in="${resultList}" var="row">
<tr>
<g:each status="counter" in="${row}" var="val">
<td>${val.value}</td>
</g:each>
</tr>
</g:each>
</tbody>
</table>
/
Also in your query action you can get the header directly from the map:
def query(){
def headers = null; //["id","name"]
Sql sql = new Sql(dataSource)
def rowResults = sql.rows("select * from Message;") //GroovyRowResult
// rowResults is a list, you can access it by its index
headers = rowResults[0].keySet()
FYI, what you are giving your users is very powerful and they can run any sort of query against you database even to drop your tables.
Well, I got the following code working as val is KVP.
<tr>
<g:each status="counter" in="${row}" var="val">
<td>${val.value}</td>
</g:each>
</tr>
Related
I have following razor page in my Blazor server app (Code-1). In this razor page I have two dynamic tables. In the first table the CNC AX names of a CNC machine are listed (AX0...AX7). If the user clickes to the axis name, the axis parameters belonging to this axis shall be listed in the second table.
As result if I click to any axis name, I get always the parameters of the last axis (AX7) in the second table.
The axis parameters are read from the two dimension CNC_AX_MD array. I am sure that the array has the correct values for each axis, because if I write the first table like Code-2 (below) everything is working fine. But the number of axis are sometimes much more then in my code, so I have to shorten the code.
I think I have a problem on my dynamic table structure in table-1 with the for loop. What could be the problem? I have tried the act. commented out "StateHasChanged()" but it didn't help.
Code-1
<table>
#{ for (int j = 0; j < 8; j++)
{
<tr>
<td #onclick='#(e => Select_CNC_AX_par(j))'>#CNC_AX_Names[j]</td>
</tr>
//StateHasChanged();
}
}
</table>
<table>
#{ for (int m = 0; m < arraylenght; m++)
{
<tr>
<td >CNC_AX_parameter[m]</td>
</tr>
}
}
</table>
public void Select_CNC_AX_par(int aksno)
{
for(int k=0; k < arraylenght;k++)
{
CNC_AX_parameter[k] = CNC_AX_MD[k, axno];
}
}
Code-2
<table>
#{ <tr>
<td #onclick='#(e => Select_CNC_AX_par(0))'>#CNC_AX_Names[0]</td>
</tr>
<tr>
<td #onclick='#(e => Select_CNC_AX_par(1))'>#CNC_AX_Names[1]</td>
</tr>
<tr>
<td #onclick='#(e => Select_CNC_AX_par(2))'>#CNC_AX_Names[2]</td>
</tr>
<tr>
<td #onclick='#(e => Select_CNC_AX_par(3))'>#CNC_AX_Names[3]</td>
</tr>
<tr>
<td #onclick='#(e => Select_CNC_AX_par(4))'>#CNC_AX_Names[4]</td>
</tr>
<tr>
<td #onclick='#(e => Select_CNC_AX_par(5))'>#CNC_AX_Names[5]</td>
</tr>
<tr>
<td #onclick='#(e => Select_CNC_AX_par(6))'>#CNC_AX_Names[6]</td>
</tr>
<tr>
<td #onclick='#(e => Select_CNC_AX_par(7))'>#CNC_AX_Names[7]</td>
</tr>
}
</table>
Try to use the following code:
<table>
#{
for (int j = 0; j < 8; j++)
{
var Number = j;
<tr>
<td #onclick='#(e => Select_CNC_AX_par(Number))'>#j</td>
</tr>
//StateHasChanged();
}
}
</table>
Do not use a loop variable directly in a lambda expression, such as i in the preceding for loop example. Otherwise, the same variable is used by all lambda expressions, which results in use of the same value in all lambdas.
For more details,you can try to refer to the official doc.
I'd like for my page to initially load with just a search box, and then when someone begins to search that is when the table appears.
My example table is below:
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
} );
</script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th class="none">Branch</th>
</tr>
</thead>
<tbody>
<tr>
<td>Test 1</td>
<td>Test test test</td>
<td>ABC</td>
</tr>
<tr>
<td>Test 2</td>
<td>Test test test</td>
<td>DEF</td>
</tr>
<tr>
<td>Test 3</td>
<td>Test test test</td>
<td>GHI</td>
</tr>
</tbody>
</table>
yes it can be done using ajax call and i suppose you use php.
For example, you can generate a table everytime you press any char, populating the table with the results or using a button to search the keyword you type on the input field.
Example with ajax and php:
var search_string = $('#id_of_the_input_box').val();
$.ajax({
url:"php_file.php",
method:"POST",
data:{action:action},
dataType:"json",
success:function(data){
console.log(data);
}
and the php code using PDO
$search_string = $_POST["string"];
$result = '';
$query = $connection->prepare(" select * from table where name = '%".search_string."' ";
$query->execute();
$query_results->query->fetchAll;
if($query->rowCount() > 0) {
$result = '
<script>
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
});
});
<table id="example" class="display" style="width:100%">
YOUR TABLE ROWS HERE
</table>
';
// foreach loop to populate the table example
foreach ($query_results as $row) {
$result.= '
<tr>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
<td>'.$row["table_column_name_1"].'</td>
'
} else {
echo "No results";
}
}
// echo the generated table as ajax response
echo $result;
Hope you have caught the idea with this example.
I have a view in MVC4 that looks like this:
#model List<Home.Models.Model>
#{
ViewBag.Title = "DPR";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR"}))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
</table>
<div style="background-color:white">
#Html.EditorForModel()
</div>
<div>
</div>
}
And the model.cshtml is simply some of the fields in a single row. I don't want to put headers on that single row as they are repeated as many times as their are in the list. Is there a simple way to make a header for the rows of the model in the editorfor template?
This is how I did it:
<table style="font-size:xx-small" class="table_body">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
#for (var i = 0; i < Model.Count; i++)
{
<tr>
#Html.EditorFor(m=>Model[i])
</tr>
}
</table>
And in the model.cshtml it simple some of the fields each in a TD element.
Not 100% sure that I understand you correctly. Create the table header in the view, then call the EditorTemplate in a for each
#using (Html.BeginForm("AgendaNotes", "Home", FormMethod.Post, new { #id = "formDPR" }))
{
<table style="font-size:xx-small">
<thead>
<tr>
<th>Name</th>
<th>DOD ID</th>
<th>Last Review</th>
<th>Include?</th>
<th>Reason</th>
<th>Notes</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model.Details)
{
#testTemplate(item)
}
</tbody>
</table>
}
Then change the editor template to be for only one row eg.
#helper testTemplate(Details detail)
{
<tr>
<td>#detail.Propery1</td>
<td>#detail.Propery2</td>
</tr>
}
I used an inline helper just to illustrate what I mean. Now you should have a table with one header and lots of rows
Here is the table that I am using to get the table row element that has specific element such as the href that has 'Harvest' in text and also checking if text 'running' exists in the same table row.
<table id="execTable" class="tableHistory jobtable translucent">
<colgroup>
<col class="execid">
<col class="titlecol">
</colgroup>
<tbody>
<tr>
<th>Id</th>
<th>Name</th>
</tr>
</tbody>
<tr id="8571">
<td>8571</td>
<td class="titlecol">
<div id="hitdiv-8571" class="arrow"></div>
Harvest
</td>
<td>09-03-2015 09:45:04</td>
<td>-</td>
<td>2m 6s</td>
<td>running</td>
<td>view/restart</td>
</tr>
<tr id="8571-child" class="childRow" style="display: none;"></tr>
<tr id="8566">
<td>8566</td>
<td class="titlecol">
<div id="hitdiv-8566" class="arrow"></div>
mk
</td>
<td>09-03-2015 03:30:00</td>
<td>09-03-2015 04:16:50</td>
<td>46m 50s</td>
<td>succeeded</td>
<td>view/restart</td>
</tr>
<tr id="8555-child" class="childRow" style="display: none;"></tr>
</table>
I am not able to get the TRs.
WebElement table = driver.findElement(By.id("execTable"));
List<WebElement> trows = table.findElements(By.tagName("tr"));
List<WebElement> all = driver.findElements(By.xpath(".//*[#id='execTable']/*"));
for (WebElement a : all) {
if(a.getTagName().equalsIgnoreCase("tr")) { ....}
}
I was able to get the above code working. Thank you!
I am using jquery's dataTables plugin. I am having skills value as header in my table. I want to serch for users with specific skills. For example as shown in figure i want to search for users who have skill php. Then i should get the name of John. For css i should get name of Mona. The snapshot is here:
You can do this by implementing a custom filter for the datatable, as described here.
Before filtering you have to find, the index of the column you want to filter and check afterwards the value in each row.
This could look somewhat like this:
<input type="text" id="skillFilter" />
<table id="example">
<thead>
<tr>
<th>Skills</th>
<th>PHP</th>
<th>CSS</th>
<th>HTML</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>1</td>
<td>0</td>
<td>1</td>
</tr>
<tr>
<td>Mona</td>
<td>0</td>
<td>1</td>
<td>0</td>
</tr>
</tbody>
</table>
script :
$.fn.dataTable.ext.search.push(
function(settings, data) {
if (skillFilterColumnIndex != undefined) {
//Get the data of each row
var data = data[skillFilterColumnIndex] || "";
return data > 0;
} else {
return 1;
}
});
$("#skillFilter").change(function() {
var skill = $("#skillFilter").val().toLowerCase();
//Find the column index with the skill to filter
$.each($("#example thead th"), function(index, element) {
if (index != 0 && element.innerHTML.toLowerCase() == skill) {
skillFilterColumnIndex = index;
}
});
table.fnDraw();
});