bootstrap table使用：前端分頁，獲取值棧中的json值，載入到table中，獲取選中的行資訊
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/common/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用者列表</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${ctx}/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
<link href="${ctx}/css/animate.css" rel="stylesheet">
<link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="white-bg">
<div class="col-sm-12">
<div class="example-wrap">
<div class="search-form">
<form role="form" class="form-inline">
<div class="form-group">
<label for="departmentName" class="sr-only">部門名稱</label>
<input type="text" placeholder="請輸入部門名稱" id="departmentName" name="departmentName" class="form-control">
</div>
<button class="btn btn-white" type="submit">查詢</button>
</form>
</div>
<div class="userlistmodule">
<div id="toolbar" class="bg-gray">
<button id="ok" type="button" class="btn btn-primary btn-sm rightSize" onclick="window.location.href='${ctx}/sys/user!newUserJump.action?deptId=${userDeptId}'"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增</button>
<button id="ok1" type="button" class="btn btn-default btn-sm rightSize" onclick="getRowsId()"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>刪除</button>
</div>
<table id="userlist"></table>
</div>
</div>
</div>
<!-- 全域性js -->
<script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
<!-- Bootstrap table -->
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx}/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script>
$(function () {
var datas =eval(${userListJson});
$('#userlist').bootstrapTable({
method: 'get',
cache: false,
height: 530,
striped: true,
pagination: true,
pageSize: 20,
pageNumber:1,
pageList: [10, 20, 50, 100, 200, 500], sidePagination:'client',
toolbar:'#toolbar',
search: true,
showColumns: true,
showRefresh: false,
showExport: false,
exportTypes: ['csv','txt','xml'],
clickToSelect: true,
columns: [
{field:'state', checkbox: true},
{field:'userId', title:'使用者編號'},
{field:'userName', title:'姓名',formatter:deptNameFormatter},
{field:'deptName', title:'部門'},
{field:'positionName', title:'職位'},
{field:'loginCode', title:'登入賬號'},
{field:'password', title:'密碼'},
{field:'userSort', title:'排序號'},
],
data:datas,
});
});
function deptNameFormatter(value, row, index) {
return '<a href="${ctx}/sys/department!updateDeptJump.action?deptId='+row.userId+'" rel="external nofollow" >'+ value + '</a>';
}
//使用getSelections即可獲得，row是json格式的資料
function getRowsId()
{
var row=$.map($("#userlist").bootstrapTable('getSelections'),function(row){
return row;
});
var ids="";
if(row.length<=0){
alert("請選擇要刪除的記錄！");
}
else{
for(var i=0;i<row.length;i++){
if(i==0 || i=="0"){
ids+=row[i].userId;
}else{
ids+=","+row[i].userId;
}
}
window.location.href='${ctx}/sys/department!deleteDept.action?delIds='+ids;
}
}
</script>
</body>
</html>