Datatables+Bootstrap

http://sandbox.runjs.cn/show/thwac3ec　　运行效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>bootstrap datatable demo</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.css"><link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap-responsiv.css"><link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/dataTables.bootstra.css">
</head><body><div class="container-fluid"><div class="row-fluid"><h1>Datatables + Bootstrap 组合基础示例 1</h1><div><ul class="breadcrumb"><li>基本功能：</li><li>分页 <span class="divider">/</span></li><li>排序 <span class="divider">/</span></li><li>过滤</li></ul></div></div><div class="row-fluid"><table class="table table-striped table-bordered table-hover datatable"><thead><tr><th>Rendering engine</th><th>Browser</th><th>Platform(s)</th><th>Engine version</th><th>CSS grade</th></tr></thead><tbody><tr class="odd gradeX"><td>Trident</td><td>InternetExplorer 4.0</td><td>Win 95+</td><td class="center">4</td><td class="center">X</td></tr><tr class="even gradeC"><td>Trident</td><td>InternetExplorer 5.0</td><td>Win 95+</td><td class="center">5</td><td class="center">C</td></tr><tr class="odd gradeA"><td>Trident</td><td>InternetExplorer 5.5</td><td>Win 95+</td><td class="center">5.5</td><td class="center">A</td></tr><tr class="even gradeA"><td>Trident</td><td>InternetExplorer 6</td><td>Win 98+</td><td class="center">6</td><td class="center">A</td></tr><tr class="odd gradeA"><td>Trident</td><td>Internet Explorer 7</td><td>Win XP SP2+</td><td class="center">7</td><td class="center">A</td></tr><tr class="even gradeA"><td>Trident</td><td>AOL browser (AOL desktop)</td><td>Win XP</td><td class="center">6</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Firefox 1.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.7</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Firefox 1.5</td><td>Win 98+ / OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Firefox 2.0</td><td>Win 98+ / OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Firefox 3.0</td><td>Win 2k+ / OSX.3+</td><td class="center">1.9</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Camino 1.0</td><td>OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Camino 1.5</td><td>OSX.3+</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Netscape 7.2</td><td>Win 95+ / Mac OS 8.6-9.2</td><td class="center">1.7</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Netscape Browser 8</td><td>Win 98SE+</td><td class="center">1.7</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Netscape Navigator 9</td><td>Win 98+ / OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.0</td><td>Win 95+ / OSX.1+</td><td class="center">1</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.1</td><td>Win 95+ / OSX.1+</td><td class="center">1.1</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.2</td><td>Win 95+ / OSX.1+</td><td class="center">1.2</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.3</td><td>Win 95+ / OSX.1+</td><td class="center">1.3</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.4</td><td>Win 95+ / OSX.1+</td><td class="center">1.4</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.5</td><td>Win 95+ / OSX.1+</td><td class="center">1.5</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.6</td><td>Win 95+ / OSX.1+</td><td class="center">1.6</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.7</td><td>Win 98+ / OSX.1+</td><td class="center">1.7</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Mozilla 1.8</td><td>Win 98+ / OSX.1+</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Seamonkey 1.1</td><td>Win 98+ / OSX.2+</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Gecko</td><td>Epiphany 2.20</td><td>Gnome</td><td class="center">1.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Webkit</td><td>Safari 1.2</td><td>OSX.3</td><td class="center">125.5</td><td class="center">A</td></tr><tr class="gradeA"><td>Webkit</td><td>Safari 1.3</td><td>OSX.3</td><td class="center">312.8</td><td class="center">A</td></tr><tr class="gradeA"><td>Webkit</td><td>Safari 2.0</td><td>OSX.4+</td><td class="center">419.3</td><td class="center">A</td></tr><tr class="gradeA"><td>Webkit</td><td>Safari 3.0</td><td>OSX.4+</td><td class="center">522.1</td><td class="center">A</td></tr><tr class="gradeA"><td>Webkit</td><td>OmniWeb 5.5</td><td>OSX.4+</td><td class="center">420</td><td class="center">A</td></tr><tr class="gradeA"><td>Webkit</td><td>iPod Touch / iPhone</td><td>iPod</td><td class="center">420.1</td><td class="center">A</td></tr><tr class="gradeA"><td>Webkit</td><td>S60</td><td>S60</td><td class="center">413</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera 7.0</td><td>Win 95+ / OSX.1+</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera 7.5</td><td>Win 95+ / OSX.2+</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera 8.0</td><td>Win 95+ / OSX.2+</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera 8.5</td><td>Win 95+ / OSX.2+</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera 9.0</td><td>Win 95+ / OSX.3+</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera 9.2</td><td>Win 88+ / OSX.3+</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera 9.5</td><td>Win 88+ / OSX.3+</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Opera for Wii</td><td>Wii</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Nokia N800</td><td>N800</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeA"><td>Presto</td><td>Nintendo DS browser</td><td>Nintendo DS</td><td class="center">8.5</td><td class="center">C/A <sup>1</sup></td></tr><tr class="gradeC"><td>KHTML</td><td>Konqureror 3.1</td><td>KDE 3.1</td><td class="center">3.1</td><td class="center">C</td></tr><tr class="gradeA"><td>KHTML</td><td>Konqureror 3.3</td><td>KDE 3.3</td><td class="center">3.3</td><td class="center">A</td></tr><tr class="gradeA"><td>KHTML</td><td>Konqureror 3.5</td><td>KDE 3.5</td><td class="center">3.5</td><td class="center">A</td></tr><tr class="gradeX"><td>Tasman</td><td>Internet Explorer 4.5</td><td>Mac OS 8-9</td><td class="center">-</td><td class="center">X</td></tr><tr class="gradeC"><td>Tasman</td><td>Internet Explorer 5.1</td><td>Mac OS 7.6-9</td><td class="center">1</td><td class="center">C</td></tr><tr class="gradeC"><td>Tasman</td><td>Internet Explorer 5.2</td><td>Mac OS 8-X</td><td class="center">1</td><td class="center">C</td></tr><tr class="gradeA"><td>Misc</td><td>NetFront 3.1</td><td>Embedded devices</td><td class="center">-</td><td class="center">C</td></tr><tr class="gradeA"><td>Misc</td><td>NetFront 3.4</td><td>Embedded devices</td><td class="center">-</td><td class="center">A</td></tr><tr class="gradeX"><td>Misc</td><td>Dillo 0.8</td><td>Embedded devices</td><td class="center">-</td><td class="center">X</td></tr><tr class="gradeX"><td>Misc</td><td>Links</td><td>Text only</td><td class="center">-</td><td class="center">X</td></tr><tr class="gradeX"><td>Misc</td><td>Lynx</td><td>Text only</td><td class="center">-</td><td class="center">X</td></tr><tr class="gradeC"><td>Misc</td><td>IE Mobile</td><td>Windows Mobile 6</td><td class="center">-</td><td class="center">C</td></tr><tr class="gradeC"><td>Misc</td><td>PSP browser</td><td>PSP</td><td class="center">-</td><td class="center">C</td></tr><tr class="gradeU"><td>Other browsers</td><td>All others</td><td>-</td><td class="center">-</td><td class="center">U</td></tr></tbody></table></div><script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/jquery.js"></script><script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/jquery.dataTables.js"></script><script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/bootstrap.min.js"></script><script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/238/n8vhm36h/dataTables.bootstrap.js"></script></div>
</body>
</html>

