前端 “Datatable表格 “源码实例 【排序，分页 ，搜索，设置表格每页展示数量】
效果图
源码 【可直接复制到本地运行】
说明 ：
- 这里的数据是在 html中写死的，实际开发中一般是通过ajax请求接口来获取数据， 然后渲染到前端页面
- 源码中的 jquery.js , bootstrap-table.js 等 使用的在线CDN ， 不需要本地下载
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js">script>
head>
<body>
<table id="example" class="display " style="width:100%">
<thead>
<tr>
<th>Nameth>
<th>Positionth>
<th>Officeth>
<th>Ageth>
<th>Start dateth>
<th>Salaryth>
tr>
thead>
<tbody>
<tr>
<td>Tiger Nixontd>
<td>System Architecttd>
<td>Edinburghtd>
<td>61td>
<td>2011/04/25td>
<td>$320,800td>
tr>
<tr>
<td>Garrett Winterstd>
<td>Accountanttd>
<td>Tokyotd>
<td>63td>
<td>2011/07/25td>
<td>$170,750td>
tr>
<tr>
<td>Ashton Coxtd>
<td>Junior Technical Authortd>
<td>San Franciscotd>
<td>66td>
<td>2009/01/12td>
<td>$86,000td>
tr>
<tr>
<td>Cedric Kellytd>
<td>Senior Javascript Developertd>
<td>Edinburghtd>
<td>22td>
<td>2012/03/29td>
<td>$433,060td>
tr>
<tr>
<td>Airi Satoutd>
<td>Accountanttd>
<td>Tokyotd>
<td>33td>
<td>2008/11/28td>
<td>$162,700td>
tr>
<tr>
<td>Brielle Williamsontd>
<td>Integration Specialisttd>
<td>New Yorktd>
<td>61td>
<td>2012/12/02td>
<td>$372,000td>
tr>
<tr>
<td>Herrod Chandlertd>
<td>Sales Assistanttd>
<td>San Franciscotd>
<td>59td>
<td>2012/08/06td>
<td>$137,500td>
tr>
<tr>
<td>Rhona Davidsontd>
<td>Integration Specialisttd>
<td>Tokyotd>
<td>55td>
<td>2010/10/14td>
<td>$327,900td>
tr>
<tr>
<td>Colleen Hursttd>
<td>Javascript Developertd>
<td>San Franciscotd>
<td>39td>
<td>2009/09/15td>
<td>$205,500td>
tr>
<tr>
<td>Sonya Frosttd>
<td>Software Engineertd>
<td>Edinburghtd>
<td>23td>
<td>2008/12/13td>
<td>$103,600td>
tr>
<tr>
<td>Jena Gainestd>
<td>Office Managertd>
<td>Londontd>
<td>30td>
<td>2008/12/19td>
<td>$90,560td>
tr>
<tr>
<td>Quinn Flynntd>
<td>Support Leadtd>
<td>Edinburghtd>
<td>22td>
<td>2013/03/03td>
<td>$342,000td>
tr>
<tr>
<td>Charde Marshalltd>
<td>Regional Directortd>
<td>San Franciscotd>
<td>36td>
<td>2008/10/16td>
<td>$470,600td>
tr>
<tr>
<td>Haley Kennedytd>
<td>Senior Marketing Designertd>
<td>Londontd>
<td>43td>
<td>2012/12/18td>
<td>$313,500td>
tr>
<tr>
<td>Tatyana Fitzpatricktd>
<td>Regional Directortd>
<td>Londontd>
<td>19td>
<td>2010/03/17td>
<td>$385,750td>
tr>
<tr>
<td>Michael Silvatd>
<td>Marketing Designertd>
<td>Londontd>
<td>66td>
<td>2012/11/27td>
<td>$198,500td>
tr>
<tr>
<td>Paul Byrdtd>
<td>Chief Financial Officer (CFO)td>
<td>New Yorktd>
<td>64td>
<td>2010/06/09td>
<td>$725,000td>
tr>
<tr>
<td>Gloria Littletd>
<td>Systems Administratortd>
<td>New Yorktd>
<td>59td>
<td>2009/04/10td>
<td>$237,500td>
tr>
<tr>
<td>Bradley Greertd>
<td>Software Engineertd>
<td>Londontd>
<td>41td>
<td>2012/10/13td>
<td>$132,000td>
tr>
<tr>
<td>Dai Riostd>
<td>Personnel Leadtd>
<td>Edinburghtd>
<td>35td>
<td>2012/09/26td>
<td>$217,500td>
tr>
<tr>
<td>Jenette Caldwelltd>
<td>Development Leadtd>
<td>New Yorktd>
<td>30td>
<td>2011/09/03td>
<td>$345,000td>
tr>
<tr>
<td>Yuri Berrytd>
<td>Chief Marketing Officer (CMO)td>
<td>New Yorktd>
<td>40td>
<td>2009/06/25td>
<td>$675,000td>
tr>
<tr>
<td>Caesar Vancetd>
<td>Pre-Sales Supporttd>
<td>New Yorktd>
<td>21td>
<td>2011/12/12td>
<td>$106,450td>
tr>
<tr>
<td>Doris Wildertd>
<td>Sales Assistanttd>
<td>Sidneytd>
<td>23td>
<td>2010/09/20td>
<td>$85,600td>
tr>
<tr>
<td>Angelica Ramostd>
<td>Chief Executive Officer (CEO)td>
<td>Londontd>
<td>47td>
<td>2009/10/09td>
<td>$1,200,000td>
tr>
<tr>
<td>Gavin Joycetd>
<td>Developertd>
<td>Edinburghtd>
<td>42td>
<td>2010/12/22td>
<td>$92,575td>
tr>
<tr>
<td>Jennifer Changtd>
<td>Regional Directortd>
<td>Singaporetd>
<td>28td>
<td>2010/11/14td>
<td>$357,650td>
tr>
<tr>
<td>Brenden Wagnertd>
<td>Software Engineertd>
<td>San Franciscotd>
<td>28td>
<td>2011/06/07td>
<td>$206,850td>
tr>
<tr>
<td>Fiona Greentd>
<td>Chief Operating Officer (COO)td>
<td>San Franciscotd>
<td>48td>
<td>2010/03/11td>
<td>$850,000td>
tr>
<tr>
<td>Shou Itoutd>
<td>Regional Marketingtd>
<td>Tokyotd>
<td>20td>
<td>2011/08/14td>
<td>$163,000td>
tr>
<tr>
<td>Michelle Housetd>
<td>Integration Specialisttd>
<td>Sidneytd>
<td>37td>
<td>2011/06/02td>
<td>$95,400td>
tr>
<tr>
<td>Suki Burkstd>
<td>Developertd>
<td>Londontd>
<td>53td>
<td>2009/10/22td>
<td>$114,500td>
tr>
<tr>
<td>Prescott Bartletttd>
<td>Technical Authortd>
<td>Londontd>
<td>27td>
<td>2011/05/07td>