How To Create High Quality Tables With JavaScript
If you are web program developer, it is likely that you are creating tables on a daily basis. In this article I will show you how to create high quality tables with Javascript within a short period of time. One feature that you will want to become familiar with is DisplayTag Library.
There are a number of things that you will want your tables to have, and some of these are various row colors, menu navigation, column sorting, Export to XML or CSV, and interactive rows.
You may be wandering why DisplayTag is so important. If you are used to using HTML or JSTL, this is a valid question. Well, while it is possible for you to create good tables with these languages, it can be a very tedious process. In fact, designing a basic table for these programs can be difficult. Using the JSF program will make things a lot easier. It features the < t:dataTable > tag, and this will allow you to work without the tags that you will need to use for HTML and JSTL. It also has a column sorting feature built in. If you don’t want to use JSF, you may want to look at the ADF component library which was released by Oracle.
The ADF component library has page navigation and column sorting, as well as row selection. I will next go over the installation process for DisplayTag. If you want to use DisplayTag with your web program, there are a number of steps you will want to follow. You will first want to copy the JARS from the DisplayTagEx/WebContent/WEB-INF/lib of the sample program. It should be copied from the directory and placed into the WEB-INF/lib directory for your program. There are a number of places online where you can download the DisplayTag libraries.
After you’ve done this, you will want to copy the DisplayTagEx/WebContent/css from the sample program and place it in the root of your web application. This will have the CSS files that you will need. The third thing you will want to do is copy the DisplayTagEx/WebContent/images from the sample program and add it to the root of your web program as well. This file will contain images that are important for things such as page navigation and sorting. Once you’ve done this, you will want to copy the DisplayTagEx/src/displaytag.properties from the sample program and add it to the top level directory of your web program.
I will now go over the properties file. You will first want to run and install the sample program on your server. For this example we will be working with Tomcat, but you can also use other programs as well. You will want to create a directory and name it DisplayTag. It should be created under the Tomcat /webapps directory. You will next want to copy the files which reside in the DisplayTagEx/WebContent/ of the sample program, and place it in the /webapps/DisplayTagEx of Tomcat. Once this have been done, you will want to start Tomcat. After Tomcat is running, you will want to go to http://localhost:8080/DisplayTagEx on your browser.
Once you have installed the correct libraries, you will want to use the DisplayTag library for three steps. You will first want to import the tag library on the top of the JSP. It should look like this when you’re done:
< %@ taglib uri="http://displaytag.sf.net" prefix="display" % >
You will next want to create a link to a CSS file. This link should look like this:
< link rel="stylesheet" type="text/css" href="css/displaytagex.css" >
For the last step you will want to create a < display:table > tag. It should also feature a < display:column > tags. Once it is completed, it will look like this:
display:table name="${orderDetails}" class="dataTable" >
< display:column property="customerName" / >
< display:column property="productName" / >
< / display:table >
These are the fundamental steps you will need to go through in order to create a high quality table with JavaScript. While it is possible to create good tables with HTML or JSTL, they can be tedious. This method of creating tables is streamlined, and will make things a lot easier. If you are working with tables on daily basis, you will want to cut out as much drudge work as possible. Learning how to quickly create high quality tables will make your work a lot easier.
