从json文件渲染数据表行

我想呈现DataTable行从一个json文件，放在同一目录。但不幸的是，DataTable-Body保持为空，并且控制台中不显示任何错误。从json文件渲染数据表行

这里是（还原的）的HTML代码：

<table id="opTable"> 
    <thead> 
     <tr><th class="partner_id">ID</th><th>ShortName</th><th>DisplayName</th><th>LogoUrl</th><th>Incent</th><th>JTS-URL</th></tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

这里是我使用加载从JSON文件的数据的JavaScript：

 <script> 
    $(document).ready(function() { 
     $('#onlinePartnerTable').DataTable({ 
      "ajax" : "../test2.json", 
      "columns": [{ 
       "data": "pId" 
      }, { 
       "data": "shrName" 
      }, { 
       "data": "DplayName" 
      }, { 
       "data": "lgo" 
      }, { 
       "data": "inc" 
      }, { 
       "data": "featured" 
      }] 
     }); 
    }); 
    </script>

和这里是一个示例我的json文件：

{ 
"partnerList": [ 
     { 
      "shrname": "bchan", 
      "Dplayname": "bchang-Shop", 
      "pId": "id12345", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "1 to 1", 
      "dets": { 
       "tmage": "someUrl/here", 
       "desp": "desciption", 
       "jturl": "jtUrl/here", 
       "jtbut": "Shop", 
       "termy": [ 
        { 
         "heady": "", 
         "body": "" 
        } 
       ] 
      } 
     }, 
     { 
      "shrname": "hereIsIt", 
      "Dplayname": "HereIs-Shop", 
      "pId": "id65432", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "2 to 1", 
      "dets": { 
       "tmage": "someUrl/here", 
       "desp": "desciption", 
       "jturl": "jtUrl/here", 
       "jtbut": "Shop", 
       "termy": [ 
        { 
         "heady": "", 
         "body": "" 
        } 
       ] 
      } 
     } 
    ] 
}

我现在正在承担这个错误..见下图。

来源

2016-05-12 ZelelB

问题是什么？ – Turnip

数据未加载到数据表中。身体保持为空 – ZelelB

然后在您的问题中添加重要信息。 – Turnip

试试这个

var t = [{ 
 
    "shrname": "bchan", 
 
    "Dplayname": "bchang-Shop", 
 
    "pId": "id12345", 
 
    "featured": "0", 
 
    "lgo": "https://url.here.com/url", 
 
    "inc": "1 to 1", 
 
    "dets": { 
 
    "tmage": "someUrl/here", 
 
    "desp": "desciption", 
 
    "jturl": "jtUrl/here", 
 
    "jtbut": "Shop", 
 
    "termy": [{ 
 
     "heady": "", 
 
     "body": "" 
 
    }] 
 
    } 
 
}, { 
 
    "shrname": "hereIsIt", 
 
    "Dplayname": "HereIs-Shop", 
 
    "pId": "id65432", 
 
    "featured": "0", 
 
    "lgo": "https://url.here.com/url", 
 
    "inc": "2 to 1", 
 
    "dets": { 
 
    "tmage": "someUrl/here", 
 
    "desp": "desciption", 
 
    "jturl": "jtUrl/here", 
 
    "jtbut": "Shop", 
 
    "termy": [{ 
 
     "heady": "", 
 
     "body": "" 
 
    }] 
 
    } 
 
}]; 
 
$(document).ready(function() { 
 
    $('#opTable').DataTable({ 
 
    "aaData": t, 
 
    "columns": [{ 
 
     "data": "pId" 
 
    }, { 
 
     "data": "shrname" 
 
    }, { 
 
     "data": "Dplayname" 
 
    }, { 
 
     "data": "lgo" 
 
    }, { 
 
     "data": "inc" 
 
    }, { 
 
     "data": "featured" 
 
    }] 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" /> 
 
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
 
<table id="opTable"> 
 
    <thead> 
 
    <tr> 
 
     <th class="partner_id">ID</th> 
 
     <th>ShortName</th> 
 
     <th>DisplayName</th> 
 
     <th>LogoUrl</th> 
 
     <th>Incent</th> 
 
     <th>JTS-URL</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    </tbody> 
 
</table>

来源

2016-05-12 11:55:58

听起来不错，但我正在从json文件读取数据，这是重点。而不是从一个变量（var t） – ZelelB

控制台中是否有任何错误？ –

我改变了问题..现在有一个错误显示，当我加载页面，其中我做了一个截图，并把它放在上面。你有一个想法@Krupesh？ – ZelelB

基于链接的一个萝卜中的注释，Datatables Ajax Data Source (objects)提供，你的数据应该是这样的：

{ 
    "data": [ 
     { 
      "shrname": "bchan", 
      "Dplayname": "bchang-Shop", 
      "pId": "id12345", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "1 to 1",    
     }, 
     { 
      "shrname": "hereIsIt", 
      "Dplayname": "HereIs-Shop", 
      "pId": "id65432", 
      "featured": "0", 
      "lgo": "https://url.here.com/url", 
      "inc": "2 to 1",    
     } 
    ] 
}

我不确定你想用你的数据的“dets”部分做什么，尽管

来源

2016-05-12 20:42:06 Adam

我不需要dets部分..我只需要在表中，6列.. – ZelelB

这应该是JSON进来的形式应该采取然后 – Adam

从json文件渲染数据表行

回答

相关问题