Dynamic Data Display With jQuery,   DataTables and MongoDB  June 2012 NY MongoDB User Group            June 19, 2012      ...
http://datatables.net
<table cellpadding="0" cellspacing="0" border="0"Setting up the html               class="display" id="example">          ...
$(document).ready(function() {                                                  var oTable = $(#example).dataTable( {Setti...
db.miners.findOne(){"_id" : "ObjectID(“4fde364a……….."),             "lname" : "ABAHAZY",             "fname" : "JOHN",    ...
m = new Mongo("localhost");MongoServlet(snippets)     protected void doPost(()               PrintWriter out = response.ge...
while(cursor.hasNext()) {MongoServlet    Miner miner = new Miner(); // a simple POJO(snippets)      DBObject dbObject = cu...
MongoServlet   map.put("sEcho", "1");(snippets)     map.put("iTotalRecords", items.size());               map.put("iTotalD...
http://localhost:8080/tables/datatables.jsp
Upcoming SlideShare
Loading in...5
×

jQuery Datatables With MongDb

4,256

Published on

Display JSON data from a MongoDb database in an html file with jQuery and Datatables

2 Comments
0 Likes
Statistics
Notes
  • Sir Kindly Guide me about this tutorial as i am confused about MongoServlet what it is this ? Is this a JavaScript Class or what ???? it will be highly appreciated
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sir Kindly Guide me about this tutorial as i am confused about MongoServlet what it is this ? Is this a JavaScript Class or what ???? it will be highly appreciated
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
4,256
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

jQuery Datatables With MongDb

  1. 1. Dynamic Data Display With jQuery, DataTables and MongoDB June 2012 NY MongoDB User Group June 19, 2012 Jim O’Hara
  2. 2. http://datatables.net
  3. 3. <table cellpadding="0" cellspacing="0" border="0"Setting up the html class="display" id="example"> <thead>Add the html elements <tr> <th width="10">Last Name</th>Add headers in a <thead> <th width="10">First Name</th>Include an id tag for the table <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>
  4. 4. $(document).ready(function() { var oTable = $(#example).dataTable( {Setting up the html "bProcessing": true,This script is added in a script tag "bPaginate": true,following references to jQuery and "bProcessing": true,Datables. "bDeferRender":true, "iDisplayLength":250,These are the table cell elements "sAjaxSource": "MongoServlet", "sScrollY": "400px",Script will run on document load. "aoColumns": [ { "mDataProp": "lname"},Datatables will read each value with { "mDataProp": "fname"},the mDataProp, and populate the { "mDataProp": "age", "sClass": "center"},JSON in a table cell. { "mDataProp": "location"}, { "mDataProp": "date"},MongoServlet is the name of the Java { "mDataProp": "fatal", "sClass": "center"}class that will run. ]Servlet will reference a collection in }MongDB and return a JSON object. );
  5. 5. db.miners.findOne(){"_id" : "ObjectID(“4fde364a……….."), "lname" : "ABAHAZY", "fname" : "JOHN", "location" :"WOODWARD", “age" : "37", "fatal" : "Y", "date" : "1905/09/30"}
  6. 6. m = new Mongo("localhost");MongoServlet(snippets) 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();
  7. 7. while(cursor.hasNext()) {MongoServlet Miner miner = new Miner(); // a simple POJO(snippets) 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); }
  8. 8. MongoServlet map.put("sEcho", "1");(snippets) 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
  9. 9. http://localhost:8080/tables/datatables.jsp
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×