JQuery Plugins

So this week I had started out by working on some code to upload snomed data files and save the data in the system. I had started looking at creating a progress bar to let it be known how long the upload would take. This had to take a back-seat because my mentor was off on business and was not able to help with the confusion I had about how the files mapped to the tables in the database. So, we changed direction and instead I created a Reference Term Browser.

Working on the Reference Term Browser I used the DataTables jQuery plugin. Wow, this really saves a lot of time so I would like to show how I incorporated it into my code with OpenMRS.

It is really quite easy. First: download all the files you will need for the plugin. They are css and js files usually. I needed: jquery.dataTables.min.js and fourButtonPagination.js

Then import them in your gsp with:

ui.includeJavascript(“yourModuleName”, “jquery.dataTables.min.js”);
ui.includeJavascript(“yourModuleName”, “fourButtonPagination.js”);

create a fragment to make a getJSON call for the datatable data:
<script type=”text/javascript”>
jq.getJSON(‘${ ui.actionLink(“yourModuleName”, “browseTableOfReferenceTerms”, “getPage”) }’)
.success(function(data) {

jQuery(‘#demo’).html( ‘<table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”example”></table>’ );
jQuery(‘#example’).dataTable( {
“sPaginationType”: “four_button”,
“aaData”: data,
“aoColumns”: [
{ “sTitle”: “source” },
{ “sTitle”: “code” },
{ “sTitle”: “name” },
{ “sTitle”: “description”}
]
} );
})
.error(function(xhr, status, err) {
alert(‘Reference Term AJAX error’ + err);
});
</script>

Then include that fragment with:

${ ui.includeFragment(“yourModuleName”, “yourFragmentName”)}

and I needed a div for displaying my table:
<div id=”demo”>

</div>

You will also need a controller to get the data when you make the json call. Here are the contents of mine:

package org.openmrs.module.conceptmanagementapps.fragment.controller;
import java.util.ArrayList;
import java.util.List;

import org.openmrs.ConceptReferenceTerm;
import org.openmrs.api.context.Context;
import org.openmrs.module.appui.UiSessionContext;
import org.openmrs.module.conceptmanagementapps.api.ConceptManagementAppsService;
import org.openmrs.ui.framework.page.PageModel;

public class BrowseTableOfReferenceTermsFragmentController {

public List<String[]> getPage() throws Exception {
ConceptManagementAppsService conceptManagementAppsService = (ConceptManagementAppsService) Context
.getService(ConceptManagementAppsService.class);
List<ConceptReferenceTerm> referenceTermList = conceptManagementAppsService.getReferenceTermsForAllSources(0, 200);
List<String[]> referenceTermDataList = new ArrayList<String[]>();
for (ConceptReferenceTerm crt : referenceTermList) {
String[] referenceTermArray = { crt.getConceptSource().getName(), crt.getCode(), crt.getName(),
crt.getDescription() };
referenceTermDataList.add(referenceTermArray);

}
return referenceTermDataList;
}

public void get(UiSessionContext sessionContext, PageModel model) throws Exception {

}
}

That is it. It is very straightforward and really saves time because it has a very organized page that you can scroll through search and filter  with very little code.

Here is a link to the plugin I used if you would like to see it in action:http://datatables.net/index

 

Advertisements

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s