基于bootstrapTalbe查询，删除/批量删除 ，排序，搜索

1.导入css，js

<link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">

<link href="../css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.6"></script>
<!-- Bootstrap table -->
<script src="../js/plugins/bootstrap-table/bootstrap-table.min.js"></script>

<script src="../js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

2.html中直接写入

<div class="btn-group hidden-xs" id="toolbar" role="group">
<button type="button" class="btn btn-outline btn-default">
<i class="glyphicon glyphicon-plus" aria-hidden="true"></i>
</button>


<button type="button" class="btn btn-outline btn-default" onclick="deleteMore()">
<i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
</button>
</div>

<table id="table"></table>

3.js

<script type="text/javascript">
//根据窗口调整表格高度
$(window).resize(function() {
$('#table').bootstrapTable('resetView', {
height : tableHeight()
})
})
//生成用户数据
$('#table')
.bootstrapTable(
{
method : 'post',
contentType : 'application/x-www-form-urlencoded',//必须要有
url : '/goods/selectAll',// 获取表格数据的url
height : tableHeight(),//高度调整
striped : true, //是否显示行间隔色
clickToSelect : false,//是否启用点击选中行
sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
uniqueId : "id",//每一行指定唯一标识符
locale : 'zh-CN',//中文支持,
showRefresh : true,//是否启用刷新按钮
search:true,//是否启用搜索框
showColumns:true,//是否显示内容列下拉框。
toolbar : "#toolbar",
dataField : 'list',//bootstrap table 可以前端分页也可以后端分页，这里
//我们使用的是后端分页，后端分页时需返回含有total：总记录数 
//list： 记录集合 键值可以修改
queryParams : queryParams,//请求服务器时所传的参数
pagination : true, //是否显示分页（*）
pageNumber : 1, //初始化加载第一页，默认第一页
pageSize : 10, //每页的记录行数（*）
queryParamsType : "limit",
pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
queryParamsType : 'limit',//查询参数组织方式
sortOrder : 'asc',
columns : [
{
checkbox : true
},
{
title : 'id',
field : 'id',
visible : false,//显示或隐藏该列， 默认显示， False为隐藏
},
{
title : '商品名',
field : 'name',
align : 'center',
valign : 'middle',
},
{
title : '编号',
field : 'no',
align : 'center',
valign : 'middle',
},
{
title : '价格',
field : 'price',
align : 'center',
valign : 'middle',
sortable : true,//是否启用排序
},
{
title : '数量',
field : 'num',
align : 'center',
valign : 'middle',
sortable : true,//是否启用排序
},
{
title : '日期',
field : 'inputtime',
align : 'center',
valign : 'middle',
sortable : true,
},
{
title : '简介',
field : 'content',
align : 'center',
valign : 'middle',
},
{
title : "操作",
align : 'center',
valign : 'middle',
width : 160, // 定义列的宽度，单位为像素px
formatter : function(value, row, index) {
return '<button class="btn btn-info btn-sm" >编辑</button>&nbsp;&nbsp;'
+ '<button class="btn btn-danger btn-sm" onclick="deleteItem('
+ row.id
+ ')">删除</button>';
}
} ],

responseHandler : function(res) {
//在ajax获取到数据，渲染表格之前，修改数据源
return res;
}
})
//请求服务数据时所传参数
function queryParams(params) {
console.log(params)
return {
size : params.limit,
page : params.offset / params.limit + 1,
   text:params.sort,//排序字段
   paixu:params.order,// 排序方式
   name:params.search
   
     
}
}
//删除行
function deleteItem(id) {
swal({
title : "您确定要删除这条信息吗",
text : "删除后将无法恢复，请谨慎操作！",
type : "warning",
showCancelButton : true,
confirmButtonColor : "#DD6B55",
confirmButtonText : "删除",
closeOnConfirm : false
}, function() {
$('#table').bootstrapTable('removeByUniqueId', id);
$.post({
url : "/goods/deleteById",
data : {
id : id,
}
})
swal("删除成功！", "您已经永久删除了这条信息。", "success");
});
}
//批量删除
function deleteMore() {
swal({
title : "您确定要删除这些信息吗",
text : "删除后将无法恢复，请谨慎操作！",
type : "warning",
showCancelButton : true,
confirmButtonColor : "#DD6B55",
confirmButtonText : "删除",
closeOnConfirm : false
}, function() {
var arr = $('#table').bootstrapTable('getSelections');
for (var i = 0; i < arr.length; i++) {
$('#table')
.bootstrapTable('removeByUniqueId', arr[i].id);
$.post({
url : "/goods/deleteById",
data : {
id : arr[i].id,
}
})
}


swal("删除成功！", "您已经永久删除了这条信息。", "success");
});


}
//tableHeight函数
function tableHeight() {
//可以根据自己页面情况进行调整
return $(window).height() - 150;
}

</script>

4.Controller

@Controller
@RequestMapping("goods")
public class GoodsController {
@Autowired
private GoodsService service;

@RequestMapping("/")
    public String index(){
        return "goodsList";
    }

/*
* 根据条件查 参数：page size name text paixu
*/
@RequestMapping(value = { "selectAll" }, produces = "application/json;charset=UTF-8")
@ResponseBody
public Map selectAll(Pages pages,String name,String text,@RequestParam(defaultValue = "desc") String  paixu) {
Map<String, Object> map = new HashMap(5);
map.put("pages", pages);
map.put("name", name);
map.put("text", text);
map.put("paixu", paixu);
List<Goods> list=this.service.selectAll(map);
   Map<String, Object> resultMap = new HashMap<>();  
   resultMap.put("list",list);  
   resultMap.put("total",this.service.getCount(map));  
   return resultMap;
}



/*
* 删除
*/
@ResponseBody
@RequestMapping(value = { "deleteById" }, produces = "application/json;charset=UTF-8")
public void deleteProfessorByProid(int id){
this.service.deleteById(id);
}

5.mybaits

 <!-- 根据条件查询 -->
<select id="selectAll" resultMap="BaseResultMap">
select * from goods
<include refid="where-sql" />
order by
<if test="text=='name' or text==null ">
name ${paixu}
</if>
<if test="text=='price' ">
price ${paixu}
</if>
<if test="text=='num' ">
num ${paixu}
</if>
<if test="text=='inputtime' ">
inputtime ${paixu}
</if>
limit #{pages.begin},#{pages.size}
</select>
<sql id="where-sql">
<where>
<if test="name !=null and !&quot;&quot;.equals(name.trim())">
and name like '%' #{name} '%'
</if>

<if test="content !=null and !&quot;&quot;.equals(content.trim())">
and content like '%' #{content} '%'
</if>

</where>
</sql>
<!-- 查询结果数量 -->
<select id="getCount" resultType="Integer">
select count(*) from goods 
<include refid="where-sql" />
</select>

<!-- 删除 -->
<delete id="deleteById" parameterType="java.lang.Integer">
delete from goods
where id = #{id,jdbcType=INTEGER}

</delete>

6.源代码

https://download.csdn.net/download/t617ing/10439034