jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part...
Transcript of jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part...
![Page 1: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/1.jpg)
jQuery Datatables
Part IV: A New Hope
Widget of the Week (WoW) Series
![Page 2: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/2.jpg)
Things to know …
DOM
Document Object Model
jQuery
Third-party JavaScript library
Progressive enhancement
More than just a buzzword. (Two buzzwords.)
Datatables.net
jQuery plug-in
![Page 3: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/3.jpg)
DOM
“Document Object Model”
Way to represent, and interact with, the parts
of HTML/XHTML and XML documents
Elements, attributes, parents, siblings,
children
Kinda messy to work with the raw API, which
is why we use something like …
![Page 4: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/4.jpg)
jQuery
Arguably the most popular JavaScript library
in use today
Excels at DOM manipulation, event handling,
client-server interaction
Good cross-browser support
Readily extensible through plug-ins and
libraries …
![Page 5: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/5.jpg)
Progressive enhancement
“A strategy for web design that … uses web
technologies in a layered fashion that allows
everyone to access the basic content and
functionality of a web page, using any
browser or Internet connection, while also
providing those with better bandwidth or more
advanced browser software an enhanced
version of the page.”
![Page 6: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/6.jpg)
Progressive enhancement
Create the page using basic low-tech
accessible HTML content
Use JavaScript/CSS/etc. to “enhance” the
page with extra functionality / bling
Enhancements can be minor, or can
amount to complete rewrite of page
Purports to separate content from
presentation
![Page 7: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/7.jpg)
Progressive enhancement
Often compared with “graceful
degradation”
Former assumes forward compatibility
Latter implicitly relies on backwards
compatibility
![Page 8: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/8.jpg)
Graceful degradation
“Fault-tolerance” for the web
Design pages for current standards
Accessibility
Previous generation platforms
Assume “forward compatibility” of existing
web technologies
![Page 9: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/9.jpg)
Progressive enhancement
Guarantees perpetual employment for client-
side developers?
![Page 10: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/10.jpg)
Use the 5Ps approach:
Prepare
Plan
Prototype
Plumb
Proselytize
Secure
![Page 11: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/11.jpg)
Prepare
Which widget(s) do I want/need to use?
Datatables.net plugin
What docs are available?
jQuery online docs, uxt.ucsd.edu, datatables.net
What client-side resources are required?
jQuery core, datatables plugin, HTML table
What server-side resources are required?
Sample data source for dynamic example only
![Page 12: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/12.jpg)
Plan
How to generate table data?
Output from server side
Output on client side (AJAX-ish)
First example: Generating the table on the
server side (progressive enhancement)
Second example: Build table dynamically
![Page 13: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/13.jpg)
Prototype
Create a basic HTML table and play around
with the datatables.net plug-in.
![Page 14: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/14.jpg)
Prototype (cont’d)
<table>
<thead>
<th>Reservoir</th>
<th>Capacity</th>
<th>Storage</th>
</thead>
<tbody>
<tr>
<td>Shasta</td>
<td>4,552,000</td>
<td>3,444,300</td>
</tr> ...
![Page 15: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/15.jpg)
Plumb
Create sample data source and skeleton
table on page
Add JavaScript glue code to write server-side
data to page using DataTables API
![Page 16: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/16.jpg)
Proselytize
Tell your friends!
![Page 17: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/17.jpg)
Secure
How do you keep unauthorized users from
gaining access to your services?
Use Jlink Security Filter to control access by role
Roll (role?) your own session-based
authentication
Use Spring Security (a subject for another lunch
hour)
![Page 18: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/18.jpg)
Exercise IV
Create static HTML table and “enhance” with
jQuery DataTables
Optional: Add mouse-over highlighting
Optional: Add click handler to cells
![Page 19: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/19.jpg)
Exercise V
What’s happening behind the scenes?
Examine in Firebug
Examine pageable table in Firebug
![Page 20: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/20.jpg)
I AM YOUR FATHER!
Data Model
DOM
![Page 21: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/21.jpg)
Exercise V
What are the implications?
Can we write data directly to the DOM?
Can we embed forms in pageable tables?
![Page 22: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/22.jpg)
Exercise VI
Dynamically generated table
Optional: Dynamically generated column data
![Page 23: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/23.jpg)
Clone Wars
Yahoo! UI data table component
jQuery Tablesorter
jQueryTreeTable
![Page 24: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/24.jpg)
Middleware, UI, and database
![Page 25: jQuery Datatables Part IV: A New Hopedeveloper.ucsd.edu/_files/datatables.pdfjQuery Datatables Part IV: A New Hope Widget of the Week (WoW) Series. ... jQuery core, datatables plugin,](https://reader034.fdocuments.us/reader034/viewer/2022042111/5e8c39fcec4d745686061abe/html5/thumbnails/25.jpg)
Coming soon
Datatables Part I: “The Phantom Menace”