用了css隐藏了部分显示
<style type="text/css">
.pagination-info{
display:none;
}
</style>
显示的样式就成了
暂时没有办法得到想要的方式。
下面写一下简单的bootstrapTable使用:
1.先引入jQuery,然后引入bootstrapTable所用的js、css 等
<link rel="stylesheet" href="/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/bootstrap-table.min.css">
<script src="/assets/js/bootstrap.min.js"></script>
<script src="/assets/js/bootstrap-table.min.js"></script>
<script src="/assets/js/bootstrap-table-zh-CN.min.js"></script>
2.在页面合适位置写table
<div class="am-g">
<div class="am-u-sm-12">
<form class="am-form">
<table id="table"></table>
</form>
</div>
</div>
3.当点击搜索按钮时,触发该事件,建表
$("#sou-suo").on("click", function () {
getList();
});
//加载数据表
function getList(){
$("#table").bootstrapTable('destroy');//先销毁表格
$("#table").bootstrapTable({ // 对应table标签的id
url: baseUrl + serviceUrl + "/knowledge/find", // 获取表格数据的url
cache: false, // 设置为 false 禁用 AJAX 数据缓存, 默认为true
striped: true, //表格显示条纹,默认为false
pagination: true, // 在表格底部显示分页组件,默认false
pageList: [10, 20], // 设置页面可以显示的数据条数
pageSize: 10, // 页面数据条数
pageNumber: 1, // 首页页码
sidePagination: 'client', // 设置为服务器端分页
method: "post",
queryParams: function (params) { // 请求服务器数据时发送的参数,可以在这里添加额外的查询参数,返回false则终止请求
return {
patternId: selectId,
describe: $('#knowledge-describe').val()
}
},
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
columns: [
// {
// checkbox: true, // 显示一个勾选框
// align: 'center' // 居中显示
// },
{
field: 'name', // 返回json数据中的name
title: '标题名字', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle' // 上下居中
}, {
field: 'knowledgePattern.name',
title: '类型',
align: 'center',
valign: 'middle'
}, {
field: 'createTime',
title: '创建时间',
align: 'center',
valign: 'middle'
}, {
field: 'operate',
title: '操作',
align: 'center',
valign: 'middle',
events: operateEvents,
formatter: operateFormatter
}
],
onLoadSuccess: function(){ //加载成功时执行
console.info("加载成功");
},
onLoadError: function(){ //加载失败时执行
console.info("加载数据失败");
}
})
}
})
写的较为笼统,方法里面的其他参数可以参考