Bootstrap + jQuery datatables

jQuery datatables is a jQuery plug-in for advanced interaction controls to HTML table. However, I have some trouble  when I tried to integration with Twitter Bootstrap.

I found a post at datatables forum (single-page example). When you need:

• DT_bootstrap.css
• DT_bootstrap.js
• HTML table with thead and tbody tags
• Table initialization

More

• TableTools with Twitter Bootstrap
• Adjust column width. jQuery datatables is auto width by default, but you can adjust it using aoColumns.

 

[obsolete for Bootstrap 1.4]

I found a post at datatables forum (original blog and single-page example). When you need:

• bootstrap.min.css (version 1.4, CRN) and DT_bootstrap.css
• pagination and sorting code/plug-in (I save them in a single js file)
• HTML table with thead and tbody tags
• Table initialization

 

Bootstrap Typeahead

Twitter bootstrap typeahead is a simple simple autocompletion library,  but it is well documented in official website. Here are more materials from internet.

A simple example for newbie: Twitter Bootstrap typeaheads tutorial

Getting more from Twitter Bootstrap’s Typeahead library

Using Ajax: a very good stack overflow post, and ajax-typeahead, enable Bootstrap Typeahead plugin with Ajax.

Bootstrap typeahead examples, and heavily customizing examples

Twitter Bootstrap

Introduction

• Pending

References

• Official website

More

• Monospace font (see here)
• Why Twitter Bootstrap table is always 100% width? (see here)
• Table without border (see here)
• Center a button in a div (se here)
• Bootstrap typeahead (or autocompletion)