使用bootstrap-table插件实现table和分页一起使用，效果如下图所示
具体使用，参考：https://www.cnblogs.com/wuhuacong/p/7284420.html 很详细。这里就不说了。
如何实现某一列样式的改变，比如说根据某一列的结果，显示不同的样式。可以使用formatter来设置。具体设置如下：
$('#table').bootstrapTable({
url: '/user/[email protected]&seq=' + Math.random(),
method: 'GET',
striped: true,
cache: false,
pagination: true,
sortable: true,
Pagelist: [10, 20, 30, 50],
columns: [
{ field: 'ROOM_DESC', title: '会议室'},
{ field: 'START_TIME', title: '开始时间' },
{ field: 'END_TIME', title: '结束时间' },
{ field: 'COUNT', title: '参会人数' },
{
field: 'STATE', title: '会议状态',
formatter: function (value, row, index) {
var a = "";
if (row.STATE) {
if(row.STATE=="已召开"){
a = '<span style="color:red">' + value + '</span>';
} else if (row.STATE == "进行中") {
a = '<span style="color:blue">' + value + '</span>';
} else {
a = '<span style="color:green">' + value + '</span>';
}
}
return a;
}
},
{ field: 'THEME', title: '会议主题' },
{ field: 'DEPART', title: '会议部门' },
{ field: 'PHONE', title: '联系电话' },
{ field: 'CREATE_DATE', title: '创建时间' },
{ field: 'MODIFY_DATE', title: '修改时间' }
]
});
结果如下：
参考：https://blog.csdn.net/qq_27778691/article/details/80829463 和 https://blog.csdn.net/qq_31540195/article/details/51837467
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
