CSV to html

CSV to html makes it easy to fetch content from a csv-file or serveral csv-files from the webserver and put content from that file and display the html(table) on a page with a single shortcode. One strength with this plugin is that any changes in the actual csv-file(s) are reflected in the generated table(s). Another major strength is that is responsive ”out of the box” (from v1.60). This is usually not the case when dealing with free plugins. There are no limits how many tables you can have on a page (on this page there are around 25 different generated tables generated from different csv-files). You can have some tables that responsive and some that are not (if you wish).

Having trouble importing any csv file or any other question? Using shortcode-attribute debug_mode=”yes” might give you a clue what’s going on. If it doesn’t, please mail info@wibergsweb.se and Wibergs Web would try to sort it out for you!

Demos

The demos below has some files named sweden.csv,sweden_mac.csv,norway.csv,finland.csv,iceland.csv and denmark.csv in the wp-content/uploads/csvfiles – folder.

Original (default)

The plugin uses source_type visualizer plugin as default. This is because the plugin was made for that format from the beginning. If you are having problem fetching the data – try to to use ”guess” instead (it’s a more ordinary case to use guess).

Shortcode

[csvtohtml_create

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden.csv" 

debug_mode="no"]


IMPORTANT! All shortcodes on this page are displayed on serveral rows for easier understanding

When you use the shortcode on your website you have to put the shortcode

on ONE row: eg. [csvtohtml_create {attributes}]


So in this first example you would have to have paste this into your website:

[csvtohtml_create source_type="visualizer_plugin" path="csvfiles" source_files="sweden.csv" debug_mode="no"]

	2011	2012	2013	2014	2015
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%

---

Combine files into one table

If you want to have data from serveral files into one table, just add them in the source_files separated with a semicolon.

Shortcode

[csvtohtml_create

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

debug_mode="no"]

	2011	2012	2013	2014	2015
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%
Norway	-6.6%	1.2%	1.4%	1.9%	2.0%
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%
Denmark	-2.6%	0%	2.6%	2.9%	2.11%

---

Combine files into one table with a ”wildcard”.

If you want to have data from serveral files into one table, just add the wildcard, like *.csv or *.*. This is only applicapble when dealing with csv-files locally (on the webserver where your site is stored). If any files are added to the given path, those files are included in the generation of the table. (The reason why Sweden is shown twice below is that there are two files with identical data on this server in the csv-files folder (sweden.csv and sweden_mac.csv))

Shortcode

[csvtohtml_create

source_type="visualizer_plugin"

path="csvfiles" 

source_files="*.csv" 

debug_mode="no"]

	2011	2012	2013	2014	2015
Denmark	-2.6%	0%	2.6%	2.9%	2.11%
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%
Norway	-6.6%	1.2%	1.4%	1.9%	2.0%
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%

---

Fetch last headers

Only show number of columns that are indicated by the fetch_lastheaders. This is done from right to left. Based on the data 2011,2012,2013,2014,2015 – it’s 2013,2014,2015 that are included in the generated table.

Shortcode

[csvtohtml_create

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

fetch_lastheaders="3"]

	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Iceland	7.2%	11.0%	16.2%
Denmark	2.6%	2.9%	2.11%

---

Custom title

This custom title is always set at leftmost upper corner.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

fetch_lastheaders="3"]

Nordic stats	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Iceland	7.2%	11.0%	16.2%
Denmark	2.6%	2.9%	2.11%

---

Some styling (through css)

csvtohtmlstyle1 is the ID of the generated table. colset-X indicates which column and .rowset indicates which row that could be used to find a certain cell.

CSS

#csvtohtmlstyle1 th.colset-1 {

    background: red; //Red background on custom title

}

#csvtohtmlstyle1 .rowset-4 .colset-4 {

    font-weight: 700; //Bold on 16.2% in example below

}






Shortcode

[csvtohtml_create

create html_id="csvtohtmlstyle1"

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

fetch_lastheaders="3"]

