1.jquery—Datatable简单案列的使用
-
用于前端界面已写好的table,使用非常方便,引用相应的js与css文件就可以使用(此文章为jquery-datatable插件最基本的应用方式)
-
界面结果
2.使用步骤
- 引入文件(采用CDN方式引入,网址https://www.staticfile.org/)
//css文件 <link rel="stylesheet" href="https://cdn.staticfile.org/twitterbootstrap/3.3.7/css/bootstrap.css"> <link rel="stylesheet" href="https://cdn.staticfile.org/datatables/1.10.19/css/dataTables.bootstrap.css"> //js文件 <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://cdn.staticfile.org/datatables/1.10.19/js/jquery.dataTables.js"></script> <script src="https://cdn.staticfile.org/datatables/1.10.19/js/dataTables.bootstrap.js"></script>
2.编写前端代码
<div class="container" style="margin-top:100px"> <table id="table" class="table table-striped table-bordered"> <thead> <tr> <th>Name</th> <th>Age</th> <th>Gender</th> <th>Height</th> <th>Province</th> <th>Sport</th> </tr> </thead> <tbody> <tr> <td>Jill Smith</td> <td>25</td> <td>Female</td> <td>5'4</td> <td>British Columbia</td> <td>Volleyball</td> </tr> <tr> <td>John Stone</td> <td>30</td> <td>Male</td> <td>5'9</td> <td>Ontario</td> <td>Badminton</td> </tr> <tr> <td>Jane Strip</td> <td>29</td> <td>Female</td> <td>5'6</td> <td>Manitoba</td> <td>Hockey</td> </tr> <tr> <td>Gary Mountain</td> <td>21</td> <td>Mail</td> <td>5'8</td> <td>Alberta</td> <td>Curling</td> </tr> <tr> <td>James Camera</td> <td>31</td> <td>Male</td> <td>6'1</td> <td>British Columbia</td> <td>Hiking</td> </tr> </tbody> </table> </div>
3.JavaScript编写(因为是简单的界面所有配置都采用默认配置,只要调用Datatable()方法就能完成界面渲染)
$('#table').DataTable();