0

使用Bootstrap table的时候无法获取数据,后台已经返回了数据但是表格里面老是显示No matching records found

下面是我主页的代码

<?php
include("../Database/connect.php");
include("nav.php");
?>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/bootstrap-table.css">
    <script src="../js/bootstrap-table.js"></script>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-12" >
                    <h1>Exception</h1>
                    <h1>学生管理系统</h1>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="pannel panel-default">
                    <div class="panel-heading">
                        查询
                    </div>
                    <div class="panel-body form-group" style="margin-bottom: 0px;">
                        <label class="col-sm-1 control-label" style="text-align: right;margin-top: 5px;">姓名:</label>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" name="name" id="search_name" />
                        </div>
                        <div class="col-sm-1">
                            <button class="btn btn-primary" id="search_btn">查询</button>
                        </div>
                    </div>
                </div>
                <table id="mytab" class="table table-hover"></table>
                <div id="toolbar" class="btn-group pull-right" style="margin-right:20px;">
                    <button id="btn_edit" type="button" class="btn btn-default" style="display: none; border-radius: 0">
                        <span class="glyphicon glyphicon-pencil" aria-hidden="true" ></span>修改
                    </button>
                    <button id="btn_delete" type="button" class="btn btn-default" style="display: none;">
                        <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                    </button>
                    <button id="btn_add" type="button" class="btn btn-default">
                        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                    </button>
                </div>
            </div>
        </div>
    </div>

<script>
    $(window).resize(function(){
        $('#mytab').bootstrapTable('resetView'),{
            height:tableHeight()
        }
    })
    $('#mytab').bootstrapTable({
        method: 'get',
        contentType: "application/x-www-form-urlencoded",//必须要有!!!!
        url:"../data/tsconfig.json",//要请求数据的文件路径
        dataType:'json',
        height:tableHeight(),//高度调整
        toolbar: '#toolbar',//指定工具栏
        striped: true, //是否显示行间隔色
        dataField: "res",//bootstrap table 可以前端分页也可以后端分页,这里
        //我们使用的是后端分页,后端分页时需返回含有total:总记录数,这个键值好像是固定的
        //rows: 记录集合 键值可以修改  dataField 自己定义成自己想要的就好
        pageNumber: 1, //初始化加载第一页,默认第一页
        pagination:true,//是否分页
        queryParamsType:'limit',//查询参数组织方式
        queryParams:queryParams,//请求服务器时所传的参数
        sidePagination:'server',//指定服务器端分页
        pageSize:10,//单页记录数
        pageList:5,//分页步进值
        showRefresh:true,//刷新按钮
        showColumns:true,
        clickToSelect: true,//是否启用点击选中行
        toolbarAlign:'right',
        buttonsAlign:'right',//按钮对齐方式
        toolbar:'#toolbar',//指定工作栏
        columns:[
        {
            title:'全选',
            field:'select',
            //复选框
            checkbox:true,
            width:25,
            align:'center',
            valign:'middle'
        },
        {
            title:'ID',
            field:'address',
            visible:false
        },
        {
            title:'登录名',
            field:'gender',
            sortable:true
        },
        {
            title:'性别',
            field:'id',
            sortable:true
        },
        {
            title:'手机号',
            field:'name',
        },
    ],
        locale:'zh-CN',//中文支持,
        responseHandler:function(res){
        //在ajax获取到数据,渲染表格之前,修改数据源
        return res;
    }
    })
    //三个参数,value代表该列的值
    function operateFormatter(value,row,index){
        if(value==2){
            return '<i class="fa fa-lock" style="color:red"></i>'
        }else if(value==1){
            return '<i class="fa fa-unlock" style="color:green"></i>'
        }else{
            return '数据错误'
        }
    }

    //请求服务数据时所传参数
    function queryParams(params){
        return{
            //每页多少条数据
            // pageSize: params.limit,
            //请求第几页
            // pageIndex:params.pageNumber,
            // Name:$('#search_name').val(),
            // Tel:$('#search_tel').val()
        }
    }
    //查询按钮事件
    $('#search_btn').click(function(){
        $('#mytab').bootstrapTable('refresh', {url: '../index.php/admin/index/userManagement'});
    })
    //tableHeight函数
    function tableHeight(){
        //可以根据自己页面情况进行调整
        return $(window).height() -280;
    }
</script>

</body>
</html>

下面是我json文件的代码

{
  "total": 10,
  "rows": [
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    },
    {
      "id": 0,
      "name": "Item 0",
      "gender": "$0",
      "address":"广东省"
    }
  ]
}

就这样很苦恼,Chrome已经返回了数据了,但是table里面就一直报错

2018-04-29 提问
2 个回答
0

已采纳
dataField:res

你确定不处理一下返回值?

2

出错信息可以给一下吗

撰写答案

你可能感兴趣的

推广链接