显示 html 端 添加 table 的代码
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
<!-- DataTables -->
<link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">
<table id="table_id_example" class="table table-bordered table-striped">
<thead>
<tr>
<th style="width: 40px">编号</th>
<th>用户名</th>
<th>电话</th>
<th style="width: 150px">操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
...
...
...
<!-- jQuery 2.2.3 -->
<script src="../../plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="../../bootstrap/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../../plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js"></script>
<!-- page script -->
<script>
$(function () {
$('#table_id_example').DataTable( {
"processing": true, //开启加载等待提示,提示信息是下面language中的sProcessing配置
"serverSide": true, //打开服务器模式
"searching": false, //是否开启搜索功能
"ordering": false, //是否排序
"ajax": {
"url": "/users/queryall",
"type": "post",
"data": function(d){ //d包含了DataTables发送到服务器的参数,这里还可以根据自己的业务添加参数
//可以自定义一些业务参数
//d.xxx = "xxx";
}
},
"columns": [
{ "data": 'id' },
{ "data": 'username' },
{ "data": 'tel' },
{ "data": null },
],
"columnDefs" : [ {
// 定义操作列,######以下是重点########
"targets" : -1,//操作按钮目标列
"data" : null,
"render" : function(data, type,row) {
var id = '"' + row.id + '"';
var html = "<a href='javascript:void(0);' class='delete btn btn-default btn-xs' ><i class='fa fa-times'></i> 查看</a>"
html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class='fa fa-arrow-up'></i> 编辑</a>"
html += "<a href='javascript:void(0);' onclick='deleteThisRowPapser("+ id + ")' class='down btn btn-default btn-xs'><i class='fa fa-arrow-down'></i> 删除</a>"
return html;
}
}],
// 国际化
language: {
"sProcessing": "处理中...",
"sLengthMenu": "显示 _MENU_ 项结果",
"sZeroRecords": "没有匹配结果",
"sInfo": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"sInfoEmpty": "显示第 0 至 0 项结果,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
}
});
});
</script>
其中
"ajax": {
"url": "/users/queryall",
"type": "post",
"data": function(d){ //d包含了DataTables发送到服务器的参数,这里还可以根据自己的业务添加参数
//可以自定义一些业务参数
//d.xxx = "xxx";
}
},
定义了往后台拿数据的地址
再来一段 nodejs 代码,将读取数据的信息 json 返回,数据要放到 data: 里面 这个是 必须的 draw 要和输入的 draw 一样
router.route("/queryall").post(function(req,res,next){ // 到达此路径则渲染login文件,并传出title值供 login.html使用
if(req.session.userid==null)
{
res.render("login",{title:'eGAME'});
return;
}
userDao.queryall(req,res,(err,rows)=>{
var ret;
if(err==undefined)
{
ret = {
code: 200,
msg:'success',
draw:req.draw,
data:rows
};
jsonWrite(res,ret);
}
else
{
jsonWrite(res,undefined);
}
});
});