Amaze UI DataTables 使用演示

使用演示

基本使用

Rendering engine	Browser	Platform(s)	Engine version	Grade
Rendering engine	Browser	Platform(s)	Engine version	Grade
Trident	Internet Explorer 4.0	Win 95+	4	X
Trident	Internet Explorer 5.0	Win 95+	5	C
Trident	Internet Explorer 5.5	Win 95+	5.5	A
Trident	Internet Explorer 6	Win 98+	6	A
Trident	Internet Explorer 7	Win XP SP2+	7	A
Trident	AOL browser (AOL desktop)	Win XP	6	A
Gecko	Firefox 1.0	Win 98+ / OSX.2+	1.7	A
Gecko	Firefox 1.5	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 2.0	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 3.0	Win 2k+ / OSX.3+	1.9	A
Gecko	Camino 1.0	OSX.2+	1.8	A
Gecko	Camino 1.5	OSX.3+	1.8	A
Gecko	Netscape 7.2	Win 95+ / Mac OS 8.6-9.2	1.7	A
Gecko	Netscape Browser 8	Win 98SE+	1.7	A
Gecko	Netscape Navigator 9	Win 98+ / OSX.2+	1.8	A
Gecko	Mozilla 1.0	Win 95+ / OSX.1+	1	A
Gecko	Mozilla 1.1	Win 95+ / OSX.1+	1.1	A
Gecko	Mozilla 1.2	Win 95+ / OSX.1+	1.2	A
Gecko	Mozilla 1.3	Win 95+ / OSX.1+	1.3	A
Gecko	Mozilla 1.4	Win 95+ / OSX.1+	1.4	A
Gecko	Mozilla 1.5	Win 95+ / OSX.1+	1.5	A
Gecko	Mozilla 1.6	Win 95+ / OSX.1+	1.6	A
Gecko	Mozilla 1.7	Win 98+ / OSX.1+	1.7	A
Gecko	Mozilla 1.8	Win 98+ / OSX.1+	1.8	A
Gecko	Seamonkey 1.1	Win 98+ / OSX.2+	1.8	A
Gecko	Epiphany 2.20	Gnome	1.8	A
Webkit	Safari 1.2	OSX.3	125.5	A
Webkit	Safari 1.3	OSX.3	312.8	A
Webkit	Safari 2.0	OSX.4+	419.3	A
Webkit	Safari 3.0	OSX.4+	522.1	A
Webkit	OmniWeb 5.5	OSX.4+	420	A
Webkit	iPod Touch / iPhone	iPod	420.1	A
Webkit	S60	S60	413	A
Presto	Opera 7.0	Win 95+ / OSX.1+	-	A
Presto	Opera 7.5	Win 95+ / OSX.2+	-	A
Presto	Opera 8.0	Win 95+ / OSX.2+	-	A
Presto	Opera 8.5	Win 95+ / OSX.2+	-	A
Presto	Opera 9.0	Win 95+ / OSX.3+	-	A
Presto	Opera 9.2	Win 88+ / OSX.3+	-	A
Presto	Opera 9.5	Win 88+ / OSX.3+	-	A
Presto	Opera for Wii	Wii	-	A
Presto	Nokia N800	N800	-	A
Presto	Nintendo DS browser	Nintendo DS	8.5	C/A¹
KHTML	Konqureror 3.1	KDE 3.1	3.1	C
KHTML	Konqureror 3.3	KDE 3.3	3.3	A
KHTML	Konqureror 3.5	KDE 3.5	3.5	A
Tasman	Internet Explorer 4.5	Mac OS 8-9	-	X
Tasman	Internet Explorer 5.1	Mac OS 7.6-9	1	C
Tasman	Internet Explorer 5.2	Mac OS 8-X	1	C
Misc	NetFront 3.1	Embedded devices	-	C
Misc	NetFront 3.4	Embedded devices	-	A
Misc	Dillo 0.8	Embedded devices	-	X
Misc	Links	Text only	-	X
Misc	Lynx	Text only	-	X
Misc	IE Mobile	Windows Mobile 6	-	C
Misc	PSP browser	PSP	-	C
Other browsers	All others	-	-	U

<table class="am-table am-table-striped am-table-bordered am-table-compact" id="example">
  <thead>
  <tr>
    <th>Rendering engine</th>
    <th>Browser</th>
    <th>Platform(s)</th>
    <th>Engine version</th>
    <th>Grade</th>
  </tr>
  </thead>
  <tfoot>
  <tr>
    <th>Rendering engine</th>
    <th>Browser</th>
    <th>Platform(s)</th>
    <th>Engine version</th>
    <th>Grade</th>
  </tr>
  </tfoot>
  <tbody>
  <tr class="odd gradeX">
    <td>Trident</td>
    <td>Internet
      Explorer 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>Internet
      Explorer 5.0</td>
    <td>Win 95+</td>
    <td class="center">5</td>
    <td class="center">C</td>
  </tr>
  <!-- more data -->
  </tbody>
</table>

<script>
  $(function() {
    $('#example').DataTable();
  });
</script>

响应式

引入 dataTables.responsive.min.js
设置 table 宽度 100% 并添加禁止换行 class .am-text-nowrap
初始化时假如 responsive 参数

<table
  width="100%"
  class="am-table am-table-striped am-table-bordered am-table-compact am-text-nowrap"
  id="example-r">
</table>

$('#example-r').DataTable({
  responsive: true,
  dom: 'ti'
});

Rendering engine	Browser	Platform(s)	Engine version	Grade
Rendering engine	Browser	Platform(s)	Engine version	Grade
Trident	Internet Explorer 4.0	Win 95+	4	X
Trident	Internet Explorer 5.0	Win 95+	5	C
Trident	Internet Explorer 5.5	Win 95+	5.5	A
Trident	Internet Explorer 6	Win 98+	6	A
Trident	Internet Explorer 7	Win XP SP2+	7	A
Trident	AOL browser (AOL desktop)	Win XP	6	A
Gecko	Firefox 1.0	Win 98+ / OSX.2+	1.7	A
Gecko	Firefox 1.5	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 2.0	Win 98+ / OSX.2+	1.8	A
Gecko	Firefox 3.0	Win 2k+ / OSX.3+	1.9	A

中文排序

中文排序基于 localeCompare 实现，在不同浏览器上会有差异。如果需要更一致的排序，可以通过后端输出拼音进行排序。

实现步骤：

引入中文排序插件，或者把以下代码粘贴到初始化函数之前：

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "chinese-string-asc": function(s1, s2) {
    return s1.localeCompare(s2);
  },

  "chinese-string-desc": function(s1, s2) {
    return s2.localeCompare(s1);
  }
});

初始化的时候指定哪些栏目是中文字符（columnDefs 文档）：

$('#sorting-chinese').dataTable({
  columnDefs: [
    {type: 'chinese-string', targets: '_all'}
  ]
});

姓名	公司
比尔盖茨	微软
乔布斯	苹果
类布斯科夫斯基	出粮
贝索斯	亚马逊