amazeui-datatables
Version:
jQuery DataTables 插件 Amaze UI 集成
114 lines (107 loc) • 7.94 kB
HTML
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Amaze UI DataTables | Amaze UI 插件</title>
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp"/>
<link rel="icon" type="image/png"
href="http://s.amazeui.org/assets/2.x/i/favicon.png">
<link rel="stylesheet"
href="http://cdn.amazeui.org/amazeui/2.7.0/css/amazeui.min.css">
<link rel="stylesheet" href="http://s.amazeui.org/assets/plugin/css/app.min.css">
<!--[if (gte IE 9)|!(IE)]><!-->
<script src="http://cdn.amazeui.org/jquery/2.1.4/jquery.min.js"></script>
<script src="http://cdn.amazeui.org/amazeui/2.7.0/js/amazeui.min.js"></script>
<!--<![endif]-->
<link rel="stylesheet" href="../amazeui.datatables.css"/>
</head>
<body class="am-plugin">
<!--[if lte IE 8 ]>
<div class="am-alert am-alert">
不支持你使用的浏览器，<a href="http://browsehappy.com/?locale=zh" target="_blank">请升级。</a>
</div>
<![endif]-->
<header class="am-topbar am-topbar-inverse">
<div class="am-container">
<h1 class="am-topbar-brand">
<a href="http://amazeui.org" class="am-text-ir">Amaze UI</a>
<span class="am-badge am-badge-danger">Plugin</span>
</h1>
</div>
</header>
<section class="amp-banner">
<div class="am-container">
<h1>Amaze UI DataTables</h1>
<p class="">jQuery DataTables 插件 Amaze UI 集成。</p>
<p>
<a class="github-button" href="https://github.com/amazeui/datatables">Star</a>
<a class="github-button" href="https://github.com/amazeui/datatables">Fork</a>
<a class="github-button" href="https://github.com/amazeui/datatables/archive/master.zip">Download</a>
</p>
</div>
</section>
<section class="amp-main">
<div class="am-container amp-content">
<h1><a name="amaze-ui-datatables" class="anchor" href="#amaze-ui-datatables"><span class="header-link"></span></a>Amaze UI DataTables</h1><hr>
<p><a href="https://datatables.net/">DataTables</a> 插件 Amaze UI 集成，只修改了样式和默认显示语言，其他参数同官方版。</p>
<ul>
<li><a href="http://amazeui.github.io/datatables/docs/demo.html">使用示例</a></li>
</ul>
<p><strong>使用说明：</strong></p>
<ol>
<li><p>获取 Amaze UI DataTables</p>
<ul>
<li><a href="https://github.com/amazeui/datatables/archive/master.zip">直接下载</a></li>
<li>使用 NPM: <code>npm install amazeui-datatables</code></li>
</ul>
</li>
<li><p>在 Amaze UI 样式之后引入 DataTables 样式（<code>dist</code>目录下的 CSS）：</p>
<p>Amaze UI DataTables 依赖 Amaze UI 样式。</p>
<div class="doc-code demo-highlight"><pre><code class="xml"><span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"path/to/amazeui.min.css"</span>/></span>
<span class="hljs-tag"><<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">"stylesheet"</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"path/to/amazeui.datatables.css"</span>/></span></code></pre></div></li>
<li><p>在 jQuery 之后引入 DataTables 插件（<code>dist</code>目录下的 CSS）：</p>
<div class="doc-code demo-highlight"><pre><code class="xml"><span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"path/to/jquery.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span>
<span class="hljs-tag"><<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"path/to/amazeui.datatables.min.js"</span>></span><span class="undefined"></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre></div></li>
<li><p>初始化 DataTables:</p>
<div class="doc-code demo-highlight"><pre><code class="javascript">$(<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
$(<span class="hljs-string">'#my-table'</span>).DataTable();
});</code></pre></div></li>
</ol>
<h2><a name="gong-neng-zeng-qiang" class="anchor" href="#gong-neng-zeng-qiang"><span class="header-link"></span></a>功能增强</h2><h3><a name="kuo-zhan" class="anchor" href="#kuo-zhan"><span class="header-link"></span></a>扩展</h3><ul>
<li><strong>固定表头</strong>：<a href="https://www.datatables.net/extensions/fixedheader/">文档</a> | <a href="https://www.datatables.net/download/#FixedHeader">下载</a></li>
<li><strong>固定列</strong>：<a href="https://www.datatables.net/extensions/fixedcolumns/">文档</a> | <a href="https://www.datatables.net/download/#FixedColumns">下载</a></li>
<li><strong><a href="http://datatables.net/extensions/responsive/">响应式表格</a></strong></li>
</ul>
<nav class="amp-pager">
</nav>
</div>
</section>
<footer class="amp-footer"><div class="am-g am-g-fixed"><div class="am-u-md-4 am-u-md-push-8"><ul class="amz-social"><li><a href="http://weibo.com/amazeui" title="云适配微博" target="_blank"><span class="am-icon-weibo"></span></a></li><li><a href="#am-wechat" title="云适配微信" data-am-modal><span class="am-icon-wechat"></span></a></li><li><a class="new-issue" href="https://github.com/amazeui/" target="_blank" title="联系我们"><span class="am-icon-paper-plane"></span></a></li></ul></div><div class="col-md-8 col-md-pull-4 am-u-md-8 am-u-md-pull-4"><h2 class="amz-fd"><a href="http://www.yunshipei.com" target="_blank">云适配</a></h2><ul class="amz-links"><li><a href="http://amazeui.org/about/wantu" class="am-icon-heart"> 妹子招亲</a> | <a href="http://amazeui.org/about/contact">联系我们</a></li></ul><p class="amz-cp">© 2015~2016 AllMobilize, Inc. <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>. Developed with <a href="http://www.jetbrains.com/webstorm/" target="_blank">WebStorm</a>.</p></div></div></footer><div class="am-modal am-modal-no-btn" tabindex="-1" id="am-wechat"><div class="am-modal-dialog"><div class="am-modal-hd"><a href="" class="am-close am-close-spin" data-am-modal-close>×</a></div><div class="am-modal-bd"><img src="http://s.amazeui.org/assets/2.x/i/am/qr-ui.jpg" alt="Amaze UI 微信"/><br/>在微信上关注我们</div></div></div><div class="amp-toolbar" id="amp-toolbar"><a href="#top" title="回到顶部" class="am-icon-btn am-icon-arrow-up" id="amp-go-top"></a></div>
<script src="http://s.amazeui.org/assets/plugin/js/app.min.js"></script>
<script async defer id="github-bjs" src="https://buttons.github.io/buttons.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?b424d39312c46404f15e22574a531fbb";
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hm);
})();
(function(w, d, s) {
function gs(){
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(w , d, s ,'//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-34196034-8', 'amazeui.org');
ga('send', 'pageview');
}
if (w.addEventListener) { w.addEventListener('load', gs, false); }
else if (w.attachEvent) { w.attachEvent('onload',gs); }
}(window, document, 'script'));
</script>
</body>
</html>