How to show CSV data as HTML in Internet Explorer

sangal_ak04 · 12-31-2012, 12:56 PM

Hi

Summary:
- Lets say on a Unix/Linux server, I have a file called "html.csv" at some location (where apache can read/see it using http://... way).
or
-- if you want, you can save this file in Windows (lets say on your desktop).

- If on Linux/Unix box, Lets say I have apache running on the server, i.e. if I go to http://myLinuxserver.com:8080/mydocs/report.html
, then, it'll show "report.html" file (THIS file is what I'm either trying to generate / just create a simple html file and tell it to
read a .csv file within it with the concept of reading OBJECTS, PS my next reply, bullet 2 / snapshot.
or
-- IF you want, you can do this on windows, and then you just need to open the file in Internet Explorer and tell where is .html / .csv.

- Now, this report.html file can be either a fully generated HTML file from a text based .csv file ... or it can a simple HTML file and somewhere
telling in the HTML code to go read a .csv file and show data on the fly. SEE my next reply for more info. bullet 2.

- html.csv file looks like this / similar to this format:

Code:

UserID,FName,LName,Email,Loc,Project,AccessType,Status
00001,GIGA,GOGA,giga.goga@ali.com,Denver,SETI,RW,Active
00002,FOFA,GOGA,fofa.goga@abc.com,Kansas,NASA,RO,InActive
00003,DAGA,SAGA,daga.saga@xyz.com,Denver,CERN,RO,Active
00004,HIRA,MOTI,hira.moti@ten.com,Denver,UCBL,RW,InActive
00005,UMFA,LUFA,umfa.lufa@zen.com,Parker,NASA,RW,Active

What I want:
- To show this file CSV field file rows in Internet Explorer
- I'll convert the CVS rows to HTML acc. to my formatting and convert the row/column in a tabular format.
- To show only those rows which will match the following fields i.e. Filtered data.
UserID,FName,LName,Email,Loc,Project,AccessType,Status

- There'll be value boxes for each of these fields in which user will provide either a value or "All" (default).
- There will be a "Generate" button i.e. it'll show the filtered data acc. to user's selection for each field.

Help needed:
- What's the best way to achieve the filtered data.
- i.e. if User selects "All" for each field, then all 5 rows will be displayed.
- i.e. if User selects "All" for each field but gives "InActive" for "Status" field, then only row# 2 and 5 will be displayed.
- i.e. if User selects "NASA" for "Project" field, then only row# 2 and 5 will be displayed.

PHP ??? --or any other simple way to achieve this. Thanks.

or

Shall I use "Jenkins" CI tool with Plugin: "HTML Publisher Plugin"
i.e. Jenkins will call my script which will convert CSV file into HTML tabular form with color here n there and using the above plugin, I can just show the resultant .html file. The only con here is,
- Apart from entering the values for fields, user has to click buttons 2 times (once for launching the Jenkins job and one for the build button in parametrized job)-- instead of 1 click (in PHP case) for Generate button?
- User might have to log in first if you put the job in a Jenkins instance which contains other jobs (which requires some authentication).

NevemTeve · 01-02-2013, 01:16 AM

Only 5 lines? Do it with JavaScript.

theNbomr · 01-03-2013, 01:30 PM

Your question needs a bit of clarification. Are you looking for code to perform the translation, or are you simply looking for the final HTML output? If code, where will the code run? As there is an HTML aspect, it is reasonable to imagine that the code will run on a web server; yes? The source CSV file is on the server, or is it posted to the server as data, or...?
You've also described a 'behavior', which is far beyond the scope of a simple HTML file. Behaviors imply a system of processing, and again it would be reasonable to conclude that this will be a web application, and not just a simple file format conversion. The act of 'selecting' in a web browser implies that there will be a HTTP GET or HTTP POST request to a web server. You have probably underestimated the scope of your requirement. By your description, it is likely that you will need to know or learn how to use PHP on a web server, or to write CGI code on a web server.

--- rod.

sangal_ak04 · 01-09-2013, 04:37 PM

Quote:

Originally Posted by NevemTeve

Only 5 lines? Do it with JavaScript.

Let me clarify. Also, I have updated the original question (at top) with file level details and where it can reside.

To NevemTeve's reply: Number of rows in the file can be "N" number of lines, I'm expecting somewhere between 2,000 - 10,000

To theNbomr: Initially I was looking for some kind of code (PHP/Shell Script/Java) to convert CSV to HTML but at this moment, I'm not.

I found after more googling that, there's a way you can just create a simple HTML file and tell it, where's your .csv file on a server.

For ex: if you see the below code, coding in HTML done is minimal i.e. just defining what columns...and later at the end, i'm just saying "go" read this ".csv" file. Create a sample html.csv and report.html file (shown below) and save it on your desktop / Linux server location (from where you can access the html file from apache...http way. You'll notice that it's showing the data in html.csv, I just need to filter capability now. PS bullet 1 below.

Quote:

<html>
<head><title>SVN Access Users</title></head>
<body>

<table datasrc='#data' id="table1">

<thead>
<tr><th>UserId</th><th>FName</th><th>LName</th><th>Email</th><th>Location</th><th>Project</th><th>AccessType</th><th>Status</th></tr>
</thead>

<tbody>
<td><span datafld='UserId'> </span></td>
<td><span datafld='FName'></span></td>
<td><span datafld='LName'> </span></td>
<td><span datafld='Email'> </span></td>
<td><span datafld='Loc'> </span></td>
<td><span datafld='Project'> </span></td>
<td><span datafld='AccessType'> </span></td>
<td><span datafld='Status'> </span></td>
</tbody>

</table>

<script language="javascript" type="text/javascript">
setFilterGrid("table1");
</script>

<object ID=data classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param nAme="DataURL" value="html.csv">
<param nAme="UseHeader" value="true">
</object>

</body>
</html>

So, at this moment, my main goal is... either I have a full HTML (in a particular format) --- or just a .csv file, sitting on a server (lets say Linux box).

i.e. if I have the .csv file,
Then, I'll put an .html page on that server's running apache site, saying, read the HTML file, which in turn is set to read "html.csv" file.

i.e. if I have a fully formatted HTML file (that I can get somehow after converting .csv into HTML), then it's just a matter or showing it with Filter capability.

Filter capability seems like very EASY deal, if we see the following links. May be you can advise, what needs to be done after seeing the links.

1. http://tablefilter.free.fr/ --- This approach requires the file to be in a specific HTML format i.e. it'll not read from .csv, but
who knows if we can do it as I pasted the code above and using the approach in it.

2. The above snapshot of HTML code, I pasted above in this reply. I mean, I'm able to show what's inside html.csv file on Internet explorer successfully, I think I just need to figure out, how to use what the first link (the above bullet) is telling me to do with bullet 2 concept.
OR see this link: http://stackoverflow.com/questions/1...a-in-html-page

3. http://stackoverflow.com/questions/5...-on-a-web-page --- This approach takes PHP approach, just see the top ANSWER.

theNbomr · 01-09-2013, 06:47 PM

According to your last Stackoverflow link, the method you show in your sample HTML code is an IE-only system. If the audience is all IE, I'd say you're done. If you need to support other browsers, I think you need code to convert the CSV data to HTML, whihc would probably become an HTML <TABLE>. Once you've got it in HTML Table format, you can then apply methods from the TableFilter javascript package that you referenced. That will let you pretty-up the table containing the CSV data.

You've edited your original post with clearer requirements. It now seems clear that you are in fact specifying a web application. The acts of submitting a form ('value boxes' and '"Generate" button') and potentially 'logging in' implies that you will have server-side processing. It isn't clear whether your application is simply to filter the content of a static CSV file, or if there is a more interactive component. If simple filtering is all you require, then javascript on the browser is probably sufficient, as NevemTeve has already suggested.

--- rod.

sangal_ak04 · 01-09-2013, 06:58 PM

OK.

The following code is what I'm getting so far. Now, instead of defining the table within HTML, I want to use the data source concept, i.e. within <object>..</object> so that i can directly read the .csv (instead of worrying about creating a HTML file first acc. to the format).

Steps to achieve this behaviour:
1. Get/Download "TableFilter" (containing the .js) folder on Windows Desktop / any Linux/Unix location.
If the download folder which contains the above folder is TableFilter_EN, rename it to TableFilter.
* * *
PENDING: Somehow I'm not getting the nice table style like per the bullet 1 link EXAMPLES: http://tablefilter.free.fr/ex.php#tbl5
as the table in IE is showing just black text with white background i.e. seems like missing table style / .css thing.

2. Where ever you put the above folder, at the same location, create the following "report.html" file and open in IE. That's it... using the HTML
way. Still looking how to do by just reading, .csv way.

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css" media="screen, projection">
@import "includes/common.css";
</style>
<style type="text/css" media="screen">
div#navmenu li a#lnk02{
color:#333; font-weight:bold;
border-top:2px solid #ff9900;
background:#fff;
}
</style>
<link rel="stylesheet" type="text/css" href="TableFilter/filtergrid.css" media="screen" />

