数据表不显示第一列

Question

我有一个 JSON 对象，我尝试使用 jquery 数据表在表中显示，但第一列未显示。我知道数据在 JSON 对象中，但没有显示数据。 谁能看看我的代码有什么问题？ 谢谢！

<script src="jquery-3.2.1.min.js"></script>
<script src="xlsx.full.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/r/bs-3.3.5/jqc-1.11.3,dt-1.10.8/datatables.min.js"></script>  
<meta charset="utf-8">
<a href="index.html">
<img border="0"  src="home.png" width="50" height="50">

</a>
<style>
.pull-right{float:right!important;}
.pull-left{float:left!important;}
</style>

<script>
    /* set up XMLHttpRequest */
    function asyncReq(callback){
    var url = "LICENCIAMENTOS_PROJECTOS.xlsx";
    var oReq = new XMLHttpRequest();
    oReq.open("GET", url, true);
    oReq.responseType = "arraybuffer";

    oReq.onload = function(e) {
        var arraybuffer = oReq.response;

        /* convert data to binary string */
        var data = new Uint8Array(arraybuffer);
        var arr = new Array();
        for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
        var bstr = arr.join("");

        /* Call XLSX */
        var workbook = XLSX.read(bstr, {
           type: "binary"
        });

        /* DO SOMETHING WITH workbook HERE */

        var sheet_name = workbook.SheetNames[2];

        /* Get worksheet */


        var worksheet = workbook.Sheets[sheet_name];
        var oficios = XLSX.utils.sheet_to_json(worksheet,{range:2});

        callback(oficios);
        }
        oReq.send();
    }

    asyncReq(function(result){
    console.log(result);
    //DataTable     
        $('#tabela-oficios').DataTable( {
                "dom": '<"pull-left"f><"pull-right"l>tip',
                "aaData": result,
                "aoColumns": [
                    { "mData": "Conc.",
                        sDefaultContent: ''},
                    { "mData": "Nº PT",
                        sDefaultContent: ''},
                    { "mData": "Procº ",
                        sDefaultContent: ''},
                    { "mData": "Designação",
                    sDefaultContent: ''},
                    { "mData": "Clausulas (S/N)",
                        sDefaultContent: ''},
                    { "mData": "Nº Oficio",
                        sDefaultContent: ''},   
                    { "mData": "SGD",
                        sDefaultContent: ''},   
                    { "mData": "Data Oficio",
                        sDefaultContent: ''},   
                    { "mData": "Data Resposta",
                        sDefaultContent: ''},   
                    { "mData": "Informação para resolução clausulas",
                        sDefaultContent: ''},   
                    { "mData": "Data inf da AO resolução clausulas",
                        sDefaultContent: ''}]                       
            });             


        }); 

</script>

            <h1 align="center">LICENCIAMENTOS</h3> 
            <h3 align="center">Registo de Oficios que Carecem de Resposta</h3> 
            <table id="tabela-oficios" class="display compact" style="text-align:center; margin: 0 auto;" > 
                 <thead>  
                      <tr>  
                           <th>Conc.</th>  
                           <th>Nº PT</th>  
                           <th>Número do Processo</th>
                           <th>Designação</th>
                           <th>Clausulas (S/N)</th> 
                           <th>Nº Oficio</th>  
                           <th>SGD</th>  
                           <th>Data Oficio</th>
                           <th>Data Resposta</th>
                           <th>Informação para resolução clausulas</th>  
                           <th>Data inf da AO resolução clausulas</th>  
                        </tr>  
                 </thead>  
            </table>  

这是一张向您展示正在发生的事情的图片：

Answer 1

请使用 DOM Explorer 检查您的 css，因为 css 可能会覆盖该行为。 在我的情况下，遵循 css 导致了问题。

a {
color:white;
text-decoration: none;
background-color: transparent;
}