M3 API with jQuery DataTables

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.jshttp://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:

Related articles

Published by

thibaudatwork

M3 Technical Consultant

10 thoughts on “M3 API with jQuery DataTables”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s