angular-datatables学习与实践总结1

最近在使用angular5作为框架搭建网站前端平台，需要使用表格。以前都是使用的jquery的datatables插件，但是不知道在angular框架中是否还能使用。在github中尝试搜索了一下，果然有datatables的angular版本，于是马上下载投入使用，本系列就是记录angular-datatables的学习与使用之路。

基本格式

HTML

<table datatable [dtOptions]="dtOptions" class="table row-border hover display nowrap"></table>

类名nowrap表示表格中的文字不换行（css中的表示：     white-space: nowrap)，dtOptions表示datatables的设置

Typescript

this.dtOptions={
    colunms:[],
    columnDefs:[],
    ...
}

这种格式是在Typescript中设置表格的列和数据，还可以直接在HTML中设置列和数据

HTML

<table datatable class="row-border hover">
  <thead>
    <tr>
      <th>ID</th>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Foo</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Someone</td>
      <td>Youknow</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Iamout</td>
      <td>Ofinspiration</td>
    </tr>
    <tr>
      <td>4</td>
      <td>Yoda</td>
      <td>Skywalker</td>
    </tr>
    <tr>
      <td>5</td>
      <td>Patrick</td>
      <td>Dupont</td>
    </tr>
    <tr>
      <td>6</td>
      <td>Barack</td>
      <td>Obama</td>
    </tr>
    <tr>
      <td>7</td>
      <td>François</td>
      <td>Holland</td>
    </tr>
    <tr>
      <td>8</td>
      <td>Michel</td>
      <td>Popo</td>
    </tr>
    <tr>
      <td>9</td>
      <td>Chuck</td>
      <td>Norris</td>
    </tr>
    <tr>
      <td>10</td>
      <td>Simon</td>
      <td>Robin</td>
    </tr>
    <tr>
      <td>11</td>
      <td>Louis</td>
      <td>Lin</td>
    </tr>
    <tr>
      <td>12</td>
      <td>Zelda</td>
      <td>Link</td>
    </tr>
  </tbody>
</table>