Jquery DataTable基于Twitter Bootstrap的样式配置和demo下载

用Jquery DataTable很久了，Jquery DataTable是一个很不错的表格插件。

1、功能强大，支持分页、服务器分页、表头表格等样式自定义

2、支持jedit等其他Jquery插件

3、支持ajax、dom、json等数据源；

4、众多使用者的实例代码

等等。更多请参考：[Jquery插件DataTable的使用问题总结]  [Jquery DataTable 函数说明及示例]

大家在Jquery DataTable网站上可能会看到一个基于Twitter Bootstrap的样式配置和demo。

但是这个只能在Jquery DataTable网站上预览。直接下载的demo包里是没有这个demo的。

预览：

我下载了基于Twitter Bootstrap的样式配置需要的css和js文件，配置了一个demo，分享给大家。

Demo下载百度网盘地址：更改demo下载地址。

http://pan.baidu.com/s/1mgJmLaK 

 下载后解压，直接运行html即可看到效果。

文件介绍说明：

Jquery-DataTable-Twitter-Bootstrap.html：demohtml文件。

media:放置css  image  js的文件夹

引用说明：

<link rel="stylesheet" type="text/css" href="media\bootstrap.css">

<link rel="stylesheet" type="text/css" href="media\DT_bootstrap.css">

<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>

<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>




bootstrap.css、DT_bootstrap.css是Twitter Bootstrap的样式css。目前只支持我demo中的css，最新的Twitter Bootstrap

不支持。

js脚本说明：

demo.js 是将Twitter Bootstrap的样式css，通过datatable的sdom、oApi、sPaginationType、oLanguage等函数和接口，

配置完成。主要是分页、背景、菜单等几个主要样式。




  /* Table initialisation */

$(document).ready( function () {




$( '#example' ).dataTable( {




"sDom" :  "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>" ,




"sPaginationType" :  "bootstrap" ,




"oLanguage" : {




"sLengthMenu" :  "_MENU_ records per page"




}

} );




} );

排序样式：

$.extend( $.fn.dataTableExt.oStdClasses, {




     "sSortAsc" :  "header headerSortDown" ,




     "sSortDesc" :  "header headerSortUp" ,




     "sSortable" :  "header"

} );

分页样式修改：

$(document).ready( function () {




     $( '#example' ).dataTable( {




         "sDom" :  "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>"




         "sPaginationType" :  "bootstrap"




     } );

} );