Nordic stats	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Iceland	7.2%	11.0%	16.2%
Denmark	2.6%	2.9%	2.11%

---

Include columns

If you only want to include specific columns from the generated table you could use include_cols.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

include_cols="1,2,4" //You can also define intervals by a hyphen, e.g. 1-2,4

fetch_lastheaders="3"

]

Nordic stats	2013	2015
Sweden	3.2%	6.9%
Norway	1.4%	2.0%
Finland	10.2%	13.2%
Iceland	7.2%	16.2%
Denmark	2.6%	2.11%

---

Exclude columns

If you want to exclude specific columns from the generated table you could use exclude_cols.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

exclude_cols="2,3,4" //You can also define intervals by a hyphen, e.g. 2-4

fetch_lastheaders="3"

]

Nordic stats
Sweden
Norway
Finland
Iceland
Denmark

---

Include rows

If you only want to include specific rows from the generated table you could use include_rows.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

include_rows="1-3,5"

fetch_lastheaders="3"

]

Nordic stats	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Denmark	2.6%	2.9%	2.11%

---

Include tables in a specific column

With the use of attribute table_in_cell_cols you are able to include for each row from specificed columns.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

table_in_cell_cols="2,4" //Grab data from column 2 and 4
]

Nordic stats	2011	2012	2013	2014	2015	Mer data
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%	2011 2013 1.6% 3.2%
Norway	-6.6%	1.2%	1.4%	1.9%	2.0%	2011 2013 -6.6% 1.4%
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%	2011 2013 -16.6% 10.2%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%	2011 2013 6.6% 7.2%
Denmark	-2.6%	0%	2.6%	2.9%	2.11%	2011 2013 -2.6% 2.6%

---

The title ”More data” is shown as default, but you could define you own title for this included table like this:

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

table_in_cell_header="Geographical data"

table_in_cell_cols="2,4" //Grab data from column 2 and 4
]

Nordic stats	2011	2012	2013	2014	2015	Geographical data
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%	2011 2013 1.6% 3.2%
Norway	-6.6%	1.2%	1.4%	1.9%	2.0%	2011 2013 -6.6% 1.4%
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%	2011 2013 -16.6% 10.2%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%	2011 2013 6.6% 7.2%
Denmark	-2.6%	0%	2.6%	2.9%	2.11%	2011 2013 -2.6% 2.6%

---

It’s possible to add a specific wrapper-class for each table created so it might be easier to customzie javascript/css using that specific element. (Could be used for example hover on and off)

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

table_in_cell_header="Geographical data"

table_in_cell_cols="2,4" //Grab data from column 2 and 4

table_in_cell_wrapperclass="hovertable"
]

Nordic stats	2011	2012	2013	2014	2015	Geographical data
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%	2011 2013 1.6% 3.2%
Norway	-6.6%	1.2%	1.4%	1.9%	2.0%	2011 2013 -6.6% 1.4%
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%	2011 2013 -16.6% 10.2%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%	2011 2013 6.6% 7.2%
Denmark	-2.6%	0%	2.6%	2.9%	2.11%	2011 2013 -2.6% 2.6%

---

External files

With CSV to HTML it is also possible to fetch data from external files (the files does not have to be on your own server). Down below is actually a mix of an external file (https – sweden) and internal files (norway,finland,iceland,denmark):

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

fetch_lastheaders="3"]

	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Iceland	7.2%	11.0%	16.2%
Denmark	2.6%	2.9%	2.11%

---

It’s also possible to fetch google sheets if adding some attributes to the url and setting an attribute for the shortcode (add_ext_auto). This add_ext_auto adds the file extension .csv as default. When dealing with google sheets (or maybe some other source) you don’t want any file extension to be added.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="guess"

add_ext_auto = "no"

source_files="https://docs.google.com/spreadsheets/d/{key}/gviz/tq?tqx=out:csv&sheet={sheet_name}" 

fetch_lastheaders="3"]

