现在位置首页 / 前端开发 /正文

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

作者: IT小兵 | 2014年4月9日| 热度:℃ | 评论: |参与:

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"
    } );
} );


更多交流,可以关注我:  @新浪微博 @腾讯微博

转发注明:IT分享  http://www.suchso.com 


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询