從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文件渲染數據錶行

回答

相關問題