Amaze UI Plugin

Amaze UI DataTables

jQuery DataTables 插件 Amaze UI 集成。

Star Fork Download

使用演示


基本使用

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/A1
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>

响应式

<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 实现, 在不同浏览器上会有差异。如果需要更一致的排序,可以通过后端输出拼音进行排序。

实现步骤:

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

    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);
      }
    });
  2. 初始化的时候指定哪些栏目是中文字符(columnDefs 文档):

    $('#sorting-chinese').dataTable({
      columnDefs: [
        {type: 'chinese-string', targets: '_all'}
      ]
    });
姓名 公司
比尔盖茨 微软
乔布斯 苹果
类布斯科夫斯基 出粮
贝索斯 亚马逊
Amaze UI 微信
在微信上关注我们