JSONデータバインディングのjqueryデータ型に関する問題

Question

 


         
 
 
 

          
  
 
   
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>
 
  
         
 
 
 

 

Answer 1

問題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>