<div dir="ltr">Hi guys, <div><br></div><div>Pablo was asking about Datatables which is a JS plugin, not databases :)</div><div><br></div><div>Pablo, In Smalltalk hub there are a couple of DataTables projects. It would be interesting to know which one is the "official".</div><div>Second, please ask in Seaside mailing list. </div><div><br></div><div>For my client, I forked the original DatatablesFileLibrary because I needed extra plugins. And then, I simple used JS. So the steps are simply add the file library into the libs of your app. Then render some html table. Finally, invoke some JS. Either from jQuery or from normal JS.</div><div><br></div><div>Note that I can imagine that some of the Datatables found in Smalltalkhub should have examples. Check them out. </div><div><br></div><div>Something like this (it's full of domain stuff and probably I am copy pasting with errors but will help you to get the idea):</div><div><br></div><div>1) Register lib to app:</div><div><br></div><div>app addLibrary: DataTablesFileLibrary (or whatever class name is it)</div><div><br></div><div>2) Then render table and container (whatever you want, however you want...you simple need a container and a table). </div><div><br></div><div><div>containerDiv := html div.</div><div><span class="" style="white-space:pre"> </span>containerDivId := containerDiv ensureId.</div><div><span class="" style="white-space:pre"> </span>containerDiv</div><div><span class="" style="white-space:pre"> </span>class: 'reportContainer';</div><div><span class="" style="white-space:pre"> </span>with: [ </div></div><div><div> html table </div><div><span class="" style="white-space:pre"> </span>id: self tableId;</div><div><span class="" style="white-space:pre"> </span>with: [ self renderTableOn: html. ]. </div></div><div><br></div><div><b>html script: (FaDataTablesHelper datatablesScriptFor: tableID tableHeightString: '"scrollY": (0.80 * $(window).height()),' containerDivId: containerDivId). <br></b></div><div><br></div><div>The magic here is that to the generated table you pass via #script: the Datatables JS. </div><div><br></div><div>3) Generate datatables JS:</div><div><br></div><div><div>FaDataTablesHelper class >> datatablesScriptFor: tableID tableHeightString: aTableHeightString containerDivId: aContainerDivId</div><div><br></div><div> ^ '</div><div><span class="" style="white-space:pre"> </span>$(document).ready(function() { </div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span>var getCellText = function (elem) {</div><div> //get only the element text</div><div> return elem.contents().filter(function() {</div><div> return this.nodeValue;</div><div> }).text();</div><div> };<span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span>// this is so that the table does not use all the height space and hence the horizontal scroll looks outside the empty space.</div><div><span class="" style="white-space:pre"> </span>// By default, we make the table a max height of a % of the windows.</div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span>var oTable = $(''#', tableID asString ,''').DataTable( { </div><div><span class="" style="white-space:pre"> </span> ', aTableHeightString, '</div><div> <span class="" style="white-space:pre"> </span>"scrollX": "100%",</div><div> <span class="" style="white-space:pre"> </span>"scrollCollapse": true,</div><div> <span class="" style="white-space:pre"> </span>"paginate": false,</div><div><span class="" style="white-space:pre"> </span>"stateSave": false,</div><div><span class="" style="white-space:pre"> </span>"stateDuration": -1,</div><div><span class="" style="white-space:pre"> </span>"destroy": true,</div><div><span class="" style="white-space:pre"> </span>"filter": false,</div><div><span class="" style="white-space:pre"> </span>"ordering": false,</div><div><span class="" style="white-space:pre"> </span>"searching": false,</div><div><span class="" style="white-space:pre"> </span>"sort": false,</div><div><span class="" style="white-space:pre"> </span>"orderClasses": false,</div><div><span class="" style="white-space:pre"> </span>"autoWidth": false,</div><div><span class="" style="white-space:pre"> </span>"jQueryUI": false,</div><div><span class="" style="white-space:pre"> </span>// J: ColResize.</div><div><span class="" style="white-space:pre"> </span>// I: ColPin. It needs ColReorder.</div><div><span class="" style="white-space:pre"> </span>// R: ColReorder</div><div><span class="" style="white-space:pre"> </span>// "dom": ''C<"clear">Rt'',</div><div><span class="" style="white-space:pre"> </span>"dom": ''t'',</div><div><span class="" style="white-space:pre"> </span>// colVis: {</div><div><span class="" style="white-space:pre"> </span> // label: function (index, title, th) {</div><div><span class="" style="white-space:pre"> </span> // return $(''a[href]'', th).text() || getCellText($(th));</div><div><span class="" style="white-space:pre"> </span> // }</div><div><span class="" style="white-space:pre"> </span> // },</div><div><span class="" style="white-space:pre"> </span>// this is in case I want to use the paginate for the Scroller</div><div><span class="" style="white-space:pre"> </span>"iDisplayLength": -1</div><div><span class="" style="white-space:pre"> </span> } );</div><div><br></div><div><span class="" style="white-space:pre"> </span>// oTable.colResize.init({fixedLayout: true, dblClick: ''matchContent''});</div><div><span class="" style="white-space:pre"> </span>// Previosuly it was the below line, but this is bad...because if the widths of the columns keep fixed </div><div><span class="" style="white-space:pre"> </span>// all along the session, we may wast a lot of space because columns were kepts with its original width...</div><div><span class="" style="white-space:pre"> </span>// and when filtering, sorting, etc..the width of the column changes to better adjust its width needs..."</div><div><br></div><div><br></div><div><span class="" style="white-space:pre"> </span>// Check if body width is higher than window width :)</div><div><span class="" style="white-space:pre"> </span>if ( $(''#', tableID asString ,''').width() > $("#', aContainerDivId,'").width() ) {</div><div><br></div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span>// Add default fixedColumns </div><div><span class="" style="white-space:pre"> </span>// oTable.colPin.init({</div><div><span class="" style="white-space:pre"> </span></div><div> <span class="" style="white-space:pre"> </span>//<span class="" style="white-space:pre"> </span>fixedColumns: {</div><div><span class="" style="white-space:pre"> </span>//<span class="" style="white-space:pre"> </span>leftColumns: 1,</div><div><span class="" style="white-space:pre"> </span>//<span class="" style="white-space:pre"> </span>rightColumns: 1,</div><div><span class="" style="white-space:pre"> </span>//<span class="" style="white-space:pre"> </span>heightMatch: ''auto''</div><div><span class="" style="white-space:pre"> </span>//<span class="" style="white-space:pre"> </span>}</div><div><span class="" style="white-space:pre"> </span>// });</div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span>new $.fn.dataTable.FixedColumns( oTable, {</div><div> leftColumns: 1,</div><div><span class="" style="white-space:pre"> </span>rightColumns: 1</div><div> } );</div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span>}; //table is bigger than container</div><div><br></div><div><br></div><div> </div><div><span class="" style="white-space:pre"> </span>}); // document on load</div><div><span class="" style="white-space:pre"> </span></div><div><span class="" style="white-space:pre"> </span>'.</div></div><div><br></div><div><br></div><div><br></div><div>This point 3) depends completely on how you want to use Datatables. Read it's documentation in order to know what you need/want. </div><div><br></div><div>Also..use the Developer Tools of the browser (console) since you may have missing plugins, or wrong JS code etc. That console will be your friend until you make it work.</div><div><br></div><div>Cheers, </div><div><br></div></div><div class="gmail_extra"><br><div class="gmail_quote">On Sat, Dec 5, 2015 at 11:25 AM, <a href="mailto:phil@highoctane.be">phil@highoctane.be</a> <span dir="ltr"><<a href="mailto:phil@highoctane.be" target="_blank">phil@highoctane.be</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">I have used this datatable package in Seaside in my app.<div><br></div><div><div>MCSmalltalkhubRepository</div><div><span style="white-space:pre-wrap"> </span>owner: 'GastonDallOglio'</div><div><span style="white-space:pre-wrap"> </span>project: 'DataTables'</div><div><span style="white-space:pre-wrap"> </span>user: ''</div><div><span style="white-space:pre-wrap"> </span>password: ''</div><div><br></div><div>For the examples, looking at the Datatables JS API was helpful. The version was the older one.</div><div><br></div><div>You can use it like this (there is some bootstrap mixed in)</div><div><br></div><div><div>html tbsTable </div><div><span style="white-space:pre-wrap"> </span>beStriped;</div><div><span style="white-space:pre-wrap"> </span>beHover;</div><div><span style="white-space:pre-wrap"> </span>script:<span style="white-space:pre-wrap"> </span>((html jQuery new dataTable) bFilter: false; bPaginate: false; bInfo: false); </div><div><span style="white-space:pre-wrap"> </span>class: 'table-responsive'; </div><div><span style="white-space:pre-wrap"> </span>with: [</div><div><span style="white-space:pre-wrap"> </span>html tableHead with: [ </div><div><span style="white-space:pre-wrap"> </span>html tableHeading with: 'ID' seasideTranslated .</div><div><span style="white-space:pre-wrap"> </span>html tableHeading with: 'MAC' seasideTranslated . </div><div><span style="white-space:pre-wrap"> </span>html tableHeading with: 'IP' seasideTranslated .</div><div><span style="white-space:pre-wrap"> </span>html tableHeading with: 'Status' seasideTranslated <span style="white-space:pre-wrap"> </span> </div><div><span style="white-space:pre-wrap"> </span>].</div><div><span style="white-space:pre-wrap"> </span></div></div><div>....</div></div><div><br></div><div><br></div></div><div class="HOEnZb"><div class="h5"><div class="gmail_extra"><br><div class="gmail_quote">On Sat, Dec 5, 2015 at 9:09 AM, stepharo <span dir="ltr"><<a href="mailto:stepharo@free.fr" target="_blank">stepharo@free.fr</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<div bgcolor="#FFFFFF" text="#000000">
You can use <br>
- Voyage to access MongoDB read the entreprise Pharo book <br>
- Garage for relational databases.<br>
<br>
<a href="http://pharo.org/news/garage-database" target="_blank">http://pharo.org/news/garage-database</a><br>
Stef<br>
<br>
<br>
<div>Le 4/12/15 15:58, Pablo R. Digonzelli a
écrit :<br>
</div>
<blockquote type="cite">
<div style="font-family:arial,helvetica,sans-serif;font-size:12pt;color:#000000">
<div>Hi, I am interesting in using Datatables in a Seaside app.</div>
<div>I know there is wrapper fot this in StHub. Is there is
examples how to use it?</div>
<div><br>
</div>
<div><br>
</div>
<div>TIA</div>
<div><br>
</div>
<div>
<div><strong><strong><span style="font-family:tahoma,new york,times,serif;font-size:medium"></span></strong></strong>
<hr><strong><span style="font-family:tahoma,new york,times,serif;font-size:medium">Ing. Pablo Digonzelli</span></strong><br>
<span style="font-family:tahoma,new york,times,serif;font-size:small;color:rgb(0,0,0)">Software Solutions</span><br>
<span style="font-family:tahoma,new york,times,serif;font-size:small;color:rgb(0,0,0)">IP-Solutiones SRL</span></div>
<div><span style="font-size:small;color:rgb(0,0,0)">Metrotec
SRL</span><br>
<span style="font-family:tahoma,new york,times,serif;font-size:small;color:rgb(0,0,0)">25 de Mayo 521</span></div>
<div><span style="font-family:tahoma,new york,times,serif;font-size:small;color:rgb(0,0,0)">San Miguel de
Tucumán</span></div>
<div><span style="font-family:tahoma,new york,times,serif;font-size:small;color:rgb(0,0,0)">Email:
<a href="mailto:pdigonzelli@softsargentina.com" target="_blank">pdigonzelli@softsargentina.com</a></span><br>
<span style="font-family:tahoma,new york,times,serif;font-size:small;color:rgb(0,0,0)"><a href="mailto:pdigonzelli@gmail.com" target="_blank">pdigonzelli@gmail.com</a></span><br>
<span style="font-family:tahoma,new york,times,serif;font-size:small;color:rgb(0,0,0)">Cel: 5493815982714</span></div>
</div>
</div>
</blockquote>
<br>
</div>
</blockquote></div><br></div>
</div></div></blockquote></div><br><br clear="all"><div><br></div>-- <br><div class="gmail_signature">Mariano<br><a href="http://marianopeck.wordpress.com" target="_blank">http://marianopeck.wordpress.com</a><br></div>
</div>