Info
Content
Home Document
⌘K
Version 1.0

Using DataTables to show external Data

If you're looking to pull in dynamic data using rest API and show it in your app, you can do so with the following snippet. 

First, let's understand what we'll be doing here. 

  1. We'll use the JSCode inside a Pipe to get the external data. You can see this button inside each API call of the Pipes' Overview Tab. 
  2. We'll get these records in JavaScript and append it to a table
  3. We'll use the DataTables library to make it look presentable. 

Let's get started

1) Add this code to the header of your app: 

2) Add this code to the footer of your app: 

 <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

3) Get the JavaScript Code for the Pipe API Call, it should look something like this: 

TB.triggerPipe('UNIQUE_ID_HERE', 
	{tableId: 'lGArg7rmR6'},
	function(type, response, xhrRespone) {
		console.log('pipe response', type, response, xhrRespone);
});

4) Add an HTML element to the page with the following code: 

<table id="myTable"></table>

 

5) Paste and update this code accordingly: 

TB.render('component_3', function(data) {
        TB.triggerPipe('UNIQUE_ID_HERE', 
    	{tableId: 'lGArg7rmR6'},
    	function(type, response, xhrRespone) {
    		console.log('pipe response', type, response, xhrRespone);
    		 $('#myTable').DataTable({
                data: response.items,
                    columns: [
                        { title: 'Name', data: "field_43"},
                          { title: 'Age', data: "field_44" },
                          { title: 'City', data: "field_65_val[0].val" }
                        ]
          });
    	}
    );
});

Be sure to update the component_id and any of the pipe parameters as well as column names. In my example, I'm doing an API Call to Tadabase and am therefore matching each column to the response generated from the Tadabase API. 

 

 

 

Back to top