javascript data tables with twitter bootstrap

javascript data tables with twitter bootstrap

I’m trying to integrate DataTables.js (http://datatables.net) with an app which uses twitter bootstrap library. It seems like DataTable doesn’t work well with twitter bootstrap. I’m not sure its the css or js thats conflicting.
How can I integrate DataTables.js with Twitter Bootstrap? Are there any other data tables libraries that work well with Twitter Bootstrap?

Solutions/Answers:

Solution 1:

It is actually quite easy to integrate Bootstrap and DataTables such that your fully featured DataTables will match the same look and feel of the rest of your site.
Here is the link : http://datatables.net/blog/Twitter_Bootstrap

For Bootstrap v2.x.x: http://datatables.net/blog/Twitter_Bootstrap_2

Solution 2:

For Bootstrap 3, use this plugin.

DataTables Plugins

This repository contains a collection of plug-ins
for the jQuery DataTables table enhancer. These plug-ins are feature
enhancing for the DataTables library, adding extra options to core
functionality such as additional sort algorithms, API methods and
pagination controls. The plug-ins should not be confused with
DataTables “extras” which are more significant software libraries
which add additional features to DataTables.

Solution 3:

SOLUTION

  • Use Download Builder to generate links to JS/CSS files and include Bootstrap styling and Twitter Bootstrap library (if needed).

  • Include generated JS/CSS links into your project.

  • Use classes table table-striped table-bordered for your <table> as shown below:

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
    

DEMO

See this jsFiddle for code and demonstration.

References

Related:  Bootstrap Affix plugin with fluid layout