bootstrap table的实现

最新推荐文章于 2019-08-08 15:02:01 发布

chen58683632

最新推荐文章于 2019-08-08 15:02:01 发布

阅读量563

点赞数

本文链接：https://blog.csdn.net/chen20111/article/details/77986006

版权

jsp前台代码：

<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${ctx}/staticfile/bootstrap/css/bootstrap-table.min.css">
    <link href="${ctx}/staticfile/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="${ctx}/staticfile/js/jquery-1.9.1.js"></script>
	<script src="${ctx}/staticfile/bootstrap/js/bootstrap.min.js"></script>
	<script src="${ctx}/staticfile/bootstrap/js/tableExport.js"></script>
	<script src="${ctx}/staticfile/bootstrap/js/jquery.base64.js"></script>
	<script src="${ctx}/staticfile/bootstrap/js/bootstrap-table.js"></script>
	<script src="${ctx}/staticfile/bootstrap/js/bootstrap-table-export.js"></script>
</head>
<body>
	<table class="table table-hover" id="cusTable"  
       data-pagination="true"  
       data-show-refresh="true"  
       data-show-toggle="true"  
       data-showColumns="true"
       data-search="true"
       >  
       <thead>  
          <tr>                                                           
              <th  data-field="sellRecordId" data-sortable="true">  <!-- data-field名称对应pojo属性名 -->
                           销售记录id  
              </th>  
              <th data-field="srNumber" >  
                           销售单号  
              </th>  
              <th class="col-xs-2" data-field="action" data-formatter="actionFormatter" data-events="actionEvents">Action</th>     
          </tr>  
       </thead>  
       <tbody>  
       </tbody>  
</table>  

<script type="text/javascript">            
      function initTable() {  
        //先销毁表格  
        $('#cusTable').bootstrapTable('destroy');  
        //初始化表格,动态从服务器加载数据  
        $("#cusTable").bootstrapTable({  
            method: "get",  //使用get请求到服务器获取数据  
            url: "<c:url value='/SellServlet?act=ajaxGetSellRecord'/>", //获取数据的Servlet地址  
            striped: true,  //表格显示条纹  
            pagination: true, //启动分页  
            pageSize: 1,  //每页显示的记录数  
            pageNumber:1, //当前第几页  
            pageList: [5, 10, 15, 20, 25],  //记录数可选列表  
            search: false,  //是否启用查询  
            showColumns: true,  //显示下拉框勾选要显示的列  
            showRefresh: true,  //显示刷新按钮  
            sidePagination: "server", //表示服务端请求  
            //设置为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,  
                  orderNum : $("#orderNum").val()  
              };    
              return param;                   
            },  
            onLoadSuccess: function(){  //加载成功时执行  
             
            },  
            onLoadError: function(){  //加载失败时执行  
              layer.msg("加载数据失败", {time : 1500, icon : 2});  
            }  
          });  
      }  
  
      $(document).ready(function () {          
          //调用函数，初始化表格  
          initTable();  
  
          //当点击查询按钮的时候执行  
          $("#search").bind("click", initTable);  
      });  
</script>  
</body>
</html>

Controller代码

package com.springboot.main.controller;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.springboot.pojo.SimsSellRecord;

@Controller
public class AjaxTableController {
	@RequestMapping("/SellServlet")
	public void sellServlet(HttpServletResponse response,HttpServletRequest request) throws IOException{
		System.err.println("1111111111111111111111111111111111111111111111");
        response.setCharacterEncoding("utf-8");  
        PrintWriter pw = response.getWriter();  
          
        //得到客户端传递的页码和每页记录数，并转换成int类型  
        int pageSize = Integer.parseInt(request.getParameter("pageSize"));  
        int pageNumber = Integer.parseInt(request.getParameter("pageNumber"));  
        String orderNum = request.getParameter("orderNum");  
          
        //分页查找商品销售记录，需判断是否有带查询条件  
        List<SimsSellRecord> sellRecordList = new ArrayList<SimsSellRecord>();  
//      sellRecordList = sellRecordService.querySellRecordByPage(pageNumber, pageSize, orderNum);  

        //将商品销售记录转换成json字符串  
        SimsSellRecord ssr = new SimsSellRecord();
        ssr.setSellRecordId("11111111");
        ssr.setSrNumber("222222");
        sellRecordList.add(ssr);
//      String sellRecordJson = sellRecordService.getSellRecordJson(sellRecordList);
      ObjectMapper om = new ObjectMapper();
      String sellRecordJson = om.writeValueAsString(sellRecordList);
      System.out.println(sellRecordJson);
        //得到总记录数  
        int total = 1; 
          
        //需要返回的数据有总记录数和行数据  
        String json = "{\"total\":" + total + ",\"rows\":" + sellRecordJson + "}";  
        pw.print(json); 
	}
}

chen58683632

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap table的实现

jsp前台代码： <table class="table table-hover" id="cusTable" data-pagination="true" data-show-refresh="true" data-show-toggle="true"
复制链接

扫一扫