鍍金池/ 問答/HTML5  HTML/ Bootstrap table無法渲染數(shù)據(jù)

Bootstrap table無法渲染數(shù)據(jù)

使用Bootstrap table的時候無法獲取數(shù)據(jù),后臺已經(jīng)返回了數(shù)據(jù)但是表格里面老是顯示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>學(xué)生管理系統(tǒng)</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",//要請求數(shù)據(jù)的文件路徑
        dataType:'json',
        height:tableHeight(),//高度調(diào)整
        toolbar: '#toolbar',//指定工具欄
        striped: true, //是否顯示行間隔色
        dataField: "res",//bootstrap table 可以前端分頁也可以后端分頁,這里
        //我們使用的是后端分頁,后端分頁時需返回含有total:總記錄數(shù),這個鍵值好像是固定的
        //rows: 記錄集合 鍵值可以修改  dataField 自己定義成自己想要的就好
        pageNumber: 1, //初始化加載第一頁,默認第一頁
        pagination:true,//是否分頁
        queryParamsType:'limit',//查詢參數(shù)組織方式
        queryParams:queryParams,//請求服務(wù)器時所傳的參數(shù)
        sidePagination:'server',//指定服務(wù)器端分頁
        pageSize:10,//單頁記錄數(shù)
        pageList:5,//分頁步進值
        showRefresh:true,//刷新按鈕
        showColumns:true,
        clickToSelect: true,//是否啟用點擊選中行
        toolbarAlign:'right',
        buttonsAlign:'right',//按鈕對齊方式
        toolbar:'#toolbar',//指定工作欄
        columns:[
        {
            title:'全選',
            field:'select',
            //復(fù)選框
            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獲取到數(shù)據(jù),渲染表格之前,修改數(shù)據(jù)源
        return res;
    }
    })
    //三個參數(shù),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 '數(shù)據(jù)錯誤'
        }
    }

    //請求服務(wù)數(shù)據(jù)時所傳參數(shù)
    function queryParams(params){
        return{
            //每頁多少條數(shù)據(jù)
            // 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函數(shù)
    function tableHeight(){
        //可以根據(jù)自己頁面情況進行調(diào)整
        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已經(jīng)返回了數(shù)據(jù)了,但是table里面就一直報錯

回答
編輯回答
熊出沒

出錯信息可以給一下嗎

2018年1月3日 12:43
編輯回答
離人歸
dataField:res

你確定不處理一下返回值?

2018年5月5日 06:15