Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
有着怎样的优势
- 分页,即时搜索和排序
- 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试
- 免费开源 ( MIT license )! 商业支持
如何使用
使用DataTables很简单,只需要引入两个文件, 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上,可以使用下面这两个文件:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
页面中插入代码
<table id="table_id_example" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 3</td>
<td>Row 2 Data 4</td>
</tr>
<tr>
<td>Row 3 Data 5</td>
<td>Row 3 Data 6</td>
</tr>
</tbody>
</table>
页面下方再引入脚本
<script>
$(document).ready( function () {
$('#table_id_example').DataTable();
});
</script>
便大功告成了!
来看效果
非常简单粗暴。
通过Datatables实现增删改查
来看完整示例
<html>
<head>
<meta charset="gbk">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>DataTable</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script src="https://cdn.bootcss.com/datatables/1.10.16/js/jquery.dataTables.js"></script>
<style>
.content {
margin: 50px auto;
border: 1px solid #ccc;
}
.operation {
margin: 10px;
}
.operation>button {
margin: 10px;
}
#books_length {
float: left;
margin-left: 20px;
}
#books_filter {
float: right;
margin-right: 20px;
}
#books {
margin: 5px;
}
.center-block {
display: block;
width: 21%;
margin: auto;
}
</style>
</head>
<body>
<section class="content">
<div class="btn-group operation">
<button id=&#