Introduction

jTable is a very flexible and useful plugin for jQuery framework that allows showing data in grid format with pagination, sorting, CRUD, etc... and using Ajax to manage load and data updating. This is an adaptation of this plugin to give it compatibility with Bootstrap framework.

Background

Using jTable to show data is very easy. This plugin takes care of showing creation, update, delete and error dialogs automatically, but using only jQuery UI. This framework gives to any developer all that he/she could need to implementing useful and rich UI to end users, but other frameworks like Bootstrap are used more often each day to get the same approach.

What about jTable implementation on existing websites that use Bootstrap as UI framework?. jQuery UI can be used with Bootstrap on same site, but this will result on inconsistent UI style and usability.

This project adaptation wants solve this problem by making jTable usable either with jQuery UI dialogs and Bootstrap modals.

You can download an use this 2.3.1 based version from my pull request on Github. All modifications and source code are there.

Using the code

If you know how to code jTable you can use it with Bootstrap as easy as adding a new optional param: useBootstrap

var $table = $("#table");
$table.jtable({
   title: 'Table Title',
   sorting: true,
   useBootstrap: true,
   fields: ...
});

And voila! all dialogs will be shown using our Bootstrap theme. If false, all will work like always showing jQuery UI dialogs.

Points of Interest

JQuery UI dialog structure is very different from Bootstrap modal component, as well as their philosophy. Autosizing and centering of dialogs can be problemmatic using Bootstrap on some situations when dialog contents become big. Nothing that some JS code couldn't solve.

History

This is the first version. Hope it helps.

jTable & Bootstrap