接下来上代码(主要部分的代码)
注意红色部分
<body class="hold-transition skin-blue sidebar-mini"> <div class="wrapper"> <div class="content-wrapper"> <section class="content-header"> <h1> 用户列表<span id="a"></span> </h1> </section> <section class="content"> <table id="dataGrid"></table> </section> </div> </div> <script type="text/javascript"> $(function () { initDataGrid() }); $table = $("#dataGrid"); function initDataGrid() { //pageNumber必须是纯数字 但js是弱类型语言,没有int这种类型 //所以设置var num=1;这时num的值就是数字1,(不是字符串1) var pageSize = sessionStorage.getItem("pageSize"); var pageNum = sessionStorage.getItem("pageNum"); var num=1; num=pageNum==null?1:parseInt(pageNum); $table.bootstrapTable({ url: '/user/getlist', //请求后台的URL(*) method: 'get', //请求方式(*) //toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) pagination: true, //是否显示分页(*) sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 //queryParams: queryParams,//传递参数(*) queryParamsType : "", queryParams : getParams, sidePagination: "server", //分页方式:client客户端分页,server服务端分页(*) queryParamsType: "limit", pageNumber: num, //初始化加载第一页,默认第一页,pageNumber必须是int类型 pageSize: 10, //每页的记录行数(*) pageList: [10, 30, 50, 100], //可供选择的每页的行数(*) search: true, //是否显示表格搜索 //silent:true, strictSearch: true, showColumns: false, //是否显示所有的列 showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少允许的列数 clickToSelect: true, //是否启用点击选中行 //height: 500, //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 uniqueId: "userid", //每一行的唯一标识,一般为主键列 showToggle: true, //是否显示详细视图和列表视图的切换按钮 cardView: false, //是否显示详细视图 visible: false, detailView: false, //是否显示父子表 columns: [ // { checkbox: true}, {field: 'userid', title: '用户ID'}, { field: 'username',//对应的实体类字段 title: '用户名' }, { field: 'phone',//对应的实体类字段 title: '电话' }, { field: 'usertype',//对应的实体类字段 title: '用户类型', formatter: Utype }, { field: 'userid',//对应的实体类字段 title: '操作', //width: 120, align: 'center', valign: 'middle', formatter: actionFormatter } ], /* queryParams: function (params) { //这里的pageSize、pageNum必须和Controller改成一样的 var temp = { pageSize: params.limit, //页面大小 pageNum: (params.offset / params.limit) + 1, //页码 // sort: params.sort, //排序列名 // sortOrder: params.order //排位命令(desc,asc) }; return temp; },*/ responseHandler: function (res) { return { rows: res.list, total: res.total } }, onLoadSuccess: function () { }, onLoadError: function () { alert("数据加载失败!"); }, onDblClickRow: function (row, $element) { var id = row.ID; EditViewById(id, 'view'); }, }); //alert( $table.bootstrapTable('getOptions').pageNumber) } //添加操作按钮 function actionFormatter(value, row, index) { var id = value; var result = ""; result += "<a href='javascript:;' class='btn btn-xs green' οnclick=\"SeeViewById('" + id + "', view='view')\" title='查看'><span class='glyphicon glyphicon-search'></span>查看</a>"; result += "<a href='javascript:;' class='btn btn-xs blue' οnclick=\"EditViewById('" + id + "')\" title='编辑'><span class='glyphicon glyphicon-pencil'></span>编辑</a>"; result += "<a href='javascript:;' class='btn btn-xs red' οnclick=\"DeleteByIds('" + id + "')\" title='删除'><span class='glyphicon glyphicon-remove'></span>删除</a>"; return result; } //这里和上边注释掉的queryParams: function (params){}作用一样用来向后台传递参数 function getParams(params) { //var param=$("input").val(); //获取sessionStorage中param的value var param = sessionStorage.getItem("param"); if(param!=null){ param=param; //将param添加到搜索框中 $("input").val(param); }else { //因为我的页面中只有一个input所以直接获取input的value param=$("input").val(); } //获取sessionStorage var pageSize = sessionStorage.getItem("pageSize"); var pageNum = sessionStorage.getItem("pageNum"); var temp = { //这里的pageSize、pageNum、search必须和Controller改成一样的 pageSize:pageSize==null?params.limit:pageSize, //页面大小 pageNum: pageNum==null?(params.offset / params.limit) + 1:pageNum, //页码 //在进行模糊查询的参数 search:param // sort: params.sort, //排序列名 // sortOrder: params.order //排位命令(desc,asc) }; //在sessionStorage中清除这三个数据 sessionStorage.removeItem("pageSize"); sessionStorage.removeItem("pageNum"); sessionStorage.removeItem("param"); return temp; } function Utype(value) { return value == 1 ? "会议管理员" : "普通用户"; } //删除数据 function DeleteByIds(index) { //$table.bootstrapTable('destroy');//先要将table销毁,否则会保留上次加载的内容 //ajax 后台删除 $.ajax({ url : "/user/delete/" + index, type : "GET", success : function(result) { if (result!= 9999) { $table.bootstrapTable('refresh');//刷新当前表格数据 } else { alert("删除失败,请稍后重试") } } }); } //查看详细信息 function SeeViewById(index) { var param=$("input").val(); if(param!=null){ param=param; sessionStorage.setItem("param", param); }else { param=""; } //sessionStorage 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。 //类似于key,value //向sessionStorage中添加数据 //sessionStorage介绍http://www.runoob.com/jsref/prop-win-sessionstorage.html //这个的作用是当页面跳转回来的时候列表页不会加载默认第一页,而是加载跳转之前所在的页面 //例如现在从第2页跳转到“查看详细”页面,在返回的时候还是在第二页 sessionStorage.setItem("pageSize", $table.bootstrapTable('getOptions').pageSize); sessionStorage.setItem("pageNum", $table.bootstrapTable('getOptions').pageNumber); window.location.href="/admin/user/see/"+ index; } //逻辑同上 function EditViewById(index) { var param=$("input").val(); if(param!=null){ param=param; sessionStorage.setItem("param", param); }else { param=""; } sessionStorage.setItem("pageSize", $table.bootstrapTable('getOptions').pageSize); sessionStorage.setItem("pageNum", $table.bootstrapTable('getOptions').pageNumber); window.location.href="/admin/user/update/"+ index; } </script> </body> //后台的分页代码
@RequestMapping(value = "user/getlist") @ResponseBody public PageInfo getall(Integer pageNum, Integer pageSize,@RequestParam("search") String search) { pageNum = pageNum == null ? 1 : pageNum; pageSize = pageSize == null ? 10 : pageSize; PageHelper.startPage(pageNum, pageSize); if(search.length()>0){ List<Users> users = us.selectByUid(search,0); PageInfo pageInfo = new PageInfo(users); return pageInfo; }else { List<Users> users = us.getStateAndType(1, 0); PageInfo pageInfo = new PageInfo(users); return pageInfo; } }
主要逻辑是点击“编辑”或“查看”时,将当前页面的页码、搜索框中的value值存到sessionStorage中,在“编辑”或“查看”页面返回时
列表页会加载initDataGrid()方法,此时将sessionStorage中的页数、搜索框中的value值取出,放进url中(完整的url:http://localhost:8080/user/getlist?pageSize=10&pageNum=2&search=2&_=1555077861561)
想了很多方法最后感觉这个比较好
如有问题请多多指正