Improve your Development Style with jsonTable – jQuery Plugin

By  |  0 Comments

jQuery Plugins A New Way Of Web Development

JQUERY includes a huge variety of programs that create incredible things. jQuery plugins and JavaScript libraries when apply with good measure can change user’s websites a joy to us. These plug-ins are organized into categories and most of them are available on the web. So users can install them easily from there. Jquery has changed the way websites perform; it is light weight easily and completely customizable, processes infinite possibilities as well. In fact it has become the most reliable way for displaying visual media on the web. jquery has gained immense popularity because it is very fast and  users can enjoy a new way of web development.  Jquery plugins solve many of the traditional problems that occur in developing JavScript intensive web applications.

Json

JSON is a lightweight text format .It is easy for humans to read and write and also for machines to commend and create. JSON format is a quite standard format for data exchange, it includes quite a simple sentence structure, and works amazingly with JavaScript library and human readability are certainly the reasons of its wide popularity and adoption. JSON format is also used for transmitting structured data over a network connection. This is a complete template that contains a header, body and footer. It includes many options that can be passed with their default values users’ only need data to build a simple table and it automatically does the rest.

Gettings started

<table id="dataTable">
<thead></thead>
</table>

Initialize

$("#dataTable").jsonTable({
    head : ['#','Operating System','Market Share'], // Goes on the
json : ['id', 'name', 'share'] //json identities from the loaded json object});

JSON Data

[
{"id" : 1, "name" : "iOS", "share" : 57.56},
{"id" : 2, "name" : "Android", "share" : 24.66},
{"id" : 3, "name" : "Java ME", "share" : 10.72},
{"id" : 4, "name" : "Symbian", "share" : 2.49},
{"id" : 4, "name" : "Blackberry", "share" : 2.26},
{"id" : 4, "name" : "Windows Phone", "share" : 1.33}
]

Table

The table consists a set of row and every row includes a set of columns as users usually expect the each row has the same set of columns whereas in cases of tables in spread sheets users define the first row as a header row giving the names of the fields. By contrast in other situations the fields are clearly selected.

Update Table – jsonTableUpdate

var options = {
    source : "data.json", // Can be a URL or a JSON object array
    rowClass : "rowClass", //(optional) Class to be applied
    callback : function() {
        // (optional) Do something when table is updated
    }
}

$("#dataTable").jsonTableUpdate(options);

Or

Advertisements

var obj = [
{"id" : 1, "name" : "iOS", "share" : 57.56},
{"id" : 2, "name" : "Android", "share" : 24.66},
{"id" : 3, "name" : "Java ME", "share" : 10.72},
{"id" : 4, "name" : "Symbian", "share" : 2.49},
{"id" : 4, "name" : "Blackberry", "share" : 2.26},
{"id" : 4, "name" : "Windows Phone", "share" : 1.33}
]

var options = {
    source : obj,
    rowClass : "rowClass",
    callback : function() { alert("Table updated."); }
}

$("#dataTable").jsonTableUpdate(options);

Json Table jQuery Plugin

JASON table is a simple and clean jquery plugin that is designed for displaying JSON responses on a table quite easily. The JSON table plugin represents JSON data in Html table. The script if well designed to control all types of data through JSON and no need for predefined template. The data can be navigated easily without refreshing the page. For users’ convenience the script suggests the value and the data type.

It can successfully parse and sort various types of data in a cell. It has many useful features such as. It is a light weight jquery paging with nice customizing features and extends the functionality of selector or operators; it is well documented and includes flexible design for many requirements. The plugin includes a very nice visual editor for customizing JSON data and also provides a different view for it. It has the ability to manipulate the table, create a couple of new elements and wrap everything in a div. When first time users download it they can view the demo file to get up to speed and begin working with it instantly. Using this plugin the process of styling the table goes pretty smoothly. It does some weight and height calculations. It can sort text, URLs, currency, dates, long/short formats, time and much more.

Features

  • Free plugin
  • Easy to implement and use
  • Extensible Html/CSS interface
  • The plugin is friendly and it is widely used because of its customizable features.
  • Compatible with all modern browsers
  • Convert HTML table into a sort able table without page refreshes
  • Easy to set up
  • It wraps HTML table element with dynamic paging, sorting and searching.
  • Lots of flexibility with table look and feel
  • Lots of loading options available
  • Jquery UI support
  • Customizable callback functions
  • The plugin includes options for manipulating tables, column, and menu elements
  • Fast and lightweight jquery plugin
  • Multi columns sorting
  • Maintain alphabetical sorting
  • Small code size and more

Installation

The installation of this plugin is pretty simple like other Jquery plugins

  1. Users need to download the latest sources to their computers using a web browser
  2. Extract the content of the zip into a folder on the user’s local network

Compatible with Different Browser

The Jason table plugin is tested on various browse and it can work amazingly with all modern browsers such as

  • FIREFOX
  • OPERA
  • CHROME
  • SAFARI
  • INTERNET EXPLORER

jQuery plugin to get your JSON data – Download Link

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>