鍍金池/ 問(wèn)答/HTML/ vue jquery 渲染datatable報(bào)錯(cuò)Cannot read prop

vue jquery 渲染datatable報(bào)錯(cuò)Cannot read property 'style'

如題 Uncaught TypeError: Cannot read property 'style' of undefined
圖片描述
前端
圖片描述
圖片描述
哪有問(wèn)題呢?
上面一共有2個(gè)報(bào)錯(cuò),我不確定是不是因?yàn)榈谝粋€(gè)報(bào)錯(cuò)引發(fā)的第二個(gè)問(wèn)題,就把第一個(gè)也發(fā)出來(lái)把
圖片描述

 define("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/start.js", function(require, exports, module) {
        var $ = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/lib/jquery-1.7.0.js"), _ = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/lib/underscore-1.8.2.js"), $$util = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/util/util.js"), $$data = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/util/data-center.js");
        require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/lib/jquery-transit.js");
        var fnInitDom = function(feConfig, config) {
            var $SOHUCS = $("#SOHUCS");
            if (!$SOHUCS.length) {
                throw "No SOHUCS div!";
                return;
            }
            if (feConfig.ismobile !== true) {
                $SOHUCS.html('<div id="SOHU_MAIN"></div>');
                require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/lib/changyan-reset-v3.css");
                require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/lib/changyan-reset-v3-upage.css");
            }
        };
        var timerCount = 0;
        (function() {
            var timer = window.setInterval(function() {
                if (window.evtDispatcher && window.evtDispatcher.fireEvent) {
                    evtDispatcher.fireEvent({
                        type: "public.jsonData",
                        json: {
                            topicCount: $$data.get("topic:cmt_sum"),
                            partiCount: $$data.get("topic:participation_sum")
                        }
                    });
                    window.clearInterval(timer);
                }
                timerCount++;
                if (timerCount > 10) window.clearInterval(timer);
            }, 1e3);
        })();
        var fnStart = function(config, feConfig, beConfig, cookie) {
            fnInitDom(feConfig);
            var $$confWhiteList;
            if (feConfig.ismobile) {
                $$confWhiteList = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/config-white-list-wap.js");
            } else {
                $$confWhiteList = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/config-white-list.js");
            }
            var fnInitDataCenter = function() {
                $$data.set("config", config);
                feConfig = _.pick(feConfig, $$confWhiteList.feWhiteList);
                $$data.set("feConfig", feConfig);
                beConfig = _.pick(beConfig, $$confWhiteList.beWhiteList);
                $$data.set("beConfig", beConfig);
                $$data.set("cookie", cookie);
                if (cookie.debug_v3 === "true" && window.console && window.console.log) {
                    console.log($$data.get("/"));
                }
            };
            var fnLoad = function(fn) {
                var page_size = $$data.get("feConfig:latest_page_num") || $$data.get("beConfig:latest_page_num");
                var hot_size = $$data.get("feConfig:hot_page_num") || $$data.get("beConfig:hot_page_num");
                if (feConfig.ismobile) {
                    hot_size = $$data.get("feConfig:mobile_hot_page_num") || $$data.get("beConfig:mobile_hot_page_num");
                }
                var data = {
                    client_id: $$data.get("feConfig:appid"),
                    topic_url: $$data.get("feConfig:url"),
                    topic_title: $$data.get("feConfig:title"),
                    topic_category_id: $$data.get("feConfig:category_id"),
                    page_size: page_size,
                    hot_size: hot_size
                };
                if ($$data.get("feConfig:sid")) {
                    data.topic_source_id = $$data.get("feConfig:sid");
                }
                $.ajax({
                    url: $$data.get("config:api") + "api/3/topic/liteload",
                    dataType: "jsonp",
                    scriptCharset: "utf-8",
                    cache: false,
                    timeout: 3e4,
                    data: data,
                    success: function(data) {
                        data = $$util.UrlSwitchHttps(data);
                        $$data.set("topic", data);
                        fn && fn();
                    }
                });
            };
            fnInitDataCenter();
            require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/api/api.js");
            if (feConfig.ismobile) {
                require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/hack-wap.js");
            } else {
                require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/hack.js");
            }
            fnLoad(function() {
                if (feConfig.ismobile) {
                    $$util.loadJs($$data.get("config:base") + "mdevp/extensions/mobile-icp-tips/018/mobile-icp-tips.js", function() {
                        if (window.changyan.icp !== "break") {
                            require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/extensions.js");
                        }
                        var $$log = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/api/log.js");
                        $$log.log("access");
                    });
                } else {
                    $$util.loadJs($$data.get("config:base") + "mdevp/extensions/icp-tips/017/icp-tips.js", function() {
                        if (window.changyan.icp !== "break") {
                            require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/extensions.js");
                        }
                        var $$log = require("/opt/jenkins/workspace/changyan-fe-frontend-v3/src/api/log.js");
                        $$log.log("access");
                    });
                }
            });
        };
        module.exports = fnStart;
    });

