bootstrap-table 不能显示数据问题

最新推荐文章于 2024-05-23 11:57:15 发布

v5_BAT

最新推荐文章于 2024-05-23 11:57:15 发布

阅读量4.8k

点赞数

分类专栏：工作学习文章标签： bootstrap-table

本文链接：https://blog.csdn.net/v5_BAT/article/details/84729412

版权

工作学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

bootstrap-table 遇到的问题
后端接口返回的状态码是200 但是没有数据渲染。
前端控制台报错：
No ‘Access-Control-Allow-Origin’ header is present on the requested resource

其实就是ajax 跨域请求.
解决方法：
加一个过滤器。

public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest)servletRequest;

        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", origin);
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        String method = request.getMethod();
        if(method.equalsIgnoreCase("OPTIONS")){
            servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
        }else{
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }

    @Override
    public void destroy() {

    }

}

@Configuration
public class ConfigALl {
    @Bean
    public FilterRegistrationBean filterRegistrationBean(){
        FilterRegistrationBean filterRegistrationBean=new FilterRegistrationBean();
        filterRegistrationBean.setFilter(new CorsFilter());
        filterRegistrationBean.addUrlPatterns("/*");
        return filterRegistrationBean;
    }
}

前端的代码是这样的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
		<script src="js/bootstrap-table.min.js"></script>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script src="js/bootstrap.js"></script>
		<script src="js/bootstrap-table-zh-CN.js"></script>
		<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table-locale-all.js"></script>
		<link href="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.js"></script>
	</head>
	<body>
		  <div class="container" style="margin-top:100px">
            <div class="row">
                <!-- 表格 -->
                <div class="col-xs-12">
                    <table class="table table-striped table-bordered table-hover" ></table>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            class BstpTable{
                constructor(obj) {
                    this.obj=obj;
                }
                inint(){
                     //---先销毁表格 ---
   
                     //---初始化表格,动态从服务器加载数据--- 
                     this.obj.bootstrapTable({
                        //【发出请求的基础信息】
                        url: 'http://127.0.0.1:8088/data',
                        method: 'get',
                        contentType: "application/x-www-form-urlencoded",
						// height:tableHeight(),//高度调整
						// dateType: "jsonp",
						striped: true, //是否显示行间隔色
						dataField: "rows",//bootstrap table 可以前端分页也可以后端分页，这里
						//我们使用的是后端分页，后端分页时需返回含有total：总记录数,这个键值好像是固定的  
						//rows： 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
						pageNumber: 1, //初始化加载第一页，默认第一页
						pagination:true,//是否分页
						queryParamsType:'limit',//查询参数组织方式
						// queryParams:queryParams,//请求服务器时所传的参数
						sidePagination:'server',//指定服务器端分页
						pageSize:10,//单页记录数
						pageList:[5,10,20,30],//分页步进值
						showRefresh:true,//刷新按钮
						showColumns:true,
						clickToSelect: true,//是否启用点击选中行
						toolbarAlign:'right',//工具栏对齐方式
						buttonsAlign:'right',//按钮对齐方式
						toolbar:'#toolbar',//指定工作栏
                        //按需求设置不同的样式：5个取值代表5中颜色['active', 'success', 'info', 'warning', 'danger'];
                       
                        
                        //【设置列】
                        columns: [
                         {field: 'id',title: 'id'}, 
                         {field: 'name',title: 'name'},
                         {field: 'age',title: 'age'},
                         {field: 'tool',title: 'name', align: 'center',
                            formatter:function(value,row,index){
                                var element = 
                                "<a class='edit' data-id='"+row.id +"'>编辑</a> "+ 
                                "<a class='delet' data-id='"+row.id +"'>删除</a> ";
                                return element;  
                            } 
                          }
                        ]
                    })
                 }
            }
            
            var bstpTable=new BstpTable($("table"));
            bstpTable.inint()
        </script>
    </body>
</html>

v5_BAT

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap-table 不能显示数据问题

bootstrap 遇到的问题后端接口返回的状态码是200 但是没有数据渲染。前端控制台报错：No ‘Access-Control-Allow-Origin’ header is present on the requested resource解决方法：加一个过滤器。public class CorsFilter implements Filter { @Override ...
复制链接

扫一扫

专栏目录