Bootstrap table cannot render data - Codes Helper

data cannot be obtained when using Bootstrap table. Data has been returned in the background, but No matching records found is always displayed in the table

the following is the code of my home page

<?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(){
        $("-sharpmytab").bootstrapTable("resetView"),{
            height:tableHeight()
        }
    })
    $("-sharpmytab").bootstrapTable({
        method: "get",
        contentType: "application/x-www-form-urlencoded",//
        url:"../data/tsconfig.json",//
        dataType:"json",
        height:tableHeight(),//
        toolbar: "-sharptoolbar",//
        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:"-sharptoolbar",//
        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:$("-sharpsearch_name").val(),
            // Tel:$("-sharpsearch_tel").val()
        }
    }
    //
    $("-sharpsearch_btn").click(function(){
        $("-sharpmytab").bootstrapTable("refresh", {url: "../index.php/admin/index/userManagement"});
    })
    //tableHeight
    function tableHeight(){
        //
        return $(window).height() -280;
    }
</script>

</body>
</html>

here is the code for my json file

{
  "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":""
    }
  ]
}

this is very distressing. Chrome has already returned the data, but the table has been reporting errors