Question

bootstrap table 怎么实现前端排序

Answer 1

以下是JS代码$('#tb_departments').bootstrapTable({
url: MNG_DOMAIN + "/admin/v1/role/page/query.do", //请求后台的URL（*）
classes: "table table-hover",
dataType: "json",
method: 'post', //请求方式（*）
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true, //是否显示分页（*）
sortable: true, //是否启用排序
sortOrder: "desc", //排序方式
queryParams: queryParams,//传递参数（*）
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "roleNo", //每一行的唯一标识，一般为主键列
showToggle:true, //是否显示详细视图和列表视图的切换按钮
cardView: false, //是否显示详细视图
detailView: false, //是否显示父子表
responseHandler: handel,
idField: "roleNo",
columns: [{
checkbox: true
}, {
field: 'roleNo',
title: '角色编号',
sorttable: true
}, {
field: "roleNm",
title: "角色名称",
sorttable: true
}],
silent: true, //刷新事件必须设置
formatLoadingMessage: function () {
return "请稍等，正在加载中...";
},
formatNoMatches: function () { //没有匹配的结果
return '无符合条件的记录';
},
onLoadError: function (data) {
$('#reportTable').bootstrapTable('removeAll');
}
});

Answer 2

bootstrap和很多前端框架一样，你需要熟记很多标签，可以没事的时候多多自己按着bootstrap的api练习，下面是一些常用的标签

url: MNG_DOMAIN + "/admin/v1/role/page/query.do",   //请求后台的URL（*）
dataType: "json",
method: 'post',      //请求方式（*）
toolbar: '#toolbar',    //工具按钮用哪个容器
striped: true,      //是否显示行间隔色
cache: false,      //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
pagination: true,     //是否显示分页（*）
sortable: true,      //是否启用排序
sortOrder: "desc",     //排序方式
queryParams: queryParams,//传递参数（*）
sidePagination: "server",   //分页方式：client客户端分页，server服务端分页（*）
pageNumber:1,      //初始化加载第一页，默认第一页
pageSize: 10,      //每页的记录行数（*）
pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
search: true,      //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true,
showColumns: true,     //是否显示所有的列
showRefresh: true,     //是否显示刷新按钮
minimumCountColumns: 2,    //最少允许的列数
clickToSelect: true,    //是否启用点击选中行
uniqueId: "roleNo",      //每一行的唯一标识，一般为主键列
showToggle:true,     //是否显示详细视图和列表视图的切换按钮
cardView: false,     //是否显示详细视图
detailView: false,     //是否显示父子表

Answer 3

// 排序
function XXXsorter(a, b) {
	return a - b;
}