CSV to html table - client side - javascript

I have a table that I want to append variable data to. I currently have the data in CSV format, and call the csv to HTML using PHP. The PHP call $line_of_text[10] allows me to access whatever data I want. However I need to do it client side not server side.
I have been looking into Javascript arrays, and these may or may not be the best idea. If there is code to parse the data, I would also need the actual code to call it from the HTML page, and put it into the table.
My table is like this: ( see JS Fiddle: http://jsfiddle.net/72jQR/2/)
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
</tr>
<tr>
<td>Description</td>
</tr>
<tr>
<td>Size</td>
</tr>
</table>
And After the information from the csv or array or whatever - it looks like this:
<table cellspacing="0" cellpadding="5" border="1">
<tr>
<td>Code</td>
<td>From DATA 12345</td>
</tr>
<tr>
<td>Description</td>
<td>From DATA</td>
</tr>
<tr>
<td>Size</td>
<td>500</td>
</tr>
</table>
What is the best way to do this client side?

This jQuery plugin should do it for you client-side: http://code.google.com/p/js-tables/
In particular see this page with an example: http://code.google.com/p/js-tables/wiki/Table

There is a CSV to HTML online service at:
http://okfnlabs.org/blog/2013/12/05/view-csv-with-data-pipes.html
There is also a very simple, lightweight javascript library here you could use: https://github.com/okfn/csv.js (very few dependencies)

Related

ng-repeat in headers and angular-datatables

I have an HTML table which I want to build the most generic as possible.
I am using jquery-datatables, my problem is that I have try to use ng-repeat on headers of the table and jquery-datatables and I got an error of undefied of current data in the headers.
It is clear to me that when I ran the command $(ID).DataTables() in document ready it is run before angular.
The solutions for this situation is using a directive or angular-datatables.
But when I use angular-datatables with attribute datatables="ng" I get a strange error of loading screen. I am clueless about the solutions for this situation, I would be happy for any help.
This my code of my table which should work but doesn't work as expected.
<table id="gases_data_table" datatable="ng" cellpadding="1" cellspacing="1" border="1">
<thead>
<tr>
<th class="gases_data_table_title" ng-repeat="header in headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="dga in listOfDGAs">
<td class="gases_data_table_item" ng-repeat="detail in dga">{{detail}}</td>
</tr>
</tbody>
</table>

Access External webpage HTML table without table ID from Java Script and convert to JSON

I have written a script to get HTML table data to JSON Object.
for this task I have used lightswitch05 jquery plugin.
In this code I can access a HTML table data in same web page in Javascript
using
var table = $('#example-table').tableToJSON();
but I need to access HTML table of external webpage.
Table URL is here - http://ccmcwolf.byethost4.com/index.html
how can I change the it to above "#example-table" to that external web page table ?
<!DOCTYPE html>
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script
src="http://lightswitch05.github.io/table-to-json/javascripts/jquery.tabletojson.min.js">
</script>
<script>
function myFunction() {
var table = $('#example-table').tableToJSON();
console.log(table);
alert(JSON.stringify(table));
}
$(document).ready(myFunction);
</script>
</head>
<body>
<table id='example-table' class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th data-override="Score">Points</th></tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
<td data-override="disqualified">50</td></tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td></tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td></tr>
<tr>
<td>Adam</td>
<td>Johnson</td>
<td>67</td></tr>
</tbody>
</table>
</body>
</html>
Thank you very much!
Since, JavaScript has scope in the current page only (i.e. it can access and modify the content of the page where it is embedded or declared/linked using the script tag), I don't think there is any direct way of doing it.
But if that external page is on the same domain where your current JavaScript code is operating, you can always get the html by an Ajax call to the server and then run your code to extract the html table in JSON form.
Please, let me know if I am missing something and I will edit my answer based on your input.
Thank you.

sum of columns using ng-table angular

I am using angular/ng-table to plot numerical data in tabular form.
I am not able to figure out how to bring in a row at the end of my table which shows sum of all the values of each column.
I can compute the data on the server side and present it in the UI.
But is there a way to achieve this in ng-table/ng-grid?
Any help will be appreciated.
thanks
You mean something like this?
<table ng:init="stuff={items:[{description:'gadget', cost:99},{description:'thing', cost:101} ]}">
<tr>
<th>Description</th>
<th>Cost</th>
</tr>
<tr ng:repeat="item in stuff.items">
<td>{{item.description}}</td>
<td>{{item.cost}}</td>
</tr>
<tr>
<td></td>
<td>{{stuff.items.$sum('cost')}}</td>
</tr>

Add a new row at the top of the table

I have created the table and I have one row with heading version app num and for that column I have given the some link to download that version app. But if anyone has uploaded a new version of the app on the server, in the HTML page that link has to come in the first row and the older version should be in the second row.
How to implement this? Do we need to implement anything in HTML, or do they need to change something server side. I have not been given any limit for the number of rows in the table.
My code is below:
<table border = "2" align= "center" cellpadding = "10">
<tr>
<th> Date </th>
<th> Build No </th>
<th colspan="2">Production </th>
<th colspan="2">Staging </th>
</tr>
<tr>
<td>date</td>
<td>1.5</td>
<td>Prod With Simulator</td>
<td>Prod WithOut Simulator</td>
<td>Stag With Simulator</td>
<td>Stag WithOut Simulator</td>
</tr>
<tr>
<td>date</td>
<td>1.5</td>
<td>Download here</td>
<td>Download here</td>
<td>Download here</td>
<td>Download here</td>
</tr>
</table>
we cant connect html to database .. in jsp we can connect so u write your html in jsp and connect the database... roseindia.com(see the database connection)
you should use database... if anyone upload new version it should store in database from your database you should iterate and display the tables dynamically

Table sorting from multiple tables

i'm using jquery and the jquery plugin "tablesorter" (http://tablesorter.com/docs/) to sort a table.
now I have the difficult, that I have following html (an other way is impossible):
<table class="tablesorter">
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Bob</td>
<td>24</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>James</td>
<td>33</td>
</tr>
</table>
<table>
<tr>
<td>5</td>
<td>PJ</td>
<td>28</td>
</tr>
</table>
<table>
<tr>
<td>1</td>
<td>Sue</td>
<td>39</td>
</tr>
</table>
In every table is one line. Now I want to sort this many tables as it is one table.
Is there any solution for this problem?
I've found an attempt here: http://jsfiddle.net/Mottie/8cg4f/31/
But there are ony two tables and the script only sort the data from one table.
Target the tables you want to pillage, drill down to the <tr>s, move them to where they need to be, climb back up to the (now empty) <table>s, throw them away. jsFiddle
$('table:not(.tablesorter)').find('tr').appendTo('.tablesorter')
.end().end().remove();
EDIT: as per comment I have simulated "spacing between <tr>s" by using padding on the <td>s jsFiddle.
If you have other requirements for the final page, just let me know what you'd like to end up with and I can help create a solution that will yield valid html which displays consistently for all your users.
Try something like this:
var $table = $(".tablesorter");
$table.nextAll("table").children().appendTo($table).end().remove();
$table.tablesorter();

Categories