Spring Boot + Bootstrap
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>BootStrap Table使用——版本一</title> <!--Jquery组件引用--> <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> <!--bootstrap组件引用--> <script type="text/javascript" src="js/bootstrap.js"></script> <link rel="stylesheet" href="css/bootstrap.css" /> <!--bootstrap table组件以及中文包的引用--> <script type="text/javascript" src="js/bootstrap-table.js"></script> <link rel="stylesheet" href="css/bootstrap-table.css" /> <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script> <!--页面js文件的引用--> <script type="text/javascript" src="js/main.js"></script> <!--bootstrap table editable组件引用--> <link rel="stylesheet" href="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"> </head> <body> <div class="panel-body" style="padding-bottom:0px;"> <div class="panel panel-default"> <div class="panel-heading">查询条件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_departmentname"> </div> <label class="control-label col-sm-1" for="txt_search_statu">状态</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_statu"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button> </div> </div> </form> </div> </div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <!-- 模态框（Modal） --> <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 添加商品 </h4> </div> <div class="modal-body"> <select id="ps"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> <button type="button" class="btn btn-primary" data-dismiss="modal"> 确认 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <table id="tb_departments"></table> </div> </body> <script type="text/javascript"> $(function () { //1.初始化Table var oTable = new TableInit(); oTable.Init(); //2.初始化Button的点击事件 var oButtonInit = new ButtonInit(); oButtonInit.Init(); }); var TableInit = function () { var oTableInit = new Object(); //初始化Table oTableInit.Init = function () { $('#tb_departments').bootstrapTable({ url: '/girl/lS', //请求后台的URL（*） method: 'post', //请求方式（*） contentType: "application/x-www-form-urlencoded", dataType: "json", toolbar: '#toolbar', //工具按钮用哪个容器 striped: false, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 queryParamsType: '', queryParams: oTableInit.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, //是否启用点击选中行 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: true, //是否显示父子表 columns: [{ checkbox: true }, { field: 'id', title: 'ID', align: 'center', valign: 'middle' }, { field: 'age', title: 'AGE', align: 'center', valign: 'middle' }, { field: 'cupSize', title: 'CupSize', align: 'center', valign: 'middle' }, ] }); }; //得到查询的参数 oTableInit.queryParams = function (params) { var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的 // limit: params.limit, //页面大小 // offset: params.offset, //页码 pageNumber: params.pageNumber, pageSize: params.pageSize // departmentname: $("#txt_search_departmentname").val(), // statu: $("#txt_search_statu").val() }; return temp; }; return oTableInit; }; var ButtonInit = function () { var oInit = new Object(); var postdata = {}; oInit.Init = function () { //初始化页面上面的按钮事件 }; return oInit; }; </script> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>BootStrap Table使用--版本二</title> <!--Jquery组件引用--> <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script> <!--bootstrap组件引用--> <script type="text/javascript" src="js/bootstrap.js"></script> <link rel="stylesheet" href="css/bootstrap.css" /> <!--bootstrap table组件以及中文包的引用--> <script type="text/javascript" src="js/bootstrap-table.js"></script> <link rel="stylesheet" href="css/bootstrap-table.css" /> <script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script> <!--页面js文件的引用--> <script type="text/javascript" src="js/main.js"></script> <!--bootstrap table editable组件引用--> <link rel="stylesheet" href="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"> </head> <body> <div class="panel-body" style="padding-bottom:0px;"> <div class="panel panel-default"> <div class="panel-heading">查询条件</div> <div class="panel-body"> <form id="formSearch" class="form-horizontal"> <div class="form-group" style="margin-top:15px"> <label class="control-label col-sm-1" for="txt_search_departmentname">部门名称</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_departmentname"> </div> <label class="control-label col-sm-1" for="txt_search_statu">状态</label> <div class="col-sm-3"> <input type="text" class="form-control" id="txt_search_statu"> </div> <div class="col-sm-4" style="text-align:left;"> <button type="button" style="margin-left:50px" id="btn_query" class="btn btn-primary">查询</button> </div> </div> </form> </div> </div> <div id="toolbar" class="btn-group"> <button id="btn_add" type="button" class="btn btn-default" data-toggle="modal" data-target="#insertModal"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增 </button> <button id="btn_edit" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改 </button> <button id="btn_delete" type="button" class="btn btn-default"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除 </button> </div> <!-- 模态框（Modal） --> <div class="modal fade" id="insertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 添加商品 </h4> </div> <div class="modal-body"> <select id="ps"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> </select> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal"> 关闭 </button> <button type="button" class="btn btn-primary" data-dismiss="modal"> 确认 </button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> <table id="tb_girls"></table> </div> </body> <script type="text/javascript"> $(function () { //1.初始化Table var $table = $("#tb_girls"); var selections = []; function initTable() { $table.bootstrapTable('destroy'); $table.bootstrapTable({ url: '/girl/lS', //请求后台的URL（*） method: 'post', //请求方式（*） contentType: "application/x-www-form-urlencoded", dataType: "json", toolbar: '#toolbar', //工具按钮用哪个容器 striped: false, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） pageNumber: 1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） queryParamsType: '', queryParams: function queryParams(params) { var param = { pageNumber: params.pageNumber, pageSize: params.pageSize } return param; }, search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大 strictSearch: true, showColumns: true, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度 uniqueId: "ID", //每一行的唯一标识，一般为主键列 showToggle:true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 detailView: true, //是否显示父子表 columns: [{ checkbox: true }, { field: 'id', title: 'ID', align: 'center', valign: 'middle' }, { field: 'age', title: 'AGE', align: 'center', valign: 'middle' }, { field: 'cupSize', title: 'CupSize', align: 'center', valign: 'middle' } ], onClickRow: function (row, $element) { curRow = row; }, onLoadSuccess: function (aa, bb, cc) { }, onPageChange: function (number, size) { } }) } initTable(); }) </script> </html> 问题小结：