Page tree
Skip to end of metadata
Go to start of metadata

Datatables.net is the most popular grid display library.

In this example, we will demonstrate how to integrate Metamug API call with data table

<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
    
<table class="table table-striped" id="publisher-table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">Profie View</th>
      <th scope="col">Registered On</th>
      <th scope="col">Last Visited</th>
    </tr>
  </thead>
</table>

Ajax Call

The ajax request needs to send Accept header as application/json+dataset.

$('#publisher-table').DataTable({
    "ajax":{
    	'url': 'http://localhost:7000/bookmark/v1.0/publisher',
    	'type': 'GET',
		    'beforeSend': function (request) {
		        request.setRequestHeader("Accept", "application/json+dataset");
		    },
		    "dataSrc":function(json){
		    	return json.publisherList.dataset;
		    }
    } 
});

Rest Resource

<Resource xmlns="http://xml.metamug.net/resource/1.0" v="1.0">
  <Request method="GET">
    <Desc> Example Resource </Desc>
    <Sql id="publisherList" > 
              select id, email, name, exp, registered_on, last_visited_on
        from publisher 
        </Sql>
  </Request>
</Resource>

If the accept header is set to application/json+dataset it will return the data in 2D array format.

Metamug json dataset response

Reference

https://datatables.net/examples/data_sources/ajax

  • No labels