Bootstrap风格的分页表格Datatables

最新推荐文章于 2022-06-19 10:07:56 发布

禾口1993

最新推荐文章于 2022-06-19 10:07:56 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： bootstrap 分页插件

本文链接：https://blog.youkuaiyun.com/qq_36835407/article/details/78797341

前端专栏收录该内容

1 篇文章

订阅专栏

首先，引入插件：

自定义的关键词高亮js
<script type="text/javascript" src="${base}/vendor/datatable/js/dataTablesHighLight.js"></script>

自定义通用模板js
<script type="text/javascript" src="${base}/vendor/datatable/js/dataTablesTemplate.js"></script>

页面代码：

<div class="table-responsive">
<div class="panel panel-primary">
<div class="panel-heading">所有管理员</div>
<div class="panel-body">
<table class="table table-striped table-hover table-responsive tableNext" id="admins_table">
<thead>
<tr>
<th width="5%">序号</th>
<th>管理员名称</th>
<th width="22%">邮箱</th>
<th width="20%">创建时间</th>
<th>角色权限</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
<div class="panel-footer">
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var id = "admins_table";
var url = "${base!}/backend/admin/all";
var columns = [
{"data": null},
{"data": "adminName"},
{"data": "email"},
{
"data": "createTime",
"render":function (data) {
return timeStamp2String(data);
}
},
{"data": "role"},
{
"data": "id",
"render": function (data) {
return '<a href="${base}/backend/admin/'+data+'/detail" ' +
'class="btn btn-primary btn-sm">查看 & 修改</a>';
}
}
];
getColumns(id, url, columns,'',0);
});
</script>