分页插件的使用
首先导入需要的js，css文件
<!-- bootstrap table æ--> <link rel="stylesheet" href="<%=path%>/assets/plugins/bootstrap-3.3.5/css/bootstrap.min.css"> <link rel="stylesheet" href="<%=path%>/assets/plugins/bootstrap-3.3.5/css/bootstrap-table.css"> <script src="<%=path%>/assets/js/jquery-1.12.3.min.js"></script> <!-- layer 插件 --> <script type="text/javascript" src="<%=path%>/assets/plugins/layer/layer.js"></script> <!-- bootstrapTable 插件 --> <script src="<%=path%>/assets/plugins/bootstrap-3.3.5/js/bootstrap.min.js"></script> <script src="<%=path%>/assets/plugins/bootstrap-3.3.5/js/bootstrap-table.js"></script> <script src="<%=path%>/assets/plugins/bootstrap-3.3.5/js/bootstrap-table-zh-CN.js"></script>
jsp部分
<table class="table table-hover" id="cusTable" data-pagination="true" data-show-refresh="true" data-show-toggle="true" data-showColumns="true"> <thead> </thead> <tbody> </tbody> </table> <button type="button" class="btn btn-sm yellow" id="search">查询(F)</button> <button id="button" class="btn btn-default">获取表格数据</button>js部分
function initTable() { //先销毁表格 $('#cusTable').bootstrapTable('destroy'); //初始化表格,动态从服务器加载数据 $("#cusTable").bootstrapTable({ method : "post", //使用get请求到服务器获取数据 contentType : 'application/x-www-form-urlencoded',//解决乱码问题 url : "/xmgjjadmin/demoController/user/demo/userEditor", //获取数据的Servlet地址 striped : true, //表格显示条纹 pagination : true, //启动分页 pageSize : 5, //每页显示的记录数 pageNumber : 1, //当前第几页 pageList : [ 5, 10, 15, 20, 25 ], //记录数可选列表 search : true, //是否启用查询 clickToSelect: true, //是否启用点击选中行 showColumns : true, //显示下拉框勾选要显示的列 showRefresh : true, //显示刷新按钮 sidePagination : "server", //表示服务端请求 responseHandler : function(res) {//后台传过来的数据，默认是"rows","total"的json格式，可以在这修改 console.log(res); if (res.total != 0) { var row = res.rows; return { "rows" : row, "total" : res.total }; } else { return { "rows" : [], "total" : 0 }; } }, //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder //设置为limit可以获取limit, offset, search, sort, order queryParamsType : "undefined", queryParams : function queryParams(params) { //设置查询参数 var param = { pageNumber : params.pageNumber, pageSize : params.pageSize, userName : $("#editor_name").val() }; return param; }, columns : [ { checkbox:"true" , }, { title : '主键', field : 'id', sortable:"true", align : 'center', valign : 'middle' }, { title : '账号', field : 'acct', align : 'center', valign : 'middle', }, { title : '密码', field : 'pwd', align : 'center' }, { title : '名称', field : 'name', align : 'center' }, { title : '状态', field : 'status', align : 'center', }, { title : '操作', align : 'center', formatter : function(value, row, index) { var e = '<a href="#" οnclick="edit(\'' + row.id + '\')">编辑</a> '; var d = '<a href="#" οnclick="del(\'' + row.id + '\')">删除</a> '; return e + d; } } ], onLoadSuccess : function() { //加载成功时执行 console.info("加载成功"); }, onLoadError : function() { //加载失败时执行 console.info("失败"); } }); } $(function(){ // bootstrap table 插件的相关操作 //调用函数，初始化表格 initTable(); // 当点击查询按钮的时候执行 $("#search").bind("click", initTable); //获取选中的数据 var $table = $('#cusTable'); $('#button').click(function () { //获取点击的行的数据 console.info(getSelectedRow()); alert(" Selected name"+getSelectedRow().name); //获取checkbox 选中的数据信息 var selectContent =$table.bootstrapTable('getSelections'); console.info(selectContent); alert(selectContent[0].name); }); //获取选中行的数据信息 function getSelectedRow() { var index = $table.find('tr.success').data('index'); return $table.bootstrapTable('getData')[index]; } })