There are no preview for this because google sheet’s specification how to achieve this usually do change over time. Please take a look at https://stackoverflow.com/questions/33713084/download-link-for-google-spreadsheets-csv-export-with-multiple-sheets for some ideas how to fetch your google sheets document as a csv file.

---

Character encoding

Sometimes when fetching data from external files they are in a different encoding than expected (expected usally is UTF-8). This is possible to handle by using convert_encoding_from and convert_encoding_to. In this case below we convert from Windows-1252 character encoding to UTF-8. These setting are ONLY applied on external files. Internal files is handled automatically. Don’t try to use the setting if you’re not having issues with character encoding.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

convert_encoding_from="Windows-1252" //This is only applied on sweden.csv in this case

convert_encoding_to="UTF-8" //This is only applied on sweden.csv in this case

fetch_lastheaders="3"]

	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Iceland	7.2%	11.0%	16.2%
Denmark	2.6%	2.9%	2.11%

---

Line endings (End of line)

Different operating systems uses different ways of handling new lines (different characters). Linux uses \n while Windows uses \r\n while other operating systems uses something entirely different. This plugin usally handles this automatically (recognises it and applies best option) but in some odd cases you would have to define what type of line endings the file is supposed to have. This setting is ignored on local files (because it not needed).

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

convert_encoding_from="Windows-1252" //This is only applied on sweden.csv in this case

convert_encoding_to="UTF-8" //This is only applied on sweden.csv in this case

fetch_lastheaders="3"

eol_detection="cr/lf" //Carriage return/line feed which is equivalent to \r\n.
]

	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Iceland	7.2%	11.0%	16.2%
Denmark	2.6%	2.9%	2.11%

---

Delimiter

Standard delimiter for csv-file is comma (,) but sometimes semicolon (,) or maybe tab is used for csv-files (\t). You have to tell the plugin which delimiter to use if it is not using comma. You do that by using csv_delimiter. The result is not as expected down below because setting tells the plugin to use semilcolon as delimiter while the actual files are using comma.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

convert_encoding_from="Windows-1252" //This is only applied on sweden.csv in this case

convert_encoding_to="UTF-8" //This is only applied on sweden.csv in this case

fetch_lastheaders="3"

eol_detection="cr/lf" //Carriage return/line feed which is equivalent to \r\n.

csv_delimiter=";"
]

,Sweden	2013,"3.2%"	2014,"4.5%"	2015,"6.9%"

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

convert_encoding_from="Windows-1252" //This is only applied on sweden.csv in this case

convert_encoding_to=”UTF-8″" //This is only applied on sweden.csv in this case

fetch_lastheaders="3"

eol_detection="cr/lf" //Carriage return/line feed which is equivalent to \r\n.

csv_delimiter=","
]

	2013	2014	2015
Sweden	3.2%	4.5%	6.9%
Norway	1.4%	1.9%	2.0%
Finland	10.2%	11.0%	13.2%
Iceland	7.2%	11.0%	16.2%
Denmark	2.6%	2.9%	2.11%

---

Float divider

If you have some points in the number format (e.g. 5.6) and you want to show this like 5,6 instead then you could use float_divider – attribute:

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

filter_data="Sweden" //Data "Sweden" 

filter_col="1" //Apply on column 1

float_divider="," //Show comma instead of point(s)
]

	2013	2014	2015
Sweden	3,2%	4,5%	6,9%
Norway	1,4%	1,9%	2,0%
Finland	10,2%	11,0%	13,2%
Iceland	7,2%	11,0%	16,2%
Denmark	2,6%	2,9%	2,11%

---

Filter data

If you need to apply a filter on the generated table, then you will have to use some different settings: filter_data, filter_col at least. filter_data tells which data you want to use. filter_col is used to tell which column you should apply the data on.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

filter_data="Sweden" //Data "Sweden" 

filter_col="1" //Apply on column 1
]

	2011	2012	2013	2014	2015
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%

Probably you might need some kind of operator to tell more specific data you want filtered. If you for example want to show data that has more or equal to 3.2% in a specific column (you can only choose one column) you could do this:

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

filter_data="3.2" //Data "3.2" 