$(document).ready(function() {$('.datatable').dataTable( {                        "oLanguage": {"sUrl": "/uploads/rs/238/n8vhm36h/zh_CN.json"} });} );

zh_CN.json

{"sProcessing":   "处理中...","sLengthMenu":   "_MENU_ 记录/页","sZeroRecords":  "没有匹配的记录","sInfo":         "显示第 _START_ 至 _END_ 项记录，共 _TOTAL_ 项","sInfoEmpty":    "显示第 0 至 0 项记录，共 0 项","sInfoFiltered": "(由 _MAX_ 项记录过滤)","sInfoPostFix":  "","sSearch":       "过滤:","sUrl":          "","oPaginate": {"sFirst":    "首页","sPrevious": "上页","sNext":     "下页","sLast":     "末页"}
}

转载于:https://www.cnblogs.com/xiaoleiel/p/8315291.html

Datatables+Bootstrap相关推荐

Datatables + Bootstrap
http://runjs.cn/detail/thwac3ec?from=mail-notify
jQuery - （JQuery datatables api 使用解读）
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解学习可参考:http://www.g ...
JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
datatables 配套bootstrap3样式使用小结（1）
今天介绍汇总一下datatables. 网址: www.datatables.net 公司CMS内容资讯站的后台管理界面用了大量的table来管理数据,试用了之后,感觉挺不错,推荐一下. 先上一个基本 ...
ASP.NET MVC 使用 Datatables (1)
ASP.NET MVC 使用 Datatables (1) 具体步骤: 1.建立实体类 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
datatables表格行内编辑的实现
Datatables是一款jquery表格插件,它是一个高度灵活的工具,灵活就意味着很多功能需要自己去实现,比如说行内编辑功能. Datatables自己是没有行内编辑功能的,最简单的是通过modal ...
ASP.NET MVC 5 ABP DataTables （二）
1)ABP DataTables 应用(一) 2) ABP DataTables 应用(二) JS DataTables 这个组件绑定数据必须要有自己的返回数据格式.但是ABP返回的格式直接绑定是错 ...
JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据
通过Eclipse创建一个简单的Spring MVC项目,使用其内置的JSON转换在index.jsp文件中添加如下内容: <%@ page language="java" ...
插件介绍: DataTables 表格分页
官网: 英文:https://datatables.net/ 中文:http://www.datatables.club/ 引入文件(结合bootstrap样式): css:<link href ...

Datatables+Bootstrap

Datatables+Bootstrap相关推荐

最新文章

热门文章