Scribd
Upload
300 views

Mongo Datatables

This document summarizes how to dynamically display data from MongoDB in an HTML table using jQuery DataTables. It involves setting up the HTML table structure, initializing DataTables with Ajax calls to a Java servlet that queries MongoDB and returns JSON data, and coding the servlet to retrieve data from MongoDB and return it in the required JSON format.

Uploaded by

James O'Hara
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
300 views

Mongo Datatables

This document summarizes how to dynamically display data from MongoDB in an HTML table using jQuery DataTables. It involves setting up the HTML table structure, initializing DataTables with Ajax calls to a Java servlet that queries MongoDB and returns JSON data, and coding the servlet to retrieve data from MongoDB and return it in the required JSON format.

Uploaded by

James O'Hara
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 9

Dynamic Data Display With jQuery, DataTables and MongoDB

June 2012 NY MongoDB User Group June 19, 2012 Jim OHara

http://datatables.net

Setting up the html


Add the html elements Add headers in a <thead> Include an id tag for the table

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> <thead> <tr> <th width="10">Last Name</th> <th width="10">First Name</th> <th width="10">Age</th> <th width="25">Location</th> <th width="10">Date</th> <th width="5">Fatal</th> </tr> </thead> <tbody> </tbody> </table>

Setting up the html


This script is added in a script tag following references to jQuery and Datables. These are the table cell elements Script will run on document load. Datatables will read each value with the mDataProp, and populate the JSON in a table cell. MongoServlet is the name of the Java class that will run. Servlet will reference a collection in MongDB and return a JSON object.

$(document).ready(function() { var oTable = $('#example').dataTable( { "bProcessing": true, "bPaginate": true, "bProcessing": true, "bDeferRender":true, "iDisplayLength":250, "sAjaxSource": "MongoServlet", "sScrollY": "400px", "aoColumns": [ { "mDataProp": "lname"}, { "mDataProp": "fname"}, { "mDataProp": "age", "sClass": "center"}, { "mDataProp": "location"}, { "mDataProp": "date"}, { "mDataProp": "fatal", "sClass": "center"} ] } );

db.miners.findOne()
{ "_id" : "ObjectID(4fde364a.."), "lname" : "ABAHAZY", "fname" : "JOHN", "location" : "WOODWARD", age" : "37", "fatal" : "Y", "date" : "1905/09/30" }

MongoServlet (snippets)

m = new Mongo("localhost"); protected void doPost(() PrintWriter out = response.getWriter(); DB db = m.getDB("test"); DBCollection coll = db.getCollection("miners"); DBCursor cursor = coll.find(); JSONObject miners = new JSONObject(); Map map = new LinkedHashMap(); List items = new ArrayList();

MongoServlet (snippets)

while(cursor.hasNext()) { Miner miner = new Miner(); // a simple POJO DBObject dbObject = cursor.next(); String lname = String.valueOf(dbObject.get("lname")); String fname = String.valueOf(dbObject.get("fname")); String age = String.valueOf(dbObject.get("age")); String date = String.valueOf(dbObject.get("date")); String fatal = String.valueOf(dbObject.get("fatal")); String location = String.valueOf(dbObject.get("location")).toUpperCase(); miner.setLname(lname); miner.setFname(fname); miner.setAge(age); miner.setFatal(fatal); miner.setLocation(location); miner.setDate(date); items.add(miner); }

MongoServlet (snippets)

map.put("sEcho", "1"); map.put("iTotalRecords", items.size()); map.put("iTotalDisplayRecords", items.size()); map.put("aaData", items); ObjectMapper mapper = new ObjectMapper(); String jsonString = mapper.writeValueAsString(map); System.out.println(jsonString); out.print(jsonString); // JSON will be returned to the calling page

http://localhost:8080/tables/datatables.jsp

You might also like