filter_col="4" //Apply on column 4 (2013)

filter_operator="mequal" //More or equal to 3.2

filter_removechars="%" //Don't include percentage-sign in the filter
]

---

	2011	2012	2013	2014	2015
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%

---

Sorting data

There are different ways of sorting data in your generated html. The first option is to use sort_cols together with sort_cols_order. This sorting mechanism sorts firstly on the first column, and then next column and then next column specified etc. (It’s not a sorting that sorts either column 1 or 2. It takes all columns specified as sorting in consideration)

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

filter_data="3.2" //Data "3.2" 

filter_col="4" //Apply on column 4 (2013)

filter_operator="mequal" //More or equal to 3.2

filter_removechars="%" //Don't include percentage-sign in the filter

sort_cols="2,4" //Sort firstly on column2 and then sort column2 if it is possibe (first column has higher priority). You can also specify intervals here with a hyphen.

sort_cols_order="asc,desc" //Sort column2 ascending and then column4 descending (if it is possible)
]

	2011	2012	2013	2014	2015
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%

The second option is use a plugin called Table Sorter and then apply correct class (tablesorter) for the table so it will work. The code below sets a specific sortorder at start and then the Table Sort plugin makes it possible for the user to click on different columns to sort them.

Shortcode

[csvtohtml_create

html_class="tablesorter" //Sort class to active Table Sorter plugin

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

filter_data="3.2" //Data "3.2" 

filter_col="4" //Apply on column 4 (2013)

filter_operator="mequal" //More or equal to 3.2

filter_removechars="%" //Don't include percentage-sign in the filter

sort_cols="2,4" //Sort firstly on column2 and then sort column2 if it is possibe (first column has higher priority). You can also specify intervals here with a hyphen.

sort_cols_order="asc,desc" //Sort column2 ascending and then column4 descending (if it is possible)
]

	2011	2012	2013	2014	2015
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%

---

Responsive table(s)

If you’re watching this on a cellphone with lower resolution then you won’t see the actual sortingmechanism because of the way this plugin rearranges td etc when adjusting to different screen sizes. In that case it would be possible to make the table not responsive (generelly you don’t want this, but in this case it would maybe make sense) for the sortingmechanism to work.

Shortcode

[csvtohtml_create

responsive="no" //Make this table NOT responsive.
html_class="tablesorter" //Sort class to active Table Sorter plugin

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

filter_data="3.2" //Data "3.2" 

filter_col="4" //Apply on column 4 (2013)

filter_operator="mequal" //More or equal to 3.2

filter_removechars="%" //Don't include percentage-sign in the filter

sort_cols="2,4" //Sort firstly on column2 and then sort column2 if it is possibe (first column has higher priority). You can also specify intervals here with a hyphen.

sort_cols_order="asc,desc" //Sort column2 ascending and then column4 descending (if it is possible)
]

	2011	2012	2013	2014	2015
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%

---

There is another option instead of using responsive=”no” and that is to adjust settings for different css breakpoints (directly in the shortcode):

Shortcode

[csvtohtml_create

responsive="yes" //Default
css_max_width=1024 //Default 760 

css_min_devicewidth=1024 //Default 768

css_min_devicewidth=2048 //Default 1024

html_class="tablesorter" //Sort class to active Table Sorter plugin

title="Nordic stats"

source_type="visualizer_plugin"

path="csvfiles" //This path is only used for local files (files on the webserver where you run this plugin)

source_files="https://wibergsweb.se/wp-content/uploads/csvfiles/sweden.csv;norway;finland;iceland;denmark" 

filter_data="3.2" //Data "3.2" 

filter_col="4" //Apply on column 4 (2013)

filter_operator="mequal" //More or equal to 3.2

filter_removechars="%" //Don't include percentage-sign in the filter

sort_cols="2,4" //Sort firstly on column2 and then sort column2 if it is possibe (first column has higher priority). You can also specify intervals here with a hyphen.

sort_cols_order="asc,desc" //Sort column2 ascending and then column4 descending (if it is possible)
]

	2011	2012	2013	2014	2015
