Datatable纯新手入门

Datatable是基于Jquery的一个非常好用的用来展示数据表格的插件。下面来介绍一下一般的使用方法。

在辛老师的视频，我们曾经接触过datatable，不过当时我们是直接复制其样式来将它加入我们的网页。但是这样的方法和datatable的实际生成相差太多。许多人的项目都需要datatable来进行数据的展示，但是似乎对datatable一般的用法并不了解，而且也不知道它的功能，而它的能力实际上比我们之前所了解的要强得多。所以我打算以这个为题目来写一篇文章（我不打算教难一点的用法，这样子容易让大家感到迷惑，而且也和我一开始的想法不符），下面是目录：
 
1.从零开始构建最简单的datatable

  1.1 下载

  1.2 构建最简单的datatable

  1.3 其他方法进行对datatable的数据传入

2.给datatable增加按钮

  2.1 导出、打印按钮

  2.2 表内按钮

至少需要下载vscode并安装live server插件来打开html文件，以便于更好地学习该文章

 
 
 
 

1.从零开始构建datatable

  在这里，我会从零开始构建一个datatable，想要学习的同学跟着做就可以了。（所有的文件都会放到一个链接里面，大家自行下载即可）

 1.1 下载

首先进入datatable的官网 https://datatables.net/download/

接下来如图所示进行勾选，可以进行

需要勾选的内容

datatable拥有非常多的组件，我们的教学中只需要用到一部分，所以我们不需要全部打勾

如果不想下载的，可以使用这里的百度网盘，里面有一个简单构建的案例。

        链接：https://pan.baidu.com/s/1_ISp_N3mAHvkLA9vA10gVA    提取码：p9k8

1.2 构建最简单的datatable

 首先，许多同学以前并没有接触过前端的经验，所以不知道许多复杂的表现形式（比如说游戏、还有就是datatbale这样的表格），都已经被开发者进行封装好了。我们调用的人，往往只需要一个标签和一行JS代码就可以对该标签进行渲染。我们这个datatable也是这个样子。下面是构建一个最简单的datatable的过程
创建一个html文件，写下以下内容（文件的结构就不讲了，可以下载代码进行理解）

index1.html:

    
    
    
    
    



    
          ...
          ...
    

       

            

                
Name
                
Position
                
Office
                
Age
                
Start date
                
Salary
            
        
        

            

                
Tiger Nixon
                
System Architect
                
Edinburgh
                
61
                
2011/04/25
                
$320,800
            
            

                
Garrett Winters
                
Accountant
                
Tokyo
                
63
                
2011/07/25
                
$170,750
            

        
    




    
    




    

        

            

                
Name
                
Position
                
Office
                
Extn.
                
Start date
                
Salary
            
        
    

data.txt:

{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {
      "id": "3",
      "name": "Ashton Cox",
      "position": "Junior Technical Author",
      "salary": "$86,000",
      "start_date": "2009/01/12",
      "office": "San Francisco",
      "extn": "1562"
    },
......
]
}

  可以看到，相比之前的代码，这里的初始化代码中多了"ajax"和"columns"两行
  ajax代表使用ajax来请求数据，代码中仅仅写了一个data文件，在实际运用当中就可以写对应的数据接口（其给出的数据应该与data.txt的格式保持一致）
  columns代表我们对datatable中每一列的设置。这里仅仅设置了每一列的内容所对应的对象中的键的名称，也就是说我们可以随意更改每一列所展示的内容。
  数据的格式不仅仅是json一种，也可以是更简单的列表格式，这方面就不再介绍。

2.给datatable增加按钮

  仅仅是上面讲的内容，并不能满足更加复杂的需求，所以datatable又有了更多的组件，其中比较重要的就是按钮
  我们在WEB制表的过程中，经常会有对表格进行打印、导出为PDF、EXCEL等的需求，datatable的按钮拓展就可以帮我们实现这方面的需求

index3.html:

    
    
    
    
    
    
    
    



    

        

            

                
Name
                
Position
                
Office
                
Extn.
                
Start date
                
Salary
            
        
    

加入了按钮拓展后的datatable

  我们可以发现和之前的相比，在datatable的代码中多了两行数据，分别是 dom 和 buttons，dom表示在datatable四周的控件分布，如果不在最前面加一个B，那么按钮就不会出现。而buttons就确定了会有哪些button出现在datatable旁边。

  我这篇文章，只能说是给完全不懂datatbale甚至不怎么懂前端的同学做的一个实际操作说明。

想要学会更多，请查看datatable中文网。 http://datatables.club/