Click here to Skip to main content
Click here to Skip to main content

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

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.

License

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

Share

About the Author

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

Comments and Discussions

 
Questionhow to file upload in jtable? PinmemberBappaditya Mondal25-Apr-14 0:08 
AnswerRe: how to file upload in jtable? [modified] PinmemberSantiago Santos Cortizo25-Apr-14 9:25 
QuestionUpdated Version PinmemberMember 813165521-Jan-14 10:57 
AnswerRe: Updated Version Pinmembercarazuza19-Feb-14 5:29 
AnswerRe: Updated Version PinmemberMember 1041027115-Apr-14 5:41 
QuestionLove your work. Having prob w modals PinmemberdgDavidGreene17-Dec-13 11:00 
AnswerRe: Love your work. Having prob w modals PinmemberSantiago Santos Cortizo19-Dec-13 8:07 
QuestionNot working PinmemberTakaz4real17-Nov-13 7:18 
AnswerRe: Not working PinmemberSantiago Santos Cortizo17-Nov-13 22:00 
GeneralRe: Not working PinmemberdgDavidGreene19-Dec-13 9:57 
GeneralMy vote of 1 Pinmemberbezveza11-Nov-13 5:43 
GeneralRe: My vote of 1 PinmemberMember 1091191828-Jun-14 14:27 
QuestionFunny! PinmemberRobBohn7-Nov-13 10:34 

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

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

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