<script src="TableFilter/tablefilter_all_min.js" language="javascript" type="text/javascript"></script>

</head>

<body>
<table id="table1" cellpadding="0" cellspacing="0">
<caption>
WORLD INTERNET USAGE AND POPULATION STATISTICS
</caption>
<tr>
<th>World Regions</th>
<th>Population ( 2007 Est.)</th>
<th>Population % of World</th>
<th>% Population ( Penetration )</th>
<th>Usage % of World</th>
</tr>
<tr>
<td>Africa</td>
<td>933,448,292</td>
<td>14.2 %</td>
<td>3.5 %</td>
<td>3.0 %</td>
</tr>
<tr>
<td>Asia</td>
<td>3,712,527,624</td>
<td>56.5 %</td>
<td>10.5 %</td>
<td>35.6 %</td>
</tr>
<tr>
<td>Europe</td>
<td>809,624,686</td>
<td>12.3 %</td>
<td>38.6 %</td>
<td>28.6 %</td>
</tr>
<tr>
<td>Middle East</td>
<td>193,452,727</td>
<td>2.9 %</td>
<td>10.0 %</td>
<td>1.8 %</td>
</tr>
<tr>
<td>North America</td>
<td>334,538,018</td>
<td>5.1 %</td>
<td>69.4 %</td>
<td>21.2 %</td>
</tr>
<tr>
<td>Latin America / Caribbean</td>
<td>556,606,627</td>
<td>8.5 %</td>
<td>16.0 %</td>
<td>8.1 %</td>
</tr>
<tr>
<td>Oceania / Australia</td>
<td>34,468,443</td>
<td>0.5 %</td>
<td>53.5 %</td>
<td>1.7 %</td>
</tr>
</table>

