Looking for Interactive html Datagrid example
-
I'm currently returning data as a html table. The client wants a nice looking grid with sortable columns. I would not be surprised is paging were next as some results can have many rows. Is there an example of a simple datagrid used with jsreport? I'd like to stick with sending the json up to jsreport online rather thann having the report make an api call. I hope that makes sense, but maybe not. I guess I really would like to see some examples of different approaches to this problem.
-
It is really up to you how will you do it, there are plenty of UI components you can choose from.
You can send the grid data through common api call
https://jsreport.net/learn/api
-
Without some examples I'm really lost. For example, the below code renders great in the jsreport studio as handlebars/html. However, when I call it from my app, the document.ready is treated as text by the browser and displayed on screen. Even if it were treated as a script, dataTables.js is not present to call on the client...at least I don't think so. I tried to just use the html-with-browser-client as my recipe and it simply renders the html table and then spewed gibberish (i.e. "jsreport.serverUrl='https://moyesco.jsreportonline.net';jsreport.template=JSON.parse(decodeURIComponent("%7B%22_i..."). I suppose that I need the jsreport client JavaScript in my browser client...or at least I think so?
I guess that I am really having a hard time understanding server side rendering with dynamic content. I'm not sure what should happen where and why.
=====================================================
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
<script src='https://code.jquery.com/jquery-1.12.4.js'></script>
<script src='https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js'></script>
</head><body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Country</th>
<th>Company</th>
<th>Website</th>
<th>Interests</th>
</tr>
</thead>
<tbody>
{{#each rows}}
<tr>
<td>{{countryname}}</td>
<td>{{company}}</td>
<td> {{#if website}}<a href="{{website}}">website</a>{{/if}}</td>
<td>{{interests}}</td>
</tr>
{{/each}}
</tbody>
</table>
</body><script>
$(document).ready(function() {
$('#example').DataTable();
} );
</script></html>
-
Is there an example of rendering some of the html on the client?
-
@derobiom i don't think that such specific example exists.. in the end reports created with jsreport are just like normal webpages so your use case is totally possible, i'm afraid that we don't have an example for you this time but if you figure it out please share the example to make it part of official docs.
thanks