以上是前端所有的代碼,后端返回?cái)?shù)據(jù)是沒(méi)有問(wèn)題的

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <script type="text/javascript" src="lib/respond.min.js"></script>
    <![endif]-->
<link rel="stylesheet" type="text/css"
    href="static/h-ui/css/H-ui.min.css" />
<link rel="stylesheet" type="text/css"
    href="static/h-ui.admin/css/H-ui.admin.css" />
<link rel="stylesheet" type="text/css"
    href="lib/Hui-iconfont/1.0.8/iconfont.css" />
<link rel="stylesheet" type="text/css"
    href="static/h-ui.admin/skin/default/skin.css" id="skin" />
<link rel="stylesheet" type="text/css"
    href="static/h-ui.admin/css/style.css" />
<!--[if IE 6]>
    <script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
    <script>DD_belatedPNG.fix('*');</script>
    <![endif]-->
<title>核銷員管理</title>
</head>
<style>
.table>tbody>tr>td {
    text-align: center;
}
</style>
<body>
    <nav class="breadcrumb">
        <i class="Hui-iconfont">&#xe67f;</i> 首頁(yè) <span class="c-gray en">&gt;</span>核銷員管理
        <span class="c-gray en">&gt;</span> 核銷員列表 <a id="btn-refresh"
            class="btn btn-success radius r"
            style="line-height: 1.6em; margin-top: 3px"
            href="javascript:location.replace(location.href);" title="刷新"><i
            class="Hui-iconfont">&#xe68f;</i></a>
    </nav>
    <div class="page-container">

        <div class="cl pd-5 bg-1 bk-gray mt-20">
            <span class="l"> <a href="javascript:;" onclick="datadel()"
                class="btn btn-danger radius"><i class="Hui-iconfont">&#xe6e2;</i>
                    批量刪除</a> <a href="javascript:;"
                onclick="member_add('添加用戶','verificate-add','','600')"
                class="btn btn-primary radius"><i class="Hui-iconfont">&#xe600;</i>
                    添加用戶</a>
            </span> <span class="r">共有數(shù)據(jù):<strong id="memberListCount">0</strong>
                條
            </span>
        </div>
        <div class="mt-20" style="margin-bottom: 70px">
            <table class="table table-border table-bordered table-hover table-bg table-sort" width="100%">
                <thead>
                    <tr>
                        <th width="40">ID</th>
                        <th width="80">用戶名</th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <!--_footer 作為公共模版分離出去-->
    <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
    <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
    <script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作為公共模版分離出去-->
    <!--/_footer 作為公共模版分離出去-->

    <!--請(qǐng)?jiān)谙路綄?xiě)此頁(yè)面業(yè)務(wù)相關(guān)的腳本-->
    <script type="text/javascript" src="lib/My97DatePicker/4.8/WdatePicker.js"></script>
    <script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
    <script type="text/javascript" src="lib/datatables/dataTables.colReorder.min.js"></script>
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/jquery.validate.js"></script>
    <script type="text/javascript" src="lib/jquery.validation/1.14.0/validate-methods.js"></script>
    <script type="text/javascript" src="lib/common.js"></script>
    <script type="text/javascript">
        

      $(function() {
          $('.table').DataTable({
              serverSide: true,//開(kāi)啟服務(wù)器模式
              "processing": true,//加載顯示提示
              "ajax": {
                  url:"/verificate/getInfo",
                  type: 'GET',
                  data:{
                      "page": "1",
                      "rows": "10"
                  },
              },
              "columns": [

                  { "data": "id"},
                  { "data": "identityCard"}
              ],
              "aaSorting": [[ 7, "desc" ]],//默認(rèn)第幾個(gè)排序
              "bStateSave": false,//狀態(tài)保存
              "aoColumnDefs": [
                  //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隱藏顯示
                  {"orderable":false,"aTargets":[0,10]}// 制定列不參與排序
              ],
              language: {
                  url: '/lib/datatables/Chinese.json'
              },
              colReorder: true
          });
      })
    
     
</script>
</body>
</html>

回答
編輯回答
賤人曾

:style={xx},xx是一個(gè)對(duì)象。

reference:https://cn.vuejs.org/v2/guide...

2018年7月20日 10:19
編輯回答
我不懂

不能直接寫(xiě)width="100%"吧,應(yīng)該是style="width="100%"才對(duì)

2018年1月20日 16:03
編輯回答
心沉

控制臺(tái)報(bào)錯(cuò) Uncaught TypeError: Cannot read property 'style' of undefined
在Datatables初始化時(shí)columns里定義了n列,但是thead的th是n-1(兩者數(shù)量不等,th數(shù)目需和js里定義的columns中的data個(gè)數(shù)相等).

"columns": [

                  { "data": "id"},
                  { "data": "identityCard"}
              ],

會(huì)不會(huì)是這里面data沒(méi)有某個(gè)屬性,比如identityCard沒(méi)有這個(gè)或者拼錯(cuò)了。。

2017年9月8日 16:42