Skip to content
Permalink
gh-pages
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time
---
layout: default
title: Datatables 中文网
extn: <meta name="baidu-site-verification" content="c42arFx2oj" />
css: >
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.dataTables.min.css">
<link rel="stylesheet" href="/js/datatables/dataTables.bootstrap.css">
<style>
.news-title {
font-weight: 700;
}
.news-date {
color: #acaaaf;
font-weight: 500;
}
.news {
margin-top: 1.25rem;
}
.news-list h2 {
margin-top: 25px;
text-transform: uppercase;
color: #333;
font-size: 22px;
}
.more-news {
margin-top: 2.5rem;
display: inline-block;
font-size:16px;
}
.news-content {
color: grey;
line-height: 1.5em;
margin-top: 0.5em;
}
.highlights {
margin-top: 2rem;
}
/*可以隐藏的广告css样式*/
.adsense_fixed {
width: 100%;
z-index: 999999999999;
}
.adsense_content {
width: 720px;
margin: 0 auto;
position: relative;
background: #fff;
}
.adsense_btn_close, .adsense_btn_info {
font-size: 12px;
color: #fff;
height: 20px;
width: 20px;
vertical-align: middle;
text-align: center;
background: #000;
top: 4px;
left: 4px;
position: absolute;
z-index: 99999999;
font-family: Georgia;
cursor: pointer;
line-height: 18px
}
.adsense_btn_info {
left: 26px;
font-family: Georgia;
font-style: italic
}
.adsense_info_content {
display: none;
width: 260px;
height: 220px;
position: absolute;
top: -270px;
background: rgba(255, 255, 255, .9);
font-size: 14px;
padding: 20px;
font-family: Arial;
border-radius: 4px;
-webkit-box-shadow: 0 1px 26px -2px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 26px -2px rgba(0, 0, 0, .3);
box-shadow: 0 1px 26px -2px rgba(0, 0, 0, .3)
}
.adsense_info_content:after {
content: '';
position: absolute;
left: 25px;
top: 100%;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #fff;
clear: both
}
.adsense_info_content .adsense_h3 {
color: #000;
margin: 0;
font-size: 18px !important;
font-family: 'Arial' !important;
margin-bottom: 20px !important;
}
.adsense_info_content .adsense_p {
color: #888;
font-size: 13px !important;
line-height: 20px;
font-family: 'Arial' !important;
margin-bottom: 20px !important;
}
.adsense_fh5co-team {
color: #000;
font-style: italic;
}
.unread {
box-shadow: 2px 0 0 #4078c0 inset;
}
pre {
font-size: 12px;
padding: 0;
margin: 0;
background: #f0f0f0;
line-height: 20px; /* 行距 */
background: url(/images/pre-bg.gif) repeat-y left top;
width: 300px;
overflow: auto; /* 超出宽度出现滑动条 */
overflow-Y:hidden; /* 作用是隐藏IE的右侧滑动条 */
}
div.cdn {
position: relative;
margin-bottom: 1em;
box-shadow: 0 0 3px #555;
}
div.cdn>span {
display: inline-block;
width: 15%;
height: 30px;
text-align: center;
padding-top: 6px;
float: left;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #eee;
border-right: 1px solid #bbb;
cursor: pointer;
font-size: 0.9em;
}
div.cdn>input {
display: inline-block;
width: 84%;
height: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px 5px;
vertical-align: middle;
background-color: #f9f9f9;
border: none;
font-family: "Source Code Pro","Consolas","Monaco","Bitstream Vera Sans Mono","Courier New",Courier,monospace;
font-size: 0.8em;
}
div.cdn>a.cdn-link {
position: absolute;
top: 6px;
right: 11px;
height: 9px;
width: 9px;
background: url(/images/external-site.gif) no-repeat center center;
background-color: #f9f9f9;
padding: 3px;
border: 1px solid #4d90fe;
border-radius: 3px;
}
</style>
---
{% include nav.html param="index" %}
<input type="hidden" id="noad"/>
<header class="jumbotron subhead" id="overview">
<div class="container">
<div class="span4">
<h1>Welcome</h1>
<h3>欢迎访问Datatables中文网</h3>
<p>
<a class="btn btn-lg btn-primary btn-shadow bs3-link" href="http://datatables.net/" target="_blank"
role="button">Datatables官网 &raquo;</a>
<a class="btn btn-lg btn-primary btn-shadow bs3-link"
href="http://datatables.net/releases/DataTables-{{ site.dtversion }}.zip" target="_blank" role="button"
title="DataTables-{{ site.dtversion }}">最新版下载 &raquo;</a>
</p>
<p>
<a class="btn btn-lg btn-primary btn-shadow bs3-link"
href="https://github.com/ssy341/datatables-cn/issues" target="_blank" role="button"
title="交流学习">交流学习 &raquo;</a>
</p>
<p>
<a class="btn btn-lg btn-primary btn-shadow bs3-link"
href="#qqgroup" role="button"
title="加入QQ群交流">加入QQ群交流 &raquo;</a>
</p>
</div>
<div class="span7">
<p style="font-size:15px;text-indent: 2em;">
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
<ul>
<li>分页,即时搜索和排序</li>
<li>几乎支持任何数据源:DOM,
javascript,
Ajax 和
服务器处理
</li>
<li>支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation</li>
<li>各式各样的扩展: Editor, TableTools, FixedColumns ……</li>
<li>丰富多样的option和强大的API</li>
<li>支持国际化</li>
<li>超过2900+个单元测试</li>
<li>免费开源 ( <a href="http://datatables.net/license/mit">MIT license</a> )!<a
href="http://datatables.net/support"> 商业支持</a></li>
<li>更多特性请到官网查看</li>
</ul>
</p>
</div>
</div>
</header>
<div class="container" style="margin-top:20px">
{% include index/getting_started.html %}
{% include index/bloglist.html %}
</div>
{% include script.html %}
{% include copyright.html %}
<script id="dsq-count-scr" src="//datatables.disqus.com/count.js" async></script>
<!-- 自适应支持 -->
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>
<script id="issueTableScript">
var githubTable;
$(document).ready(function () {
//配置DataTables默认参数
$.extend(true, $.fn.dataTable.defaults, {
"language": {
"url": "/assets/Chinese.txt"
},
"dom": "l<'#toolbar'>frtip"
});
//issue表格初始化
githubTable = $("#issueTable").DataTable({
//使用响应式
responsive: true,
//调用github api 获取issues 数据
ajax: {
url: "https://api.github.com/repos/ssy341/datatables-cn/issues",
dataSrc: ""
},
//默认最后一列(最后更新时间)降序排列
order: [[4, "desc"]],
//行被创建回调
createdRow: function (row, data, dataIndex) {
var updated_at = new Date(Date.parse(data.updated_at)).Format("yyyy-MM-dd hh:mm:ss");
updated_at = new Date(updated_at).getTime();
var current = new Date().getTime();
var bl = current - updated_at;
var s = 5 * 24 * 60 * 60 * 1000;
//最后更新日期在最近5天则突出显示
if (bl < s) {
$(row).addClass('unread');
}
},
//行创建完成后回调
rowCallback: function (row, data, index) {
var tags = $(row).find("td:eq(1)");
if (tags.text().indexOf("置顶") > 0) {
var title = $(row).find("td:eq(0)");
var hot = "<span class='hot'></span>";
title.html(title.html() + hot);
}
},
//配置列
columnDefs: [
{
targets: 4,
data: "updated_at",
title: "<i class='icon-time'></i>",
render: function (data, type, row, meta) {
return new Date(Date.parse(data)).Format("yyyy-MM-dd hh:mm:ss");
}
},
{
targets: 3,
data: null,
title: "<i class='icon-user'></i>",
render: function (data, type, row, meta) {
return "<a href='" + row.user.html_url +
"' target='_blank'>" + row.user.login + "</a>";
}
},
{
targets: 2,
data: "comments",
title: "<i class='icon-comment'></i>",
render: function (data, type, row, meta) {
var comments = data + "<i class='icon-comment'></i>";
return comments;
}
},
{
targets: 1,
data: null,
title: "<i class='icon-tag'></i>",
render: function (data, type, row, meta) {
var labels = "";
if (row.labels.length) {
for (var j = 0, labelslen = row.labels.length; j < labelslen; j++) {
labels += "<span style='color:#" + row.labels[j].color + "' >" +
row.labels[j].name + "</span>";
if (j != labelslen - 1) {
labels += ",";
}
}
}
return labels;
}
},
{
targets: 0,
data: "title",
title: "<i class='icon-question-sign'></i>",
render: function (data, type, row, meta) {
var title = "<a href='" + row.html_url +
"' target='_blank'>" + row.title + "</a>";
return title;
}
}
],
initComplete: function () {
//表格加载完毕,手动添加按钮到表格上
$("#toolbar").css("width", "100px").css("display", "inline").css("margin-left", "10px");
$("#toolbar").append("<a href='https://github.com/ssy341/datatables-cn/issues/new' " +
"class='btn btn-primary btn-sm' target='_blank'>我有问题</a>");
$("#toolbar").append("<a href='/example/diy.html' " +
"class='btn btn-default btn-sm' style='margin-left: 5px' target='_blank'>DIY</a>");
$("#toolbar").append("<a href='javascript:void(0);' " +
"class='btn btn-default btn-sm closedIssue' " +
"style='margin-left: 5px;color:#009900'>查看已解决问题</a>");
$("#toolbar").append("<a href='javascript:void(0);' " +
"class='btn btn-default btn-sm viewCode' style='margin-left: 5px;'>查看本实例代码</a>");
//加载已经关闭的问题
$(".closedIssue").clickToggle(function () {
//调用url方法切换dt的数据源
githubTable.ajax.url("https://api.github.com/repos/ssy341/datatables-cn/issues?state=closed").load();
$(this).text("查看未解决问题").css("color", "#FF0000");
}, function () {
githubTable.ajax.url("https://api.github.com/repos/ssy341/datatables-cn/issues").load();
$(this).text("查看已解决问题").css("color", "#009900");
});
//查看本例子代码
$(".viewCode").click(function(){
//显示模态框展示代码
$("#issueTableCode").modal("show");
$("#issueTableCodeContent").html($("#issueTableScript").html());
});
}
});
});
//时间格式化
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1,
//月份
"d+": this.getDate(),
//日
"h+": this.getHours(),
//小时
"m+": this.getMinutes(),
//分
"s+": this.getSeconds(),
//秒
"q+": Math.floor((this.getMonth() + 3) / 3),
//季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
};
//事件来回切换方法
//solve this
//reference http://stackoverflow.com/questions/4911577/jquery-click-toggle-between-two-functions
(function ($) {
$.fn.clickToggle = function (func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function () {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
</script>
<script>
//捐赠表格初始化
$(document).ready(function () {
$('#example').dataTable({
order: [
[2, "desc"]
],
pageLength: 3,
dom: "it" +
"<'row'p>",
lengthChange: !1,
columns: [
{data: "nickname"},
{data: "money"},
{data: "date"}
],
language: {
search: "",
paginate: {
next: ">",
previous: "<"
}
// info: " _START_ - _END_ (共_TOTAL_个热心网友 )"+' <a class="button button-success" href="/about/index.html#donate">我也要赞一个 &gt;&gt;</a>'
},
ajax: "{{site.baseurl}}/assets/donate.txt",
createdRow: function (row, data, dataIndex) {
$(row).attr("title", data.note)
if (data.type) {
$(row).addClass("donateType");
} else {
$(row).addClass("earnType");
}
},
infoCallback: function (settings, start, end, max, total, pre) {
return start + "-" + end + "(共" + total + "个热心网友 )<a class='button button-success' href='/about/index.html#donate'>我也要赞一个 &gt;&gt;</a>";
},
initComplete: function () {
var api = this.api();
var fda = api.column(1).data().reduce(function (a, b) {
return (parseFloat(a) + parseFloat(b)).toFixed(2);
});
$(api.column(0).footer()).html("总额:" + fda);
}
});
});
</script>