JSON數據綁定問題與jquery datatable

-1

 


         
  
 

          
   
   var Jdata = [{"Store":480,"District":62,"Region":8,"Area":10,"City":"SPRINGFIELD","State":"TN","RiskClass":"RISK CLASS 2","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null},{"Store":590,"District":62,"Region":8,"Area":10,"City":"ASHLAND CITY","State":"TN","RiskClass":"RISK CLASS 0","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null}] 
 

 
var tableCatValue = $('#AjaxGrid').dataTable({ 
 
       "bDestroy": true, 
 
       "bFilter": true, 
 
       "pageLength": 5, 
 
       "bLengthChange": false, 
 
       "data": Jdata, 
 
       "columns": [ 
 

 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageName ">' + data.Store + '</div>'; 
 
            }, width: '20%' 
 
           }, 
 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageDesc">' + data.District + '</div>'; 
 
            }, width: '53%' 
 
           }, 
 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageName ct-ml-10">' + data.Region + '</div>'; 
 
            }, width: '20%' 
 
           }, 
 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageName ct-ml-10">' + data.Area + '</div>'; 
 
            }, width: '20%' 
 
           } 
 
         ] 
 
      }); 
   <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table id="AjaxGrid"> 
 
<thead> 
 
\t <tr> 
 
\t \t <th> 
 
\t \t \t <b>Group</b> 
 
\t \t </th> 
 
\t \t <th> 
 
\t \t \t <b>Region</b> 
 
\t \t </th> 
 
\t \t <th> 
 
\t \t \t <b>District</b> 
 
\t \t </th> 
 
\t \t <th> 
 
\t \t \t <b>Store</b> 
 
\t \t </th> 
 
\t </tr> 
 
</thead> 
 
<tbody> 
 
</tbody> 
 
</table>

來源

2017-06-06 vasanth naidu

具體是什麼問題，問題嗎？請花幾分鐘時間閱讀[問] – charlietfl

數據未加載到表中。 –

而且您可能在瀏覽器控制檯中出現錯誤...您看起來了嗎？ – charlietfl

問題1：首先加載jquery，然後加載dataTable。

Problem2：您還沒有包括dataTable.css（樣式表）

var Jdata = [{"Store":480,"District":62,"Region":8,"Area":10,"City":"SPRINGFIELD","State":"TN","RiskClass":"RISK CLASS 2","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null},{"Store":590,"District":62,"Region":8,"Area":10,"City":"ASHLAND CITY","State":"TN","RiskClass":"RISK CLASS 0","AssignedDate":null,"AssignedBy":null,"AssignedConfig":null,"MatchCount":0,"MismatchCount":0,"ConfigModDate":null,"ConfigAppliedDate":null,"ConfigModBy":null}]; 
 

 
var tableCatValue = $('#AjaxGrid').dataTable({ 
 
       "bDestroy": true, 
 
       "bFilter": true, 
 
       "pageLength": 5, 
 
       "bLengthChange": false, 
 
       "data": Jdata, 
 
       "columns": [ 
 

 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageName ">' + data.Store + '</div>'; 
 
            }, width: '20%' 
 
           }, 
 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageDesc">' + data.District + '</div>'; 
 
            }, width: '53%' 
 
           }, 
 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageName ct-ml-10">' + data.Region + '</div>'; 
 
            }, width: '20%' 
 
           }, 
 
            { data: null, render: function (data, type, row) { 
 
             return '<div class=" messageName ct-ml-10">' + data.Area + '</div>'; 
 
            }, width: '20%' 
 
           } 
 
         ] 
 
      });

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> 
 
    
 
<table id="AjaxGrid"> 
 
<thead> 
 
\t <tr> 
 
\t \t <th> 
 
\t \t \t <b>Group</b> 
 
\t \t </th> 
 
\t \t <th> 
 
\t \t \t <b>Region</b> 
 
\t \t </th> 
 
\t \t <th> 
 
\t \t \t <b>District</b> 
 
\t \t </th> 
 
\t \t <th> 
 
\t \t \t <b>Store</b> 
 
\t \t </th> 
 
\t </tr> 
 
</thead> 
 
<tbody> 
 
</tbody> 
 
</table>

來源

2017-06-06 11:18:08

謝謝你完美...！ –

@vasanthnaidu如果它解決了您的問題，請接受回答 –

還有一件事，比如說如何提高績效，因爲我們擁有7000多條記錄。 –

JSON數據綁定問題與jquery datatable

回答

相關問題