jQuery jTable, An Awesome Full Featured Plugin For CRUD Table

I have been using the precious jTable plugin for more than 5 years. I used it in several projects besides several server side technologies such as Python, Spring boot, Oracle ADF and PHP. The very exciting fact about this plugin is that, it is so comprehensive that developers don’t need to spend their time on designing tables to show records or to build Create/Edit forms to manipulate them anymore, they can focus on logic of their application. The plugin has several features including (reference : jtable.org):

• Automatically creates HTML table and loads records from server using AJAX.
• Creates ‘create new record’ jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page.
• Creates ‘edit record’ jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page.
• Allow user to ‘delete a record’ by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the record from the table in the page.
• Shows animations for create/delete/edit operations on the table.
• Supports server side paging using AJAX.
• Supports server side sorting using AJAX.
• Supports master/child tables.
• Allows user to select rows.
• Allows user to resize columns.
• Allows user to show/hide columns.
• Exposes some events to enable validation with forms.
• It can be localized easily.
• All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented.
• It comes with pre-defined color themes.
• It is not depended on any server side technology.
• It is platform independed and works on all common browsers.

I was so lucky to find @hikalkan‘s work on github, and I decided to give something back to the community. Hopefully someone will find my fork of this project useful. I started to work on this plugin and I named my fork msjTable.

Despite easy to use APIs and awesome features, it needed some helping features, that I added them in my fork on github :

Record Preview

The plugin was suffering from lack of record preview dialog. A preview of record in detail that is opened in a dialog and shows all fields’ value of the record. This is useful when list table is small and some fields can not be shown on the table . I added preview extension so that it can show specified field in preview dialog :

$("#myjtable").jtable({
...,
recordPreview : true,
...,
fields : {
    ...,
    first_name : {
               title : 'First name',
               edit : true,
               create : true,
               preview : true,
               type : 'text'
                },
        ...
});

If the recordPreview option set to true, it will display a preview icon beside edit and delete icon at the end of row.

Multi columns Create/Edit/Preview dialog

Many times I faced users complaining about edit/create record forms shape that always have to be vertical and just in one column, it goes out of screen in case the number of fields exceeds ~10. In other hand, sometimes developers need to have wide form dialog instead of long vertical one.

The above photo shows that the form goes behind the taskbar and the save button can’t be reached. Now, it has 3 options named createFormColumns, editFormColumns and viewFormColumns to jTable options, so that developers can specify the number of columns they want the create/edit/preview dialog to have. The default number is 1 for all of them :

$("#myjtable").jtable({
...,
createFormColumns : 2,
editFormColumns : 2,
viewFormColumns : 2,
...

});

With the above options we are able to create form with 14 fields in two columns :

There is very important and interesting features that still need to be added, including uploading file in create/edit form, and built-in search box to filter records. I hope I have enough time to work on these features.