本地数据
//首先在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>
<script type="text/javascript">
var data = [
{
"name": "rfswitch1",
"ip": "192.168.1.1",
"group": "A"
},
{
"name": "rfswitch6",
"ip": "192.168.1.5",
"group": "B"
},
{
"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}
],
columnDefs: [ //最后一列添加button
{
targets: 3, //从0开始的第3列
"render": function (data, type, row, meta) {
return data = '<button class="btn btn-info btn-sm" data-id=' + data + '><i class="fa fa-pencil"></i>Edit</button>'
+ '<button class="btn btn-danger btn-sm" data-id=' + data + '><i class="fa fa-trash-o"></i>Delete</button>';
}
}
});
};
</script>
</body>
</html>
ajax 收到服务器数据,再做成表格
html:
<table id="example">
<thead>
<tr class="headings">
<th>id</th>
<th>address</th>
</tr>
</thead>
<script type="text/javascript">
function online(){
var data2="";
var str = "";
var o=$.ajax({
url: "http://127.0.0.1:7000",
async:false, //将ajax回调值转为全局变量
data: {function:3,id:"refresh",data:1},
type: 'post',
success: function(result){
var contact = JSON.parse(result)
data2=contact.data //后台传来data={}里面是个list
},
error:function()
{
alert("error on connection");
clearInterval(interval_online);
}
});
$('#example').DataTable({
"bLengthChange": false, //去掉每页显示多少条数据方法
"paging": false,
searching:false, //去掉搜索框
/*"ordering": false, // 禁止排序*/
clickToSelect: true, //是否启用点击选中行
destroy:true, //Cannot reinitialise DataTable,解决重新加载表格内容问题
data: data2,
columns: [
{ data: 'id' }, //为每一列表格应该填充的内容指明json的标题,否则datatables找不到这一列要加载的内容
{ data: 'address'},
],
})
}
var interval_online = setInterval(online,2000);//2秒刷新一次在线设备
//该监听是持续的
$('#example tbody').on( 'click', 'tr', function () {
var index = $(this).context._DT_RowIndex; //行号
var nTds = $('td', this);
var sday = $(nTds[0]).text(); //得到第1列的值
alert(sday);
/*var updateId = "hello";
window.location.href = "specified_equi.html?index="+updateId;//参数名称为index*/ //带参数跳转
/*window.open('specified_equi.html','_self');*/ //无参数跳转
} );
</script>
附: 接收参数的页面写法:
<script type="text/javascript">
var ind = getUrlQueryString('index');
alert(ind);
function getUrlQueryString(names, urls) {
urls = urls || window.location.href;
urls && urls.indexOf("?") > -1 ? urls = urls
.substring(urls.indexOf("?") + 1) : "";
var reg = new RegExp("(^|&)" + names + "=([^&]*)(&|$)", "i");
var r = urls ? urls.match(reg) : window.location.search.substr(1)
.match(reg);
if (r != null && r[2] != "")
return unescape(r[2]);
return null;
};
</script>