首页 新闻 搜索 专区 学院

bootstrap table 使用 求大神指教

0
悬赏园豆:30 [待解决问题]

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-table.js"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js"></script>
<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>
<link rel="stylesheet" href="css/bootstrap-table.css" type="text/css"></link></head>
<body>
<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">aa</table>
</body>
</html>
<script>
function initTable(){
$('#test-table').bootstrapTable({
method: 'get',
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(
pagination: true, //是否显示分页(

sortable: false, //是否启用排序
sortOrder: "asc", //排序方式
pageNumber:1, //初始化加载第一页,默认第一页
pageSize: 10, //每页的记录行数(
pageList: [10, 25, 50, 100], //可供选择的每页的行数(

url: "lsw/ss.action",//这个接口需要处理bootstrap table传递的固定参数
queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber

             queryParams : function (params) {
                //这里的键的名字和控制器的变量名必须一致,这边改动,控制器也需要改成一样的
                var temp = {   
                    rows: params.limit,                         //页面大小
                    page: (params.offset / params.limit) + 1,   //页码
                };
                return temp;
            },
            sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*)
            //search: true,      //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
            strictSearch: true,
            //showColumns: true,     //是否显示所有的列
            //showRefresh: true,     //是否显示刷新按钮
            minimumCountColumns: 2,    //最少允许的列数
            clickToSelect: true,    //是否启用点击选中行
            searchOnEnterKey: true,
            columns: [{
                field: 'uname',
                title: 'id',
                align: 'center'
            }],
            pagination:true
        });
    }

</script>

controller:
@RequestMapping("/ss")
public @ResponseBody PageInfo<Map> getAll(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request, HttpServletResponse response) {
System.out.println(1111);
PageHelper.startPage(pageSize,pageNumber);
List<Map> list=lswser.ss(searchText);
PageInfo<Map> info=new PageInfo<Map>(list);

    return info;
}

}

一襟晚照的主页 一襟晚照 | 初学一级 | 园豆:11
提问于:2018-10-26 00:09
< >
分享
所有回答(1)
0

后台拿到pageSize,pageNumber后,sql语句根据这个进行查询,举例如下

String sql = "select * from tableid order by tableid.id desc limit "+ (pageNumber * pageSize - pageSize) + "," + pageSize;

最后返回给前端的json内容要包括total,举例如下

{"total":143574,"rows":[{ID":"1001","NAME":"ycyzharry"}]}
ycyzharry | 园豆:21132 (高人七级) | 2018-10-26 09:09
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册