Finland	-16.6%	-14.2%	10.2%	11.0%	13.2%
Sweden	1.6%	2.2%	3.2%	4.5%	6.9%
Iceland	6.6%	6.2%	7.2%	11.0%	16.2%

---

Pagination

When dealing with large csv-files (or many rows of data given froms several csv-files it could be an idea to use pagination. Pagination links are shown below table as default.
When clicking on first,prev,next or last you see new content in the table without the need of reloading the page. When using pagination a html wrapper (div) is wrapped around the table and pagination part. If you have specified a html id then the this id is appended to the name of wrapper. This wrapper is intended for making it easy to apply css (styling).

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

pagination="yes"

include_cols="1,4"
]

You can easily configure different texts and number of rows for each pagination and tell how many specific number (”specific pages”) where you want to browse to (between prev and next). Every element is set with a class so it’s easy to style the pagination div and the child elements of the pagination wrapper:

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

pagination="yes"

include_cols="1,4"
pagination="yes"

pagination_below_table="yes"

pagination_above_table="yes"

pagination_text_start="Go home "

pagination_text_prev=" Go to previous "

pagination_text_next=" Go to next "

pagination_text_last=" Go to last"

pagination_rows=5

pagination_links_max="3"
]

---

Search

It’s easy to implement basic search functionality. The search functionality search through the whole with a a wildcarld-filter in each visible column. If the searchstring is found in column X then column X would be searched through. The other columns would not be searched for the same searchstring. This feature makes it easy to find what you’re looking for easier. When using search functionality a html wrapper (div) is wrapped around the table and search part. If you have specified a html id then the this id is appended to the name of wrapper. This wrapper is intended for making it easy to apply css (styling). If search is used in combination with pagination then the wrapper would be the same for both pagination and search part.

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

pagination="yes"

include_cols="1,4"
pagination="yes"

pagination_below_table="yes"

pagination_above_table="yes"

pagination_text_start="Go home "

pagination_text_prev=" Go to previous "

pagination_text_next=" Go to next "

pagination_text_last=" Go to last"

pagination_rows=5

pagination_links_max="3"

search_functionality="yes

searchbutton_text="Search now!"

resetbutton_text="Start all over!"

include_rows="1-3000" //Just include the first 3000 rows for memory reasons

---

Search – set a requirement for number of characters in search

You can set this requiremeand you could also set a custom message if requirement is not valid by user.

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

search_functionality="yes

searchbutton_text="Search now!"

resetbutton_text="Start all over!"

include_rows="1-30" //Just include the first 30 rows for demo

search_requiredchars="2"

search_requiredchars_message = "You have not entered 2 characters. Try again!"

---

Search – when results not found

It’s possible to add a custom message when a searchstring is not found: (If this attribute is not added whole table will show up). Search for something you know does not exist in table and this custom message will show up. For example search for dfsdfwerowieuroiwu for this table below.

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

search_functionality="yes

searchbutton_text="Search now!"

resetbutton_text="Start all over!"

include_rows="1-30" //Just include the first 30 rows for demo

notfound_message = "We are sorry. The thing you searched for does not exist."

---

Search – placeholder

It’s possible to add a placeholder to the searchinput field very easily. (Placeholder = text that shows as a description in the inputfield but disappears when user starts to enter)

csv-to-html-p-beta.zip

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

search_functionality="yes

searchbutton_text="Search now!"

resetbutton_text="Start all over!"

include_rows="1-30" //Just include the first 30 rows for demo

notfound_message = "We are sorry. The thing you searched for does not exist."

searchinput_placeholder="Do your search!"

Search – hide table at load

If you want to hide your table when your page loads you could add attribute hidetable_load.

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

search_functionality="yes

searchbutton_text="Search now!"

resetbutton_text="Start all over!"

include_rows="1-30" //Just include the first 30 rows for demo

notfound_message = "We are sorry. The thing you searched for does not exist."

