How to render json data through modal by using aaData
How to render json data through modal by using aaData
omfgitsjoshlol
Posts: 1Questions: 1Answers: 0
So right now I have aaData & aoColumns inside the .renderer.tableAll function. This obviously does not work. Its targeting tables, but my data isn't hardcoded in the html table so its not being rendered. How can I provide the same render/responsiveness to the aadata/aocolumns rather than hardcoding that in my html? Thanks for any help!
JS
$(document).ready(function() {
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/GetByTitle('Quality%20Codes')/items?$select=Title,Code,Additional_x0020_Info&$top=1500",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
},
success: function (data) {
},//success
});
call.done(function(data, textStatus, jqXHR){
$('#example').DataTable( {
responsive: {
details: {
renderer: $.fn.dataTable.Responsive.renderer.tableAll({
"aaData": data.d.results,
"aoColumns": [
{"mData": "Title"},
{"mData": "Code"},
{"mData": "Additional_x0020_Info"},
]
)}
}
},
} ); //('#example')
}); //call.done
call.fail(function(jqXHR, textStatus, errorThrown){
alert("Error retrieving Tasks: " + jqXHR.responseText);
});//call.fail
} ); //$(document).ready
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.dataTables.min.css"> -->
<!-- <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css"> -->
<!-- <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css"> -->
<link rel="stylesheet" href="http://dnaspweba01:8081/Sales/SiteAssets/style.css">
<link rel="stylesheet" href="http://dnaspweba01:8081/Sales/SiteAssets/bootstrap.css">
<link rel="stylesheet" href="http://dnaspweba01:8081/Sales/SiteAssets/dataTablesBootstrap.css">
<link rel="stylesheet" href="http://dnaspweba01:8081/Sales/SiteAssets/responsiveBootstrap.css">
<script type="text/javascript" src="http://dnaspweba01:8081/Sales/SiteAssets/script.js"></script>
</head>
<body>
<table id="example" class="table table-striped table-bordered nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Company</th>
<th>Code</th>
<th>Additional Info</th>
</tr>
</thead>
</table>
</body>
</html>
This discussion has been closed.