<script language="javascript" type="text/javascript">
//<![CDATA[
var tableProps = {
paging: true,
alternate_rows: true,
col_width: ["220px","170px",null,null,null], //prevents column width variations
paging_length: 5,
results_per_page: ['# rows per page',[2,4,6,8,10,15,20,30,50,75,100]],
filters_row_index: 1,
highlight_keywords: true,
selectable: true,
btn_reset_text: "Clear all ",
btn_next_page_text: 'Next >',
btn_prev_page_text: '< Prev',
btn_last_page_text: 'Last >>',
btn_first_page_text: '<< First',
col_0: 'select',
col_1: 'select',
col_2: "none",
col_3: 'select',
col_4: 'select',
sort_num_asc: [0],
refresh_filters: true,
rows_counter: true,
rows_counter_text: "Total records : ",
loader: true,
btn_reset: true,
loader_text: "Filtering data...",
remember_grid_values: true
};
var tf = setFilterGrid( "table1",tableProps );
//]]>
</script>



</body>
</html>

sangal_ak04 · 01-09-2013, 07:23 PM

If I use the .csv, it's showing the rows/columns, but just reading the .csv file, BUT, filtering and all other funcationalities defined using tag <script>...</script> are NOT working.. Seems like due to non-availability of HTML formatted code, which was there in above post. It seems like, I have to convent .csv to .html and then prepare a final "report.html" by prefixing the top portion + putting the converted .html within i.e. contents inside <table>..</table> tag + finally suffixing rest of the code (after <table>...</table> tag) like in the example posted above.

OR -- is there any other easy way? to just ready the .csv, dynamically convert it for what "TableFilter" contained, .js script needs?

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript" src="TableFilter/tablefilter.js"></script>
</head>

<body>
<table datasrc='#data' id="table1" cellpadding="0" cellspacing="0">
<thead>
<tr><th>UserId</th><th>FName</th><th>LName</th><th>Email</th><th>Location</th><th>Project</th><th>AccessType</th><th>Status</th></tr>
</thead>

<tbody>
<td><span datafld='UserId'></span></td>
<td><span datafld='FName'></span></td>
<td><span datafld='LName'></span></td>
<td><span datafld='Email'></span></td>
<td><span datafld='Loc'></span></td>
<td><span datafld='Project'></span></td>
<td><span datafld='AccessType'></span></td>
<td><span datafld='Status'></span></td>
</tbody>
</table>

<script language="javascript" type="text/javascript">
//<![CDATA[
var tableProps = {
paging: true,
alternate_rows: true,
col_width: ["220px","170px",null,null,null], //prevents column width variations
paging_length: 5,
results_per_page: ['# rows per page',[2,4,6,8,10,15,20,30,50,75,100]],
filters_row_index: 1,
highlight_keywords: true,
selectable: true,
btn_reset_text: "Clear all ",
btn_next_page_text: 'Next >',
btn_prev_page_text: '< Prev',
btn_last_page_text: 'Last >>',
btn_first_page_text: '<< First',
col_0: 'select',
col_1: 'select',
col_2: "none",
col_3: 'select',
col_4: 'select',
sort_num_asc: [0],
refresh_filters: true,
rows_counter: true,
rows_counter_text: "Total records : ",
loader: true,
btn_reset: true,
loader_text: "Filtering data...",
remember_grid_values: true
};
var tf = setFilterGrid( "table1",tableProps );
//]]>
</script>

<object ID=data classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param nAme="DataURL" value="html.csv">
<param nAme="UseHeader" value="true">
</object>

</body>
</html>

sangal_ak04 · 01-09-2013, 07:46 PM

OK PENDING thing is resolved now.

I was not using the .css file (filtergrid.css) which came within TableFilter folder. I have updated the post above with the code.

Now, it's showing nice table and yes, in both IE and Firefox.

Most Important link: http://tablefilter.free.fr/dwn.php (download the zips data into the same TableFilter folder, use the latest version), that way you'll be able to see all icons/style sheet functionality.