javascript - Bootstrap-table如何显示后台传过来的JSON数据?
伊谢尔伦
伊谢尔伦 2017-04-11 12:42:18
[JavaScript讨论组]

纯新手……看了很多博客的代码,对于bootstrap-table还不是很了解,不太明白queryparam怎么设计?后台传了json数据,但是不知道是格式不对,还是其他问题,前台没法显示。

html代码:

![图片描述][1]
teacherID teacherName teacherSex departmentID

js代码:

var url = 'getTeacher';
    $('#teacherTable').bootstrapTable({
        data: $.getJSON(url)
    });

php代码:

public function getTeacher()
{
  $result = getInformation_all('Teacher'); //获取数据库Teacher表所有数据
  $this->ajaxReturn($result);
}

截图:

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(1)
大家讲道理

大致懂了……可能是对JS不太了解吧,没有返回object,下面是成功代码:

$(function () {
//初始化Table
    var teacherTable = new TableInit();
    teacherTable.Init();
});

var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    oTableInit.Init = function () {
        $('#teacherTable').bootstrapTable({
            url: 'getTeacher',//请求后台的url
            method: 'post',//请求方式
            toolbar: '#toolbar',//工具按钮用哪个容器
            striped: true,//是否显示行间隔色
            cache: false,
            sortable: true,//是否启用排序
            sortOrder: 'asc',//排序方式
            clickToSelect: true,//是否启用点击选中行
            uniqueId: 'teacher_id',//每一行的唯一标识,一般为主键列
            columns: [{
                field: 'teacher_id',
                title: '工号'
            }, {
                field: 'teacher_name',
                title: '姓名'
            }, {
                field: 'teacher_sex',
                title: '性别'
            }, {
                field: 'department_id',
                title: '所属学院'
            }]
        });
    };
    return oTableInit; //这句之前一直写错了
};

其他的没什么变化,目前搞定了展示,这个问题应该算是完结了,但是我还是想问下大神们,queryParams怎么编写?那块还是没看懂(我没学过servlet和spring框架,不知道原理之类的),下面是摘自别人博客上的,求解答。

    //得到查询的参数
      oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset: params.offset,  //页码
                sdate: $("#stratTime").val(),
                edate: $("#endTime").val(),
                sellerid: $("#sellerid").val(),
                orderid: $("#orderid").val(),
                CardNumber: $("#CardNumber").val(),
                maxrows: params.limit,
                pageindex:params.pageNumber,
                portid: $("#portid").val(),
                CardNumber: $("#CardNumber").val(),
                tradetype:$('input:radio[name="tradetype"]:checked').val(),
                success:$('input:radio[name="success"]:checked').val(),
            };
            return temp;
        };
BufferedReader bufr =  new BufferedReader(
    new InputStreamReader(request.getInputStream(),"UTF-8"));
    StringBuilder sBuilder = new StringBuilder("");
    String temp = "";
    while((temp = bufr.readLine()) != null){
           sBuilder.append(temp);
      }
    bufr.close();
    String json = sBuilder.toString();
    JSONObject json1 = JSONObject.fromObject(json);
    String sdate= json1.getString("sdate");//通过此方法获取前端数据
public JsonResult GetDepartment(int limit, int offset, string orderId, string SellerId,PortId,CardNumber,Success,maxrows,tradetype)
{
 ...
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号