Smalltalk › Frameworks & Tools › Seaside › Seaside General

Re: [Pharo-users] Datatables

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

1 message

Mariano Martinez Peck

Re: [Pharo-users] Datatables

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, [hidden email] <[hidden email]> 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 <[hidden email]> 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: [hidden email]
[hidden email]
Cel: 5493815982714

Mariano
http://marianopeck.wordpress.com

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside