Introduction to the problem

When we are developing a 'data manipulation page', we almost always do the same thing: A 'table/grid' that is used to 'show records'
of a table in a database, a 'create new record' page/dialog to add a new record to the database, an 'edit record' page/dialog to edit a record,
and finally a way of 'deleting a record' in the database.

Also, using AJAX, we can create more fast and interactive pages. Especially, jQuery and jQueryUI are invaluable
libraries to perform manipulation in an HTML page and perform AJAX requests to the server.

Users no longer need to leave the 'list of records' page to create/edit or delete a record. Also, the page never refreshes itself to reflect a change in records. When the user
deletes a record in the table, we can delete the corresponding row from the table without refreshing the whole page. When the user edits a record and saves it, we can change
the corresponding values in the table, and so on... Also, we can do some animations while deleting, creating, or updating records.

All of the subjects I mentioned above are known techniques and we have all implemented them. But the problem is that, we are developing/coding almost
the same page for every type of record. Surely, we can copy/paste/modify it! But is it a solution or another mess? All we know is, copy/paste
is not desirable for all kinds of programming, it is an evil!

What is jTable

jTable [1] is a jQuery plug-in that addresses the problem mentioned above. It takes a list and properties of fields of a record and does all the job! It has several features:

Automatically creates an HTML table and loads records from the server using AJAX.

Automatically creates a 'create new record' jQueryUI dialog form. When the user creates a record, it sends data to the server using AJAX and adds the same record to the table in the page.

Automatically creates an 'edit record' jQueryUI dialog form. When the user edits a record, it updates the server using AJAX and updates all the cells on the table in the page.

Allow the user to 'delete a record' by jQueryUI dialog based confirmation. When the user deletes a record, it deletes the record
from the server using AJAX and deletes the record from the table in the page.

Supports server side AJAX based paging and sorting.

Allows user to select rows from table.

Allows user to resize/show/hide columns.

Supports unlimited level of master/child tables.

Shows animations for create/delete/edit operations on the table.

Exposes some events to enable validation with forms.

It can be localized easily.

Table, forms and other elements are styled in well defined LESS CSS files.

It comes with many pre-defined color themes.

It is browser/platform independent and works on all common browsers.

It is not dependent on any server-side technology such as ASP.NET MVC, and can be used with others.

Live demo

A sample page with ASP.NET MVC 3 and jTable

Here I will show how to develop a data manipulation page with ASP.NET MVC 3 and jTable. This sample project is included in the download file.

Assume that we are manipulating a Person list that has a lot of information: name, city, email, password, gender, birth date, an 'about' text, and education.

Using the page

First, I will show the capabilities of jTable. Here is the list of people:

This table is automatically created by jTable. (Don't worry about the style of the table. The HTML code of the table is not styled and is a clean HTML table. You can edit the CSS files
easily.) Also, it shows only the desired fields. Edit/Delete images (buttons) are completely optional, and they are also automatically added to each row. Title is also optional
and the add new record link is changeable by the user with another element in the page. While the records are being loaded, a 'loading...' animation is shown.

When the user clicks the add new record link, a jQueryUI dialog based form is opened:

This form is also completely automatically created based on the fields of the record! When you fill the form and save,
jTable serializes the form and performs an AJAX call to the server. If the server responds 'OK', it adds the record to the table with an animation. If the server returns error while adding the record, jTable automatically shows an error dialog message and does
not add the record to the table.

If you click the edit image (button) in a row, jTable automatically creates an editing jQuery dialog form:

jTable automatically creates and fills the form with the selected record's values. When the user saves the form, just like creating
a new record, the record is saved to the server. If the AJAX call is a success, the record values are updated in the table and an 'edited' animation is shown.

When the user clicks the delete image (button), jTable shows a confirmation dialog (This is also customizable):

If the user clicks the delete button, the record is deleted from the server using an AJAX call.
If the operation succeeds, it is also removed from the table automatically with a deleting animation.

Now we will see how to implement the page above in ASP.NET MVC 3.

Model

We have two classes here: Person (represents a record in the People database table) and City (represents a record in the Cities database table). A person lives in a city.
So the Person class has a CityId that is the ID of a city row in the Cities table.

Controller

jTable uses the POST method as default while making AJAX calls to the server and expects a JSON object.
URLs (Controller/Action names in ASP.NET MVC) can be arbitrary and they are set while creating a jTable instance (we will see this soon).

All methods must return a JSON object. Result property must be "OK" if operation is successful.
If an error occurs, Message property will contain an error message to show to the user. If Result is "OK", the Records property will contain an array of records
to show in the table.

You could pass some parameters to the action that can be used to get records based on some filters. Also, you can paginate or sort the table. We will see this later.

Creating

Creating a record is optional (we will see soon). If you allow user to create a record, you must supply an action to jTable to create a new record:

CreatePerson method must return the newly created object as the Record property. This is needed since newly inserted record will has a key (PersonId in this sample) and automatically generated values (such as RecordDate here).

Updating

Editing a record is optional (we will see soon). If you allow user to edit a record, you must supply an action to jTable to update a record:

Getting options

jTable can automatically download and fill comboboxes from a URL. For instance, the City combobox in the Person create/edit form above uses this feature. In such cases, you must supply an action to get the option list:

Note that jTable is dependent on jQuery and jQueryUI (included UI effects). So, you must add those scripts to your page before jTable. If you don't have these libraries, go to http://jqueryui.com/download to download jQueryUI (it includes jQuery).

Finally, we can create the jTable instance like this:

<div id="PersonTable" style="width: 580px; margin: auto;"></div>

Yes, it's a long definition but that's all! jTable does not need anything else to create tables, forms, and animations. All options are explained in API Reference documantation but I want to explain some basics now.

As you can see, jTable just needs a div container as the only HTML tag. It gets options:

title: Title of the table.

actions: URLs of actions that are used to create/delete/update/list records.

fields: All fields of the record. A field entry has properties
those define shape and behaviour the field.

Finally, the load method of jTable is used to get records from the server. You can always call this method to load/refresh table data from the server.

Paging

jTable allows you server side paging with AJAX. See a demo here. It looks like the sample below:

To enable paging, paging option must set to true. You can also set pageSize option (default value is 10).

Sorting

jTable allows you server side sorting with AJAX. See a demo here. It looks like the sample below:

To enable sorting, sorting option must set to true. You can also set defaultSorting option. It can be a field name of a column of the table. For instance, if you want table sorted by Name by default, defaultSorting can be 'Name ASC' or 'Name DESC'.

Note that while sorting can be used with paging (as in this sample), it is completely independed from paging.

Selecting

jTable allows you client side selecting rows. See a demo here. It looks like the sample below:

To enable selecting, selecting option must set to true. You can set multiselect option to true to allow user to select multiple rows at once. You can set selectingCheckboxes option to true to show checkboxes as the sample above. Finally, you can set selectOnRowClick to false to prevent row selecting on clicking anywhere on the row (it's true as default).

To get list of selected rows, you can call selectedRows method of jTable anytime (see sample usage). Also, you can get notified when selection changed by selectionChanged event.

In the sample above, we are registering to selectionChanged event. In the event handler, we are getting selected rows by selectedRows method. It returns a jQuery selection, so we can call any jQuery method on it. We can get the record by record data property. Then we can get fields of record as record.Name, record.PersonId... etc.

Master/Child tables

jTable supports unlimited level of child tables for a table. Child tables can also have their children and so on... A child table is releated in a row in master table. Look at the screen below:

Click here to see a live demo. When you click phone icon at left of a row, a new table slides down below the clicked row and you can manipulate phones of the selected person. You can do everything just as a regular jTable. When you click close button, child table slides up and closed.

To implement a child table, first we must understand custom (computed) column support of jTable. Green phone icon on the figure above is created in a custom column. To create a custom column, we use display option of jtable field definition as like below:

Phones is a field definition as Name or Gender columns. But Person record has not a field named Phones. So, we define a function that will create value of this field to show on the table. display function is used for that. It is called by jTable for each row. It must return a text, HTML code or jQuery object. In the sample above, I created an image (green phone icon) as a jQuery object and returned it. Then jTable showed this image in the row. personData argument (you can change name of the argument of course) has record property that can be used to get record values for current row. So, if you want to use Name of the person, you can get it using personData.record.Name.

So far so good. But, how to open child table when user clicks this image. jTable defines two methods: openChildTable and closeChildTable to control child tables. So, web can open a child table when user clicks the phone icon (in the display method above):

openChildTable has three parameters. First one is used to indicate the row which is used as master row of child table. Here, I got container tr element of the image, so it gives the current row. Second parameter is a regular jTable initialization options. You can pass any option that can be passed to any jTable instance. So, you can define a custom column and open a second level child. Third and the last parameter is a callback method that is called by jTable after child table successfully created and opened. Here, I loaded records after child table is opened.

Look at the listAction. It's something like that: '/PagingPerson/PhoneList?PersonId=' + personData.record.PersonId. Thus, we are getting phone numbers those are related to current person (personData comes from display method, see codes above). Also, we need PersonId in the server side while creating a new phone number for a person. It's done with a hidden field (See StudentId definition). Given default value is used for new records.

When you create a child table, jTable automatically closes it when user clicks close icon of the table. You can change/override these functionalities.

ASP.NET Web Forms support

jTable has direct support for ASP.NET Web Forms Page Methods. While jTable is already platform independed, I have built an extension to jTable to support Page Methods in most proper way. For instance, see the code below. This page method is used to get student list as paged and sorted. It's pretty much similar to it's MVC version.

If you want to use your own styles, you can start with themes/basic/jtable_basic.less file. If you did like a jTable theme but not happy with colors, you can copy one color and change it.

Combining with validation

Validation is a common task while working with forms. jTable exposes some events
to inject validation logic to jTable auto-created forms. You can use your own validation logic or a jQuery validation plug-in.

Validation engine [2] is a powerful validation plug-in for jQuery. I definitely recommend it. Here I will show how to inject validation
engine to a jTable instance. First, see the validation engine in action:

As you can see, when I try to save the form, the validation engine shows some error messages and prevent the submission of the form.

To be able to use the validation engine, first we must add style and JavaScript files to our HTML page:

The validation engine works with CSS classes for validation. validate[required] indicates that this
input element can not be empty. Take a look at the validation engine's web site [2] for details.

In the formCreated event, I add the required classes to input elements and call the validationEngine() plug-in method on the form.
In the formSubmitting event, I call the Validate method of the validation engine. It returns false
if the form is not valid. So I use the same value as the return value of the formSubmitting event. jTable does not submit
the form if this event returns false. Finally, in the formClosed event, I detach the validation engine from the form.

This was the first method for validation. Since jTable allows you to inject classes to your input fields using
the inputClass property in field definitions, we could define a field with the validate[required] class as default:

Share

About the Author

I have started programming at 14 years old using Pascal as hobby. Then I interested in web development (HTML, JavaScript, ASP...) before university.

I graduated from Sakarya University Computer Engineering. At university, I learned C++, Visual Basic.NET, C#, ASP.NET and Java. I partly implemented ARP, IP and TCP protocols in Java as my final term project.

Now, I am working in a private company in Istanbul as a senior software architect & developer. Working on Windows and web based software development using C# and ASP.NET MVC.