首页日志正文
bootstrap4全新非josn响应智能排序表格
日期:2020-6-30 9:41:50 人气:24
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>bootstrap4全新非josn响应智能排序表格</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="/jquery/jquery-1.10.2.js"></script>
<link href="../plugins/datatables/dataTables.bootstrap4.css" rel="stylesheet" type="text/css" />
<!-- 表格及表头筛选样式 -->
<link href="../plugins/datatables/responsive.bootstrap4.css" rel="stylesheet" type="text/css" />
<!-- 点击打开的样式 -->
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<!-- end page title -->
<div>
<div>
<div>
<div>
<table id="basic-datatable" class="table dt-responsive nowrap">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>阿阿</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>17</td>
<td>2012/07/07</td>
<td>2012/03/07</td>
<td>$87,500</td>
</tr>
<tr>
<td>阿不</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>34</td>
<td>2012-04-13 07:06</td>
<td>2012-04-09</td>
<td>$138,575</td>
</tr>
<tr>
<td>不不</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>84</td>
<td>104</td>
<td>2012/04/13 07:05</td>
<td>2012/05/09</td>
<td>$138,575</td>
</tr>
</tbody>
</table>
</div> <!-- end card body-->
</div> <!-- end card -->
</div><!-- end col-->
</div>
<!-- end row-->
</div>
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<!-- <script src="../plugins/datatables/dataTables.bootstrap4.js"></script> -->
<script src="../plugins/datatables/dataTables.responsive.min.js"></script>
<!--响应的,超出换行-->
<script src="assets/pages/datatables-demo.js"></script>
</body>
</html>
文件下载地址:
dataTables.bootstrap4.css
responsive.bootstrap4.css
bootstrap.min.css
jquery.dataTables.min.js
dataTables.responsive.min.js
datatables-demo.js