Here is a sample JavaScript code to render a list of results of an M3 API call using DataTables for jQuery. This is useful for web developers who need to easily display M3 data in a web page. This article builds on my previous post about How to call M3 API from JavaScript.
jQuery is a great JavaScript library for cross-browser compatibility, ease of programming, and added functionality. DataTables is great for rendering, pagination, sorting, and filtering of table data, all client-side; this will not be suitable for large amounts of data in which case a server-side positioning will be necessary by setting the necessary API input fields.
Here’s the source code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>M3 API with jQuery DataTables</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<style type="text/css" media="screen">
@import "http://datatables.net/media/css/site_jui.ccss";
@import "http://datatables.net/release-datatables/media/css/demo_table_jui.css";
@import "http://datatables.net/media/css/jui_themes/smoothness/jquery-ui-1.7.2.custom.css";
body { padding: 10px }
#container { width: 980px; }
</style>
</head>
<body onload="run()">
<h1>Customers</h1>
http://live.datatables.net/media/js/jquery.js
http://datatables.net/download/build/jquery.dataTables.nightly.js
// settings
var userid = 'userid';
var password = 'password';
var program = 'CRS610MI';
var transaction = 'LstByNumber';
var maxrecs = 100;
var returncols = 'CUNO,CUNM,CUA1,TFNO,STAT';
var inputFields = ''; // ex: CONO=1&CUNO=10001
// call the API and show the result
function run() {
try {
// construct the URL
var url = '/m3api-rest/execute/'+program+'/'+transaction+';maxrecs='+maxrecs+';returncols='+returncols+'?'+inputFields;
// execute the request
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true, userid, password);
xhr.setRequestHeader('Accept', 'application/json');
xhr.onreadystatechange = function () {
// handle the response
if (this.readyState == 4) {
if (this.status == 200) {
// get the JSON
var jsonTxt = xhr.responseText;
var response = eval('(' + jsonTxt + ')');
// show the metadata
var table = document.getElementById('results');
var thead = table.tHead;
if (thead === null) {
thead = document.createElement('thead');
var tr = document.createElement('tr');
var metadata = response.Metadata.Field;
for (var m in metadata) {
var th = document.createElement('th');
th.appendChild(document.createTextNode(metadata[m]['@description'] + ' ' + metadata[m]['@name']));
tr.appendChild(th);
}
thead.appendChild(tr);
table.appendChild(thead);
// paint the table with jQuery DataTables
$('#results').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
}
// show the data
var rows = response.MIRecord;
for (var i in rows) {
var fields = rows[i].NameValue;
var values = [];
for (var j in fields) {
values.push(fields[j].Value);
}
$('#results').dataTable().fnAddData(values);
}
} else {
alert(xhr.responseText);
}
}
};
xhr.send();
} catch (ex) {
alert(ex);
}
}
</body>
</html>
Here’s a screenshot of the result:
M3 ideas 