searchinput_placeholder="Do your search!"

hidetable_load="yes"

Search – hide table at reset

When you click on resetbutton the table goes back to it’s original state. If you have attribute hidetable_load set to yes it still shows the table when clicking on the resetbutton. If you want to hide table when doing a reset you could add attribute hidetable_reset

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

search_functionality="yes

searchbutton_text="Search now!"

resetbutton_text="Start all over!"

include_rows="1-30" //Just include the first 30 rows for demo

notfound_message = "We are sorry. The thing you searched for does not exist."

searchinput_placeholder="Do your search!"

hidetable_load="yes"

hidetable_reset="yes"

Search – realtimesearch

Sometimes you want to search when user starts to type. The attribute search_realtime makes this easy to implement. After user has stopped typing,, the plugin does a search in about a second.

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

search_functionality="yes

searchbutton_text="Search now!"

resetbutton_text="Start all over!"

include_rows="1-30" //Just include the first 30 rows for demo

notfound_message = "We are sorry. The thing you searched for does not exist."

searchinput_placeholder="Do your search!"

hidetable_load="yes"

hidetable_reset="yes"

search_realtime="yes"

Totals

When you need to add totals at the end of the table this plugin also has functionality for this.

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

include_rows="1-30" //Just include the first 30 rows for demo

include_cols="1-8" //For demo 

totals_cols_bottom="5-8"  //Which columns to show totals for

totals_cols_bottom_empty="" //What to show when no totals are calculated

totals_cols_bottom_title="In total" //Title set for totals

totals_cols_bottom_title_col="4" //Which column to show this title

---

Downloadable button

If you want to download table as a csv file, you can use the attribute downloadable and set that to yes..

Shortcode

[csvtohtml_create

source_type="guess"

path="large"

source_files="*.csv" 

include_rows="1-30" //Just include the first 30 rows for demo

include_cols="1-8" //For demo 

totals_cols_bottom="5-8"  //Which columns to show totals for

totals_cols_bottom_empty="" //What to show when no totals are calculated

totals_cols_bottom_title="In total" //Title set for totals

totals_cols_bottom_title_col="4" //Which column to show this title

downloadable="yes" //Put a downloadable button under the table

downloadable_text = "Download the csv-file now" //Change default text from "Download as csv"

downloadable_filename = "resultset.csv" //Change default filename export.csv to a new filename (in this case resultset.csv)

---

Debugging

CSV to html plugin makes it extremly easy to debug – if there is something wrong. Let’s say we have this code:

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="guess"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

fetch_lastheaders="3"]

Nordic stats		Sweden
2010	2010	number
2011	2011	1.6%
2012	2012	2.2%
2013	2013	3.2%
2014	2014	4.5%
2015	2015	6.9%
		Norway
2010	2010	number
2011	2011	-6.6%
2012	2012	1.2%
2013	2013	1.4%
2014	2014	1.9%
2015	2015	2.0%
		Finland
2010	2010	number
2011	2011	-16.6%
2012	2012	-14.2%
2013	2013	10.2%
2014	2014	11.0%
2015	2015	13.2%
		Iceland
2010	2010	number
2011	2011	6.6%
2012	2012	6.2%
2013	2013	7.2%
2014	2014	11.0%
2015	2015	16.2%
		Denmark
2010	2010	number
2011	2011	-2.6%
2012	2012	0%
2013	2013	2.6%
2014	2014	2.9%
2015	2015	2.11%

---

Above is not what we expect at all. Just add debug_mode=”yes” to your shortcode and you should be able to get some clues what is wrong. In this case, the plugin might suggest that you should try using source_type visualizer plugin instead of guess.

Shortcode

[csvtohtml_create

title="Nordic stats"

source_type="guess"

path="csvfiles" 

source_files="sweden;norway;finland;iceland;denmark" 

fetch_lastheaders="3"

debug_mode="yes"
]

---

---

Looking for the Premiumversion 0.96 of this plugin? Donwnload it for free, test it and then pay if you’re satisified! Download it for free.