Many thanks for reading this.
I have asked as well in Adobe forums with no luck.
I am building a small library application for school books.
I have created a database with lets say 2 tables
Books ( ID_Book , Writer , Title , Copies) and
Loans ( ID_Book , Load_ID , Loan_Date ) etc
I have used correctly spry to create easily a table which print the book list in a table
with pagination .
var ds1 = new Spry.Data.XMLDataSet("ajaxquery.php", "root/row", {sortOnLoad: "Writer", sortOrderOnLoad: "ascending"});
ds1.setColumnType("ID_Book", "number");
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize:10 });
var pv1PagedInfo = pv1.getPagingInfo();
pv1.setColumnType("ID_Book", "number");
I have made the necessary declarations to produce the dataset for the Loans
var ds3 = new Spry.Data.XMLDataSet("ajaxallloans", "root/row", {sortOnLoad: "ID_Book", sortOrderOnLoad: "ascending"});
ds3.setColumnType("ID_Book", "number");
ds3.setColumnType("ID_Dan", "number");
I would like to find a way to change the table row color for the BOOKS table IF an ID_Book is within the Loans table - ds3.
The table is created
<div spry:region="pv1" id="bibliapv">
<div spry:state="loading" class="loading" >Loading...</div>
<div spry:state="ready">
<table>
<tr >
<th width="75" spry:sort="ID_Book"> Book No</th>
<th width="123" spry:sort="Writer">Writer </th>
etc...
</tr>
<tr spry:repeat="pv1" spry:select="mySelectClass" spry:hover="hover">
<td >{ID_Book}</td>
<td>{writer}</td>
etc ..
</tr>
</table>
</div>
</div>
<div>
Many thanks again.
Dinos - Greece
Many thanks again for reading .
I found a solution based on the ideas drawn from
labs.adobe.com/technologies/spry/samples/data_region/CustomColumnsSam ple.html
I have added the following code:
created a css rule
lets say
.match {
background-color: #0CF;
}
In spry:region add the class {cssrule} which is added dynamically shortly after <tr class="{cssrule}" spry:repeat="pv1" spry:select="mySelectClass" spry:hover="hover">
3.
Then just before closing tag added (you could put it earlier in code)
<script type="text/javascript">
ds2.addObserver({
onPostLoad:function( ds2, data ){
var data = ds2.getData();
var pv1data = pv1.getData();
for( var i = 0; i < pv1data.length; i++ )
{
for (var j =0 ; j< data.length ; j++)
{ if ((data[j].Writer).toString()== (pv1data[i].Writer).toString() ) //or whatever you like!
{pv1data[i].cssrule="match"; }
}
}
}
});
</script>
Related
I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.
I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)
There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|
Here is a basic filter example http://jsfiddle.net/urf6P/3/
It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.
EDITED to include the HTML and javascript from the jsfiddle:
$(function() {
$('#filter1').change(function() {
$("#table td.col1:contains('" + $(this).val() + "')").parent().show();
$("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
});
});
Slightly enhancing the accepted solution posted by Jeff Treuting, filtering capability can be extended to make it case insensitive. I take no credit for the original solution or even the enhancement. The idea of enhancement was lifted from a solution posted on a different SO post offered by Highway of Life.
Here it goes:
// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
return $(a).text().toUpperCase()
.indexOf(m[3].toUpperCase()) >= 0;
};
// Now perform the filtering as suggested by #jeff
$(function() {
$('#filter1').on('keyup', function() { // changed 'change' event to 'keyup'. Add a delay if you prefer
$("#table td.col1:icontains('" + $(this).val() + "')").parent().show(); // Use our new selector icontains
$("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide(); // Use our new selector icontains
});
});
This may not be the best way to do it, and I'm not sure about the performance, but an option would be to tag each column (in each row) with an id starting with a column identifier and then a unique number like a record identifier.
For example, if you had a column Produce Name, and the record ID was 763, I would do something like the following:
<table id="table1">
<thead>
<tr>
<th>Artist</th>
<th>Album</th>
<th>Genre</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td id="artist-127">Red Hot Chili Peppers</td>
<td id="album-195">Californication</td>
<td id="genre-1">Rock</td>
<td id="price-195">$8.99</td>
</tr>
<tr>
<td id="artist-59">Santana</td>
<td id="album-198">Santana Live</td>
<td id="genre-1">Rock</td>
<td id="price-198">$8.99</td>
</tr>
<tr>
<td id="artist-120">Pink Floyd</td>
<td id="album-183">Dark Side Of The Moon</td>
<td id="genre-1">Rock</td>
<td id="price-183">$8.99</td>
</tr>
</tbody>
</table>
You could then use jQuery to filter based on the start of the id.
For example, if you wanted to filter by the Artist column:
var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
if (!regex.test(this.innerHTML)) {
this.parentNode.style.backgroundColor = '#ff0000';
}
});
You can filter specific column by just adding children[column number] to JQuery filter. Normally, JQuery looks for the keyword from all the columns in every row. If we wanted to filter only ColumnB on below table, we need to add childern[1] to filter as in the script below. IndexOf value -1 means search couldn't match. Anything above -1 will make the whole row visible.
ColumnA | ColumnB | ColumnC
John Doe 1968
Jane Doe 1975
Mike Nike 1990
$("#myInput").on("change", function () {
var value = $(this).val().toLowerCase();
$("#myTable tbody tr").filter(function () {
$(this).toggle($(this.children[1]).text().toLowerCase().indexOf(value) > -1)
});
});
step:1 write the following in .html file
<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
<table id="myTable">
<tr class="header">
<th style="width:60%;">Name</th>
<th style="width:40%;">Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbkop</td>
<td>Sweden</td>
</tr>
<tr>
<td>Island Trading</td>
<td>UK</td>
</tr>
<tr>
<td>Koniglich Essen</td>
<td>Germany</td>
</tr>
</table>
step:2 write the following in .js file
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
// Loop through all table rows, and hide those who don't match the search query
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[0];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
How can I dynamically calculate a percentage in a datatable when a search is applied ?
The result should be like this :
<tr>
<td>10%</td><td>100</td>
<td>90%</td><td>900</td>
</tr>
The percentage should be based on the total of rows shown.
The following example shows you a basic approach.
The end result looks like this - note you may get a small rounding error when summing the percentages:
The code is as follows:
UPDATE - There was a problem with my original solution - it used jQuery to populate DataTable cells with the calculated percentages. That meant DataTables did not respond to sorting/filtering for the percentages column. It's better to use DataTables functions to populate the data cells.
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr><th>ID</th><th>Amount</th><th>Percent</th></tr>
</thead>
<tbody>
<tr><td>1</td><td>123.4</td><td class="percent"></td></tr>
<tr><td>2</td><td>234.5</td><td class="percent"></td></tr>
<tr><td>3</td><td>543.21</td><td class="percent"></td></tr>
<tr><td>4</td><td>76</td><td class="percent"></td></tr>
<tr><td>5</td><td>87</td><td class="percent"></td></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
// wait for table and data to finish being initialized:
"initComplete": function( settings, json ) {
populatePercentages();
}
});
function populatePercentages() {
var total = 0.0;
// first calcuate the total:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
// assumes amounts are not null, all numeric, and are in column 2:
total = total + Number(this.data()[1]);
});
// then calculate the percentage for each row:
$('#example').DataTable().rows().every( function ( rowIdx, tableLoop, rowLoop ) {
var amount = this.data()[1];
// calculate percent to 2 decimal places:
var percentage = Math.round((amount / total) * 10000) / 100;
var cells = $('#example').DataTable().cells(rowIdx, 2);
cells.every( function () {
this.data(percentage);
});
});
}
});
</script>
</body>
Points to note:
1) It uses a "percent" class for the cells where percentages will be shown. This makes selection easier.
2) You can do something similar as (1) for the amounts cells also. I did not, here.
3) The code loops through the table data twice: Once to calculate the grand total amount; and again to calculate the percentages.
4) You would need to adjust assumptions about column offsets to fit your table design.
5) There is more validation which should really be added, to handle missing or non-numeric data, to make the code less brittle.
Handling the case when a search is applied:
Filtering:
The above solution can be enhanced to re-calculate percentages when data is filtered.
1) There are two places where the rows() function is used. In both places change this to the following: rows( { search: 'applied' } ). This will ensure only visible rows are considered when percentages are calculated.
2) Add a new section of code to handle keyup events for the search (filter) box. In my case the selector for this input control is as shown below - but this will need to be edited for other datatables with different IDs (my example table's ID is example):
<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({
...
});
function populatePercentages() {
...
}
// catch filter events and re-calculate percentages accordingly:
$('div#example_filter.dataTables_filter > label > input').keyup(function (e) {
populatePercentages();
});
});
</script>
With these changes, a filtered list will look like this:
I have an object with arrays which is nothing but JSON reply from server which I converted into Object and now it looks like this (but lot of values into it):-
Object_return:{
name:[1,25,2,24,3,78],
age:[2,34,4,78]
}
here name and age is dynamic coming from the server, so I do not know what exact values coming there so I can not refer it while iterating through the for loop
<th v-for = "item in Object_return.name">
and also I want to show this in a DataTable so the first row should looks like this
------------------
1 25
-------
name 2 24
-------
3 78
--------------------
second row
---------------------
2 34
-------
age 4 78
------------------------
and so on and so forth for all the values coming from the server
Does someone have an idea how to do this
You can iterate over an object and get the key value as the second argument.
<tr v-for="val, key in Object_return">
Here, key will be the name of the property.
Then, since you want to group the arrays in pairs, I suggest a computed property to massage the data into the format you want.
Here is a working example.
console.clear()
new Vue({
el: "#app",
data:{
serverData: {
name:[1,25,2,24,3,78],
age:[2,34,4,78]
}
},
computed:{
massaged(){
return Object.keys(this.serverData).reduce((acc, val) => {
// split each array into pairs
const copy = [...this.serverData[val]]
let pairs = []
while (copy.length > 0)
pairs.push(copy.splice(0, 2))
// add the paired array to the return object
acc[val] = pairs
return acc
}, {})
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
<table>
<tr v-for="val, key in massaged">
<td>{{key}}</td>
<td>
<table>
<tr v-for="pair in val">
<td>{{pair[0]}}</td>
<td>{{pair[1]}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I have a table with few thousand records on few pages in a simple html table.. I made a search function that works fine apart from one thing... It displays only one result in a table (which is great cause it means it works!).But... I was wondering is there a way to display back the table with all records, with the one that i was searching for in the middle and highlighted? Here's a simplified table that I have :
<table class="nogap" cellpadding="1" bgcolor="#00000" cellspacing="1" style="margin:110px 0 0 5px; width:100%; border-color:#B6D6F6;" >
<tbody>
<?php include 'dbconn.php';?>
$con = mysqli_connect($host,$user,$pass,$db) or (header( 'Location: errorpage.php' ));
if (mysqli_connect_errno($con)) { header( 'Location: errorpage.php' ); }
$sql = "SELECT * FROM $tb1 ORDER BY (Serial_num +1) LIMIT $offset, $rowsperpage";
$result = mysqli_query($con, $sql) or (header( 'Location: errorpage.php' ));
$row = mysqli_num_rows($result);
while ($row = $result->fetch_assoc())
{
$product = $row['Prod_type'].$row['Serial_num'];
<tr id="mstrTable" class="lovelyrow">
<td width="5%"><?php echo $product;?></td>
<td width="5%"><?php echo $row['Customer'];?></td>
<td width="7%">
<a href="#"
onmouseover="ajax_showTooltip(window.event,'getptn.php?prd=<?php echo $p;?>',this);return false"
onmouseout="ajax_hideTooltip()">
<?php echo$row['Prod_info'];?>
</a>
</td>
</tr>
}
</table>
Thanks!
First of all don't give the same html id attribute to each row (mstrTable). Html Ids should be unique per page.
Instead mark table rows with unique ids, eg:
$html .= "<td id='row_".$row['id']."'>"
Then do a search query first, remember item id, figure out what page should be queried, query the whole page, attach classess 'greyedout' and 'highlighted' to rows accordingly and then you might try this javascript function to scroll down to the item:
https://developer.mozilla.org/en-US/docs/Web/API/element.scrollIntoView
I am using DOJO ItemFileReadStore with dojox.grid.DataGrid to show Data Inside a Grid
Please see the Image here
http://imageshare.web.id/viewer.php?file=kdfvrkmn6k7xafmi4jdy.jpg
EMployee.Java
public class Employee {
String name;
String dept;
// Setters and Getters
}
This is My Servlet
response.setContentType("text/x-json;charset=UTF-8");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
List list = new ArrayList();
Employee emp1 = new Employee();
Employee emp2 = new Employee();
emp1.setDept("CSE");
emp1.setName("Vamsi");
emp2.setDept("EEE");
emp2.setName("Raju");
list.add(emp1);
list.add(emp2);
List jsonresponse = new ArrayList();
for (int i = 0; i < list.size(); i++) {
JSONObject nextObject = new JSONObject();
nextObject.put("name", list.get(i));
jsonresponse.add(nextObject);
}
JSONObject json = new JSONObject();
json.put("label", "name");
json.put("items", jsonresponse.toArray());
response.getWriter().write(json.toString());
}
This is MY JSP Page
<body class=" claro ">
<span dojoType="dojo.data.ItemFileReadStore" jsId="store1" url="http://localhost:8080/Man/MyServlet2"></span>
<table dojoType="dojox.grid.DataGrid" store="store1"
style="width: 100%; height: 500px;">
<thead>
<tr>
<th width="150px" field="name">Name</th>
<th width="150px" field="dept">Dept</th>
</tr>
</thead>
</table>
Please see the Image here
http://imageshare.web.id/viewer.php?file=kdfvrkmn6k7xafmi4jdy.jpg
Please help , Thank you .
+1 for posting the server output (firebug screenshot) in your question. This makes a lot easier for people to help you - for example I can easily see that the data format is still not quite right. You are getting better at both dojo and stackoverflow, it seems!
Remember that the ItemFileReadStore expects the data to be in a particular format. Your servlet is producing:
{label: "name", items: [
{name: {dept: "CSE", name: "Vansi"}},
{name: {dept: "ABC", name: "Abcd"}}
]}
You see you are telling the store that each item's "name" is an object with some properties ("dept" and "name"). This is why the grid shows object Object in the name column. It should be:
{label: "name", items: [
{dept: "CSE", name: "Vansi"},
{dept: "ABC", name: "Abcd"}
]}
I'm not very good with java, but I believe only a small change in your servlet is required:
// The for loop that adds employees to jsonresponse.
for (int i = 0; i < list.size(); i++)
{
// Instead of adding the
Emloyee e = (Employee)list.get(i);
JSONObject nextObject = new JSONObject();
nextObject.put("name", e.getName());
nextObject.put("dept", e.getDept());
jsonresponse.add(nextObject);
}
In fact, it's possible that you can just do json.put("items", list.toArray()); instead of adding each employee to jsonresponse.