首先在html 中引入几个 bootstrap.min.css jquery.dataTables.min.css bootstrap.min.js jquery.dataTables.min.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Datatable-serverSide 服务器分页例子</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="css/dataTables.bootstrap.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="js/dataTables.bootstrap.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="plugin/handlebars-v3.0.1.js"></script>
<script src="js/tabledevice.js"></script>
</head>
<body>
<div class="container">
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>IP</th>
<th>Group</th>
<th>Edit/Delete</th>
</tr>
</thead>
<tbody></tbody>
<!-- tbody是必须的 -->
</table>
</div>
</body>
</html>
var data = [
{
"name": "rfswitch1",
"ip": "192.168.1.1",
"group": "A"
},
{
"name": "rfswitch2",
"ip": "192.168.1.1",
"group": "B"
},
{
"name": "rfswitch3",
"ip": "192.168.1.2",
"group": "C"
},
{
"name": "rfswitch4",
"ip": "192.168.1.3",
"group": "D"
},
{
"name": "rfswitch5",
"ip": "192.168.1.4",
"group": "A"
},
{
"name": "rfswitch6",
"ip": "192.168.1.5",
"group": "B"
},
{
"name": "rfswitch7",
"ip": "192.168.1.6",
"group": "C"
},
{
"name": "rfswitch8",
"ip": "192.168.1.7",
"group": "D"
},
{
"name": "rfswitch9",
"ip": "192.168.1.8",
"group": "A"
},
{
"name": "rfswitch10",
"ip": "192.168.1.9",
"group": "B"
},
{
"name": "rfswitch11",
"ip": "192.168.1.10",
"group": "C"
},
{
"name": "rfswitch12",
"ip": "192.168.1.11",
"group": "D"
}
];
var table;
var editFlag = false;
window.onload=function(){
debugger;
table = $('#example').DataTable({ //datatable init
data: data,
columns: [
{"data": "name"},
{"data": "ip"},
{"data": "group"},
{"data": null}
],
});
};
来源：https://www.cnblogs.com/johnblog/p/5852658.html