nickzhou99 2016-05-12 15:27 采纳率: 77.8%
浏览 4010
已采纳

jquery dataTable解析后台传回的json报错

JSP:

 <table class="table table-striped table-hover table-bordered" id="sample_editable_1">

                                    <thead>

                                        <tr>

                                            <th>实验室名称</th>

                                            <th>所属学院</th>

                                            <th>分类</th>

                                            <th>创建日期</th>

                                            <th>创建人</th>

                                            <th>编辑</th>

                                            <th>删除</th>

                                        </tr>

                                    </thead>

                                    <tbody>

                                    </tbody>

前台js:

 var oTable = $('#sample_editable_1').dataTable({
                "aLengthMenu": [
                    [5, 15, 20, -1],
                    [5, 15, 20, "All"] // change per page values here
                ],
                // set the initial value
                "iDisplayLength": 15,
                "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
                "sPaginationType": "bootstrap",
                "oLanguage": {
                    "sLengthMenu": "_MENU_ 每页显示条数",
                    "oPaginate": {
                        "sPrevious": "上一页",
                        "sNext": "下一页"
                    }
                },
                "aoColumns" : [{
                    "rows" : "labName"
                },{
                    "rows" : "academy"
                },  {
                    "rows" : "category"
                } , {
                    "rows" : "createTime"
                } , {
                    "rows" : "createrName"
                } , {
                    "rows" : ""
                },  {
                    "rows" : ""
                }],

                "bProcessing":false,
                "bServerSide":true,
                "sAjaxSource":"/getAllLabInfo",

                "fnServerData":function ( sSource,aoData, fnCallback) {
                    $.ajax({
                        url : sSource,//这个就是请求地址对应sAjaxSource
                        data : {"aoData":JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
                        type : 'post',
                        dataType : 'json',
                        async : false,
                        success : function(result) {
                            alert(result.rows[0].labName);
                            fnCallback(result.rows);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                        },
                        error : function(msg) {
                        }
                    });
                    alert(aoData);
                }

            });

后台json:
{"total":3,"rows":[{"createTime":"2016-05-12 17:01:30.000000","labName":"物理实验室","id":1,"category":"物理类","academy":"理学院","createrName":"sysadmin"},{"createTime":"2016-05-12 17:01:37.000000","labName":"化学实验室","id":2,"category":"化学类","academy":"理学院","createrName":"sysadmin"},{"createTime":"2016-05-12 17:01:40.000000","labName":"金工实习","id":3,"category":"车床打磨","academy":"主校区","createrName":"sysadmin"}]}

报错:
图片说明
图片说明

求大神解惑,整了一下午了,再不能只能改用easyui了

  • 写回答

4条回答

  • nickzhou99 2016-05-12 17:15
    关注

    找了好久的资料,试了几小时,总结下自己的错误,希望后面遇到同样问题的新人可以快些解决。

    json需要包含的数据:
    {"sEcho":1,"iTotalRecords":4,"iTotalDisplayRecords":4,"aaData":[{"Name":"name1","Campus":"campus1","Advisor":"advisor1","StepsCompleted":1,"Paid":true,"Started":"2013-06-15T20:24:07.3187581-04:00","Completed":"2013-06-15T20:24:07.3187581-04:00","Options":""}

    js代码:

    ``` var oTable = $('#sample_editable_1').dataTable({
    "aLengthMenu": [
    [5, 15, 20, -1],
    [5, 15, 20, "All"] // change per page values here
    ],
    // set the initial value
    "iDisplayLength": 15,
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
    "sLengthMenu": "_MENU_ 每页显示条数",
    "oPaginate": {
    "sPrevious": "上一页",
    "sNext": "下一页"
    }
    },
    "aoColumns" : [{
    'mDataProp' : "labName"
    },{
    "mDataProp" : "academy"
    }, {
    "mDataProp" : "category"
    } , {
    "mDataProp" : "createTime"
    } , {
    "mDataProp" : "createrName"
    } , {
    "mDataProp" : "id"
    }, {
    "mDataProp" : "id"
    }],
    "aoColumnDefs": [{
    'bSortable': false,
    'aTargets': [0]
    }
    ],
    "bProcessing":false,
    "bServerSide":true,
    'sAjaxDataProp': 'aaData',
    "sAjaxSource":"/getAllLabInfo",
    /*"ajax":"/testData/testLabData.txt",*/

    /* "columns":[
    {"data":"id"},
    {"data":"labName"},
    {"data":"academy"},
    {"data":"category"},
    {"data":"createTime"},
    {"data":"createrName"},
    {"data":"createrName"}

                           ],*/
               /* "columnDefs":[{
                              "aTargets":[6],
                              "render": function(data, type, full) {
                                  return "<a class=\"edit\" href=\"javascript:;\">编辑</a>";
                              }             }
                              ],*/
                "fnServerData":function ( sSource,aoData, fnCallback) {
                    $.ajax({
                        url : sSource,//这个就是请求地址对应sAjaxSource
                        data : {"aoData":JSON.stringify(aoData)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
                        type : 'post',
                        dataType : 'json',
                        async : false,
                        success : fnCallback,/*function(result) {
                            alert(result.data[2].labName);
                            fnCallback(result.data);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                        },*/
                        error : function(msg) {
                        }
                    });
                }
    
            });
    
    尤其注意,'sAjaxDataProp': 'aaData',这个属性用来修改服务端数据数据项的引用名,默认为“aaData”
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 本题的答案是不是有问题
  • ¥15 关于#r语言#的问题:(svydesign)为什么在一个大的数据集中抽取了一个小数据集
  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 蓝桥杯单片机第十三届第一场,整点继电器吸合,5s后断开出现了问题
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形