Documentation for the editable table's Jquery Plugin
HTML is the basis for any webpage.Although it provides markups for many elements per se,they look quite dull and boring.One such element is the default HTML table which i find really bland. :P
So i have made this jquery plugin which will spruce up your HTML tables.For those who don't know,jquery is a javascript library (makes life easy!),you can download it here. Also you will need the bootstrap JS and CSS files which you can find here.
Let's Get It Started
Before i start with the implementation,first lets see the visual differences between the HTML tables and out smart tables!
The old stuff...
The smart tables...
The Code
Once done including all the files,you will need the JS file of my plugin,the "editabletables.js" file,whose download link is provided at the bottom of the article. Now your included files should look something like this...
Moving on,the HTML markup for the table can be whatever you like,static or database driven.I have kept it static here for the purpose of demonstration.Please ensure that you assign a class to you table because you need to pass it to methods later and assign a tbody tag if your browser doesn't assign one itself!
Now that you have the "editabletables.js" file,you have access to the "edittable" javascript object.From here you can access all the methods of the plugin to smarten your tables.
There are mainly 5 methods which cover making you tables editable,add rows,delete rows or fetch full table data.Lets see each in detail as to how you could use them.
1.Add a row (addarow) :
This function adds a single row to a table of the specified class.To use this you can call the addarow method in the following manner.
var g=["asd","aqwe","aftgk"];
edittable.addarow("u1",g,3);
//The first parameter is class of the table
//Second parameter is to be an array of the data,if left blank you will get empty table cells.
//Third parameter is the position where the row is to be inserted.
The first 2 parameters are compulsory,the third parameter is optional.If not supplied then a row with supplied is added to the end of the table.
2.Add Multiple rows (addmultiplerows) :
This function adds multiple rows to a table of the specified class.To use this you can call the addmultiplerows method in the following manner.
edittable.addmultiplerows("u1",8,3);
//The first parameter is class of the table
//Second parameter is the number of rows to be added to the table.
//Third parameter is the position where the rows are to be inserted.
The first 2 parameters are compulsory,the third parameter is optional.If not supplied then number of rows supplied are added to the end of the table.
3.Delete single/multiple rows (deleterow) :
This function deletes single/multiple rows to a table of the specified class.To use this you can call the deleterow method in the following manner.
var p=[1,2];
var y=3;
edittable.deleterow("u1",y); //Deletes a single row.
edittable.deleterow("u1",p); //Deletes multiple rows.
//The first parameter is class of the table
//Second parameter is the row number which is to be deleted.It can be a single number or a array which contains all the row numbers that are to be deleted.
Both the parameters are compulsory.
4.Fetch full table data (fetchfulltable) :
This function provides you the way to fetch all the table data (inside <tbody>).More importantly it provides the option of fetching data from the table in 2 forms:-
a) JSON format
a) Regular Arrays (array of arrays!)
var e=edittable.fetchfulltable("u1",false);
//console.log(e);
//The first parameter is class of the table
//Second parameter is return type data format.Set true for JSON, false for array.
Both the parameters are compulsory.If the second parameter is set to false then return type would be a JSON string,and if its false the it would be an array of array's
5.Initialize the editable table operation (imagixtables) :
This function is the main function that initiates the process of editable tables.This function should preferably be called after addition operation,if you want to make all those rows to be editable.
var p=[1,2];
edittable.imagixtables("u1",p);
//The first parameter is class of the table
//Second parameter is the columns to be made editable.(can be variable or an array)
Only the first parameter is compulsory.The second parameter indicates the rows to be made editable.If nothing is supplied then all rows are made editable.
