DataTables LDAP Service usage Guide DTLDAP Usage Guide thomasktn@me.com / www.ktn.ch
Benutzung des DTLDAP Service DataTables Der Service stellt einen JSON Feed für DataTables (http://www.datatables.net) zur Verfügung. Es wurde so fern möglich der Standard von DataTables übernommen. An einigen Stellen musste Zusatzparameter definiert werden, um die benötigten Funktionen abzudecken. An anderen Stellen wurde nicht alles im Service implementiert, was DataTables bietet. Funktionsübersicht Der Service stellt den Clients den JSON Feed, welcher von DataTables erwartet wird zur Verfügung. Dieser Feed wird dynamisch Aufgrund des GET Request s des Client zusammen gestellt. Die Parameter, die vom Service beachtet / benutzt werden Sind folgende: Parameter Beschreibung Beispiel Optional sldapquery Gibts an, welche Query abgerufen aodata.push( { "name": "sldapquery", Nein werden soll "value": "roles_de" ); secho Muss Feld, eine Zahl. Sollte bei jedem Wird von DataTables automatisch Nein Aufruf erhöht werden. Der Service gibt immer die selbe Nummer als Anwort zurück idisplaystart Gibt an, ab welchem Record die Daten Wird von DataTables automatisch zurückgegeben werden sollen. Wenn nicht angegeben, wird 0 angenommen idisplaylength Gibt an wieviele Rows zurückgegeben Wird von DataTables automatisch werden sollen. Defaults to 1 ildapcartesian Gibt an, ob und welche Row als aodata.push( { "name": Cartesian Produkt zurück gegeben werden soll. -1 = alle, 0 = Row 0, 1= Row 1, etc "sldapcartesian", "value": "1" ); ssearch Alle Felder die suchbar sind (bsearchable_<colnr>) nach diesem String durchsuchen. (Contains) Wird von DataTables automatisch. (Filter / Search Field ) DTLDAP Usage Guide 1
Parameter Beschreibung Beispiel Optional ssearch_<colnr> Definiert nach was in dieser Spalte "aosearchcols": [null,null,{ "ssearch": gesucht werden soll. Beispiel suche in spalte 3 nach AA "AA",null,null,null ], bsearchable_<colnr> Definiert ob der Globale Search "bsearchable": false ssearch in dieser Spalte suchen soll. Default ist setzten in aocolumns isortcol_0 Sortierung. Wert entspricht der Spalte, Wird von DataTables automatisch die sortiert werden soll ssortdir_0 Richtung in der Sortiert werden soll Wird von DataTables automatisch bdownloadcsv Soll anstatt eines JSON Feeds ein CSV oparams.push({ "name": Feed geschickt werden?. Default false "bdownloadcsv", "value": "true"); bexport_<colnr> Definiert ob diese Zeile Exportiert oparams.push({ "name": "bexport_0", werden soll. Zum Beispiel bei CSV Download. Default true "value": "false"); bhighlight Soll gesuchtes in der DataTable als aodata.push( { "name": "bhighlight", Markiert dargestellt werden? Default false "value": "true" ); bhighlight_<colnr> Soll diese Spalte Markiert werden nach Suchresultaten? default false aodata.push( { "name": "bhighlight_2", "value": "true" ); Aufrufmöglichkeiten Der Service kann mit folgenden URI Aufgerufen werden: URI Beschreibung Optional http://serverip:portnr/daten Backend / JSON Stream, wenn Parameter mitgegeben werden Backend kann in config disabled werden enable_backend http://serverip:portnr/ http://serverip:portnr/generate Index des Services Enthält Links zu automatisch genererierten DataTables sowie Links zum Backend und zur Doku Dieser Link für die einzelnen Queries, die in der Konfig definiert sind dynamisch eine HTML Seite mit einer DataTable, welche als Quickstart benutzt werden kann Kann im Backend disabled werden enable_index Das generieren kann in der Konfiguration des Services abgeschaltet werden enable_generate http://serverip:portnr/* Alle anderen möglichen Aufrufe werden versucht aus dem extdata Verzeichniss bedient zu werden (Web Server) Das verhalten als Webserver kann in der Konfig ausgeschaltet werden enable_fileserver DTLDAP Usage Guide 2
Einfache Beispiele Einfache Möglichkeit (Plain) Konfig queries: example001: filter: '(objectclass=person)' basedn: 'ou=users,o=demo' attrs: - cn - dn - fullname The HTML File <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>demo Datatable for Query: example001</title> <style type="text/css" title="currentstyle"> @import "demo.css"; </style> <script type="text/javascript" language="javascript" src="jquery.min.js"></script> <script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script> <script type="text/javascript" language="javascript" src="jquery.datatables.min.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function() { var otable = $('#example001').datatable( { "bserverside": true, "sajaxsource": "daten", "idisplaylength": 25, "aasorting": [[1,'asc']], "fnserverparams": function ( aodata ) { aodata.push( { "name": "sldapquery", "value": "example001" ); ); ); </script> </head> <body> <h1>demo Datatable for Query: example001</h1> </body> </html> <table id="example001"> <thead><tr> <th>cn</th> <th>dn</th> <th>fullname</th> </tr></thead> <tbody><tr><td colspan="3" class="datatables_empty">loading data from server</td></tr></tbody> </table> Ausgabe Sieht nicht besonders aus, aber funktioniert. Diese DataTable besitzt bereit ein Paging, sowie eine Suche und Sortieren nach den entsprechenden Spalten DTLDAP Usage Guide 3
Ausgabe mit entsprechendem CSS Hier wurde im HTML bei der Definition der Datatable die sdom gesetzt "sdom" : '<"demo-header"<"demo"flr>>t<"demo-footer"<"demo"ip>><"clear">t' und daraus wurde via CSS dann diese Tabelle erstellt. Es handelt sich dabei immer noch um genau die selber wie bei der Ausbau von vorhin. CSV Export Tabelle Um die Tabelle für einen CSV Export zu erweitern, benötigen wird TableTools. Diese wird im Header mit eingebunden. <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>demo Datatable for Query: example001</title> <style type="text/css" title="currentstyle"> @import "demo.css"; </style> <script type="text/javascript" language="javascript" src="jquery.min.js"></script> <script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script> <script type="text/javascript" language="javascript" src="jquery.datatables.min.js"></script> <script type="text/javascript" language="javascript" src="tabletools.min.js"></script>... Danach definieren wir einen TableTool Button, und platzieren diesen im sdom. TableTools.BUTTONS.download = { "saction": "text", "sfieldboundary": "", "sfieldseperator": "\t", "snewline": "<br>", "stooltip": "Download the Data as csv File", "sbuttonclass": "DTTT_button_text", "sbuttonclasshover": "DTTT_button_text_hover", "sbuttontext": "Download", "mcolumns": "all", "bheader": true, "bfooter": true, "sdiv": "", "fnmouseover": null, "fnmouseout": null, "fnclick": function( nbutton, oconfig ) { var oparams = this.s.dt.oapi._fnajaxparameters( this.s.dt ); oparams.push({ "name": "sldapquery", "value": "query03"); DTLDAP Usage Guide 4
; oparams.push({ "name": "bdownloadcsv", "value": "true"); oparams.push({ "name": "bexport_0", "value": "false"); var iframe = document.createelement('iframe'); iframe.style.height = "0px"; iframe.style.width = "0px"; iframe.src = oconfig.surl+"?"+$.param(oparams); document.body.appendchild( iframe );, "fnselect": null, "fncomplete": null, "fninit": null In der sdom muss wie oben beschrieben T enthalten sein, dort wird TableTools plaziert. Nun müssen wir in der DT noch die Tools initialisieren "otabletools": { "abuttons": [ { "sextends": "download", "sbuttontext": "Download CSV", "surl": "/dt/daten" ], Schon sollten wir in der lagen sein, die gewünschten Daten via CSV zu exportieren. DTLDAP Usage Guide 5
Select from one Table, Copy to another Die ausgewählten Einträge sind in der Variable selected gespeichert (Alle DN s die in der Selected Tabelle sind) Der Code dazu: <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>demo Datatable for Query: example001</title> <style type="text/css" title="currentstyle"> @import "demo.css";.demo tr.even.row_selected td { background-color: yellow;.demo tr.odd.row_selected td { background-color: yellow; </style> <script type="text/javascript" language="javascript" src="jquery.min.js"></script> <script type="text/javascript" language="javascript" src="jquery.tools.min.js"></script> <script type="text/javascript" language="javascript" src="jquery.datatables.min.js"></script> <script type="text/javascript" charset="utf-8"> var selected = new Array(); $(document).ready(function() { var otable = $('#example001').datatable( { "sdom" : '<"demo-header"<"demo"flr>>t<"demo-footer"<"demo"ip>><"clear">', "bserverside": true, "sajaxsource": "daten", "idisplaylength": 10, "fnrowcallback": function( nrow, adata, idisplayindex, idisplayindexfull ) { if ($.inarray(adata[1], selected) >= 0) $(nrow).addclass("row_selected"); // Mark all from selected Array return nrow;, "fnserverparams": function ( aodata ) { aodata.push( { "name": "sldapquery", "value": "example001" ); ); var seltable = $('#selectedtable').datatable( { "sdom" : '<"demo-header"<"demo"r>>t<"demo-footer"<"demo"ip>><"clear">', "bserverside": false, "idisplaylength": 10, "aadata" : [], ); $('#example001 tbody tr').live('click', function (event) { var adata = otable.fngetdata(this); // get datarow if (null!= adata) { // null if we clicked on title row if (!$(event.target.parentnode).hasclass("row_selected")) { $(event.target.parentnode).addclass("row_selected"); selected[selected.length] = adata[1]; DTLDAP Usage Guide 6
); seltable.fnadddata(adata); $('#selectedtable tbody tr').live('click', function (event) { var adata = seltable.fngetdata(this); // get datarow if (null!= adata) { // null if we clicked on title row selected.splice(selected.indexof(adata[1]), 1); if (seltable.fngetdata().length < 2) { seltable.fncleartable(); selected = new Array(); else { $(event.target.parentnode).addclass("row_selected"); seltable.fndeleterow($('#selectedtable tr.row_selected')[0]); otable.fndraw(); ); ); </script> </head> <body> <h1>demo Datatable for Query: example001</h1> <h2>select some items</h2> <table class="demo" id="example001"> <thead><tr> <th>cn</th> <th>dn</th> <th>fullname</th></tr></thead> <tbody><tr><td colspan="3" class="datatables_empty">loading data from server</td></tr></tbody> </table> <h2>selected Items</h2> <table class="demo" id="selectedtable"> <thead><tr> <th>cn</th> <th>dn</th> <th>fullname</th> </tr></thead> <tbody><tr><td colspan="3" class="datatables_empty">no Rows Selected</td></tr></tbody> </table> </body> </html> DTLDAP Usage Guide 7