[Seaside] Re: [Pharo-users] Datatables

[Mariano Martinez Peck]

Hi guys,

Pablo was asking about Datatables which is a JS plugin, not databases :)

Pablo, In Smalltalk hub there are a couple of DataTables projects. It would
be interesting to know which one is the "official".
Second, please ask in Seaside mailing list.

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.

Note that I can imagine that some of the Datatables found in Smalltalkhub
should have examples. Check them out.

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):

1) Register lib to app:

app addLibrary: DataTablesFileLibrary  (or whatever class name is it)

2) Then render table and container (whatever you want, however you
want...you simple need a container and a table).

containerDiv := html div.
containerDivId := containerDiv ensureId.
containerDiv
class: 'reportContainer';
with: [
                                           html   table
id: self tableId;
with: [ self renderTableOn: html. ].


*html script: (FaDataTablesHelper datatablesScriptFor: tableID
tableHeightString: '"scrollY":  (0.80 * $(window).height()),'
containerDivId: containerDivId). *

The magic here is that to the generated table you pass via #script:  the
Datatables JS.

3) Generate datatables JS:

FaDataTablesHelper  class >> datatablesScriptFor: tableID
tableHeightString: aTableHeightString containerDivId: aContainerDivId

 ^ '
$(document).ready(function() {
var getCellText = function (elem) {
                    //get only the element text
                    return elem.contents().filter(function() {
                        return this.nodeValue;
                    }).text();
                };
// this is so that the table does not use all the height space and hence
the horizontal scroll looks outside the empty space.
// By default, we make the table a max height of a % of the windows.
var oTable = $(''#', tableID asString ,''').DataTable( {
', aTableHeightString, '
        "scrollX": "100%",
        "scrollCollapse": true,
        "paginate": false,
"stateSave": false,
"stateDuration": -1,
"destroy": true,
"filter": false,
"ordering": false,
"searching": false,
"sort": false,
"orderClasses": false,
"autoWidth": false,
"jQueryUI": false,
// J: ColResize.
// I: ColPin. It needs ColReorder.
// R: ColReorder
// "dom": ''C<"clear">Rt'',
"dom": ''t'',
// colVis: {
    //     label: function (index, title, th) {
    //       return $(''a[href]'', th).text() || getCellText($(th));
     //    }
     //  },
// this is in case I want to use the paginate for the Scroller
"iDisplayLength": -1
   } );

// oTable.colResize.init({fixedLayout: true, dblClick: ''matchContent''});
// Previosuly it was the below line, but this is bad...because if the
widths of the columns keep fixed
// all along the session, we may wast a lot of space because columns were
kepts with its original width...
// and when filtering, sorting, etc..the width of the column changes to
better adjust its width needs..."


// Check if body width is higher than window width :)
if (  $(''#', tableID asString ,''').width() > $("#',
aContainerDivId,'").width() ) {

// Add default fixedColumns
// oTable.colPin.init({
                // fixedColumns: {
// leftColumns: 1,
// rightColumns: 1,
// heightMatch: ''auto''
// }
// });
new $.fn.dataTable.FixedColumns( oTable, {
        leftColumns: 1,
rightColumns: 1
    } );
};  //table is bigger than container



}); // document on load
'.



This point 3) depends completely on how you want to use Datatables. Read
it's documentation in order to know what you need/want.

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.

Cheers,


On Sat, Dec 5, 2015 at 11:25 AM, phil at highoctane.be <phil at highoctane.be>
wrote:

> I have used this datatable package in Seaside in my app.
>
> MCSmalltalkhubRepository
> owner: 'GastonDallOglio'
> project: 'DataTables'
> user: ''
> password: ''
>
> For the examples, looking at the Datatables JS API was helpful. The
> version was the older one.
>
> You can use it like this (there is some bootstrap mixed in)
>
> html tbsTable
> beStriped;
> beHover;
> script: ((html jQuery new  dataTable) bFilter: false; bPaginate: false;
> bInfo: false);
> class: 'table-responsive';
> with: [
> html tableHead with: [
> html tableHeading with: 'ID' seasideTranslated .
> html tableHeading with: 'MAC' seasideTranslated .
> html tableHeading with: 'IP' seasideTranslated .
> html tableHeading with: 'Status' seasideTranslated
> ].
> ....
>
>
>
> On Sat, Dec 5, 2015 at 9:09 AM, stepharo <stepharo at free.fr> wrote:
>
>> You can use
>>     - Voyage to access MongoDB read the entreprise Pharo book
>>     - Garage for relational databases.
>>
>>     http://pharo.org/news/garage-database
>> Stef
>>
>>
>> Le 4/12/15 15:58, Pablo R. Digonzelli a écrit :
>>
>> Hi, I am interesting in using Datatables in a Seaside app.
>> I know there is wrapper fot this in StHub. Is there is examples how to
>> use it?
>>
>>
>> TIA
>>
>> ------------------------------
>> *Ing. Pablo Digonzelli*
>> Software Solutions
>> IP-Solutiones SRL
>> Metrotec SRL
>> 25 de Mayo 521
>> San Miguel de Tucumán
>> Email: pdigonzelli at softsargentina.com
>> pdigonzelli at gmail.com
>> Cel: 5493815982714
>>
>>
>>
>


-- 
Mariano
http://marianopeck.wordpress.com
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.squeakfoundation.org/pipermail/seaside/attachments/20151208/e23ce6cc/attachment-0001.htm