版权声明:转载请联系博主,一般是同意的 https://blog.csdn.net/weixin_43647224/article/details/84303775
效果图
后台实现代码
$(function () {
var t = $("#table_server").bootstrapTable({
url: Main.getContextPath() +'/sys/log/findall?access_token='+localStorage.getItem("token"),
method: 'get',
dataType: "json",
striped: true,//设置为 true 会有隔行变色效果
undefinedText: "空",//当数据为 undefined 时显示的字符
pagination: true, //分页
search: true, //显示搜索框
cache: false,
pageNumber: 1,//如果设置了分页,首页页码
pageSize: 10,//如果设置了分页,页面数据条数
pageList:[5,10,20,30], //如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
paginationPreText: '‹',//指定分页条中上一页按钮的图标或文字,这里是<
paginationNextText: '›',//指定分页条中下一页按钮的图标或文字,这里是>
data_local: "zh-US",//表格汉化
showExport: true,//是否显示导出
sidePagination: "server", //服务端处理分页
queryParams: function (params) {//自定义参数,这里的参数是传给后台的,我这是是分页用的
var of=(params.offset/params.limit)+1;
return {//这里的params是table提供的
page: of,//从数据库第几条记录开始
size: params.limit//找多少条
};
},
idField: "id",//指定主键列
columns: [
{
title: 'id',//表的列名
field: 'id',//json数据中rows数组中的属性名
align: 'center'//水平居中
},
{
title: '操作人ID',
field: 'userid',
align: 'center',
sortable:true
},
{
title: '操作描述',
field: 'description',
align: 'center'
},
{
title: '请求方法',
field: 'actionmethod',
align: 'center'
},
{
title: '请求参数',
field: 'params',//可以直接取到属性里面的属性,赞
align: 'center'
},
{
title: '操作时间',
field: 'actiondate',
align: 'center',
sortable:true
},
{
title: '操作IP',
field: 'requestip',
align: 'center',
sortable:true
},
{
title:'创建时间',
field:'firsttime',
align:'center',
sortable:true
}
]
});