Vue jquery render datatable error Cannot read property 'style'

such as Uncaught TypeError: Cannot read property "style" of undefined





2

 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 = $("-sharpSOHUCS");
            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);
                }
                timerCountPP;
                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;
    });

above is all the front-end code, and there is no problem with the data returned from the back-end

<%@ 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"></i>  <span class="c-gray en">></span>
        <span class="c-gray en">></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"></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"></i>
                    </a> <a href="javascript:;"
                onclick="member_add("","verificate-add","","600")"
                class="btn btn-primary radius"><i class="Hui-iconfont"></i>
                    </a>
            </span> <span class="r">:<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 -->

    <!---->
    <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,//
              "processing": true,//
              "ajax": {
                  url:"/verificate/getInfo",
                  type: "GET",
                  data:{
                      "page": "1",
                      "rows": "10"
                  },
              },
              "columns": [

                  { "data": "id"},
                  { "data": "identityCard"}
              ],
              "aaSorting": [[ 7, "desc" ]],//
              "bStateSave": false,//
              "aoColumnDefs": [
                  //{"bVisible": false, "aTargets": [ 3 ]} //
                  {"orderable":false,"aTargets":[0,10]}// 
              ],
              language: {
                  url: "/lib/datatables/Chinese.json"
              },
              colReorder: true
          });
      })
    
     
</script>
</body>
</html>

Mar.07,2021

: style= {xx} , xx is an object.

reference: ide/class-and-style.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


cannot write width= "100%" directly. It should be style= "width=" 100% " to


.

console error Uncaught TypeError: Cannot read property 'style' of undefined
n columns are defined in columns when Datatables is initialized, but th of thead is nMul (the number of th is equal to the number of data in columns defined in js).

"columns": [

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

could it be that data doesn't have an attribute in it, such as identityCard doesn't have this or is misspelled.

Menu