Click here to Skip to main content
12,952,273 members (43,622 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 7 Nov 2013

jTable & Bootstrap

, 7 Nov 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
jTable adaptation to be used either with jQuery UI and Bootstrap dialogs


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.


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<code>

var $table = $("#table");
   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.


This is the first version. Hope it helps.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Santiago Santos Cortizo
Software Developer (Senior) Agildata Sistemas
Spain Spain
Software developer since 1985

You may also be interested in...

Comments and Discussions

Questionhow to file upload in jtable? Pin
Bappaditya Mondal24-Apr-14 23:08
memberBappaditya Mondal24-Apr-14 23:08 
AnswerRe: how to file upload in jtable? Pin
Santiago Santos Cortizo25-Apr-14 8:25
memberSantiago Santos Cortizo25-Apr-14 8:25 
QuestionUpdated Version Pin
Member 813165521-Jan-14 9:57
memberMember 813165521-Jan-14 9:57 
AnswerRe: Updated Version Pin
carazuza19-Feb-14 4:29
membercarazuza19-Feb-14 4:29 
AnswerRe: Updated Version Pin
Member 1041027115-Apr-14 4:41
memberMember 1041027115-Apr-14 4:41 
QuestionLove your work. Having prob w modals Pin
dgDavidGreene17-Dec-13 10:00
memberdgDavidGreene17-Dec-13 10:00 
AnswerRe: Love your work. Having prob w modals Pin
Santiago Santos Cortizo19-Dec-13 7:07
memberSantiago Santos Cortizo19-Dec-13 7:07 
QuestionNot working Pin
Takaz4real17-Nov-13 6:18
memberTakaz4real17-Nov-13 6:18 
AnswerRe: Not working Pin
Santiago Santos Cortizo17-Nov-13 21:00
memberSantiago Santos Cortizo17-Nov-13 21:00 
GeneralRe: Not working Pin
dgDavidGreene19-Dec-13 8:57
memberdgDavidGreene19-Dec-13 8:57 
GeneralMy vote of 1 Pin
bezveza11-Nov-13 4:43
memberbezveza11-Nov-13 4:43 
GeneralRe: My vote of 1 Pin
Member 1091191828-Jun-14 13:27
memberMember 1091191828-Jun-14 13:27 
QuestionFunny! Pin
RobBohn7-Nov-13 9:34
memberRobBohn7-Nov-13 9:34 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170525.1 | Last Updated 7 Nov 2013
Article Copyright 2013 by Santiago Santos Cortizo
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid