JQuery数据绑定与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>
	<tr>
		<th>
			<b>Group</b>
		</th>
		<th>
			<b>Region</b>
		</th>
		<th>
			<b>District</b>
		</th>
		<th>
			<b>Store</b>
		</th>
	</tr>
</thead>
<tbody>
</tbody>
</table>

Answer 1

问题1：首先加载jquery，然后加载dataTable。

问题2：您没有包含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>
	<tr>
		<th>
			<b>Group</b>
		</th>
		<th>
			<b>Region</b>
		</th>
		<th>
			<b>District</b>
		</th>
		<th>
			<b>Store</b>
		</th>
	</tr>
</thead>
<tbody>
</tbody>
</table>