JQuery plugin - Datatables.net

Wow, that’s disappointing. I though that the latest version did output them, at least in HTML5 mode. I just checked, and I see that you are correct. My TableKit Action adds these tags for you, but then you have to use the Prototype TableKit, which doesn’t do the pagination tricks that you’re looking for. Aat least, not from the Action it doesn’t – I seem to recall that the library tablekit.js will do pagination, but I haven’t looked at the documentation in quite a long while.

Walter

On Jul 1, 2014, at 10:12 AM, Tim wrote:

I’m in the process of trying to put my page onto a server.

In the meantime (as much for information as anything) I’ve recently read an article that states that the and tags are “are mandatory if you want to use DataTable”.

That might account for some (but only some) of my problem as, looking at the page source code, I have neither!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Okay, I just extracted the table-wrangling part of TableKit.fwaction and made a new Action for you to try. Apply this to the table, and see if it helps.

http://actionsforge.com/actions/semantictable

Walter

On Jul 1, 2014, at 10:17 AM, Walter Lee Davis wrote:

Wow, that’s disappointing. I though that the latest version did output them, at least in HTML5 mode. I just checked, and I see that you are correct. My TableKit Action adds these tags for you, but then you have to use the Prototype TableKit, which doesn’t do the pagination tricks that you’re looking for. Aat least, not from the Action it doesn’t – I seem to recall that the library tablekit.js will do pagination, but I haven’t looked at the documentation in quite a long while.

Walter

On Jul 1, 2014, at 10:12 AM, Tim wrote:

I’m in the process of trying to put my page onto a server.

In the meantime (as much for information as anything) I’ve recently read an article that states that the and tags are “are mandatory if you want to use DataTable”.

That might account for some (but only some) of my problem as, looking at the page source code, I have neither!


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Re: your new action I’ll take a look Walter. Cheers.

“… that the and tags are “are mandatory” should have read that “the table head and body section tags are both mandatory”.

It is very disappointing. Cannot understand why these can’t be inserted using markup or some other method. I’m assuming therefore that you can’t edit FW’s (outputted?) HTML?


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jul 1, 2014, at 10:58 AM, Tim wrote:

Re: your new action I’ll take a look Walter. Cheers.

“… that the and tags are “are mandatory” should have read that “the table head and body section tags are both mandatory”.

It is very disappointing. Cannot understand why these can’t be inserted using markup or some other method. I’m assuming therefore that you can’t edit FW’s (outputted?) HTML?

Oh you can certainly do that. In the Inspector, when you have a table cell selected, you will see a Markup and Extend buttons in one of the tabs (can’t recall off the top of my head). Markus allows you to add raw code before and after the cell or the entire row. You could totally hand-edit the table using the Inspector to add these. My Action just automates that process for you.

As far as editing the HTML output from Freeway, sure, you can do that, but the next time you publish, Freeway will overwrite your changes. That’s because inside of Freeway, the document model is entirely devoid of any HTML at all. It’s an object model, of greater precision than HTML is capable of expressing.

Think back to DTP terms. If you have a QuarkXPress document, that same document can print to a dot-matrix ImageWriter, a LaserWriter (vintage, naturally, and 300ppi), a 600ppi laser printer, a paper output imagesetter 2,700 ppi, or a film imagesetter 9,600 ppi. Same document. At each level of fineness, the same document results in an extraordinarily higher level of output precision. That’s because the internal resolution is for all intents and purposes infinite, and output consists of “dumbing down” that perfect mathematical model to whatever resolution the output device is capable of displaying.

Now realize that Freeway was once a desktop publishing application called Uniqorn, and if Apple hadn’t killed QuickDraw GX, we might still be using it today (it was extraordinary for its time). But then, if Apple hadn’t killed QuickDraw GX, it’s possible that Softpress might never have extracted Uniqorn’s layout engine and used it to make these new-fangled things called Web pages, in this hard-scrabble markup language named HTML, that is way less expressive than PostScript or PDF.

Walter


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Markup.

On Jul 1, 2014, at 11:15 AM, Walter Lee Davis wrote:

Markus


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Uploaded semantictable and, to no great surprise, when I viewed source it has indeed created a table header! One more step in my quest to get datatables working!

Thank you.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Link for Walter.

Kept it simple. One page and just the table.

http://www.golagos.net

Thanks

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There is actually more than one table on your page - but that shouldn’t matter.

Here is your table on my page - http://www.deltadesign.co/FW6Test/datatable.html

When you add the js and initiate it you have

<script type="text/javascript">
$(document).ready(function() {
    $('restauranttable').dataTable();
});
</script>

Try adding in the # as in

<script type="text/javascript">
$(document).ready(function() {
    $('#restauranttable').dataTable();
});
</script>


David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks very much Dave. I’m assuming that your page is FW.

How I’ve managed to put two tables on one page I really can’t fathom. Is one overlaying the other (layman’s terms), therefore I can’t see it? Guess I should look at the source code.

I shall try changing my script to match yours. Fingers crossed.

I am mystified, that not having Datatables’ css files downloaded, why there is a search box.

Regards

Tim

Regards,

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I’ve managed to put two tables on one page I really can’t fathom.

By creating items on the FW page with the CSS button set to Off - then FW automatically creates a table layout structure.

I am mystified, that not having Datatables’ css files downloaded, why there is a search box.

The look of the search box is not defined by the css file - its baked into the Browser/System.

I have added their css file to my example

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I am learning something new every day. I take it that, to be safe, it’s best create a new table with the CSS button turned on. When I followed a FW tutorial video I don’t recall seeing that advice.

On the rest I’ll have to experiment. Getting Datatables to work at all will be progress in itself.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave and hi Walter

Everything now seems to be functioning ok as far as it goes.

I would now like to add the datatables’ css stylesheet. The HTML they give is as follows:

The question is how do to do it? Do I need to use the external css stylesheet action? If you so how do I do this?

Many thanks.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

I would use the External Stylesheets Action for this, because it will manage uploading the file for you. One thing you may need to work out, however, is any references to images used within that CSS.

(Tool Talk Sidebar) If you don’t already have it, download a free copy of TextWrangler from http://barebones.com. This is a real programmer’s text editor (the baby cousin of BBEdit, which has been used to write more software than any other Mac application I know of). A programmer’s text editor (unlike Word or Pages) will never alter your text – curling your quotes or the like – and will show you color-coded hints that tell you what a keyword means in the context of your file type. This makes it easy to spot errors – if you forget to close a quote, the rest of your document will appear in the wrong color, for example. (/Sidebar)

Once you have that tool in hand, use it to open the CSS file, and search for this string:

url(

If you find any hits, look carefully at what is inside the url(some/path/here) construction. If you see any references to …/images/image.png or the like, then you will want to change those to simply image.png (well, to be the un-prefixed name of the actual image file). That’s because Freeway will upload the CSS file into the Resources folder, and you will want to place one copy of each of the images distributed with Datatables somewhere hidden on the same page as the table. Above the page on the pasteboard is a good spot for this – nobody will ever see it, and the file will also be uploaded into your Resources folder, and the path from the CSS file will now be correct. Be sure when you do this that your CSS Layout button is on – non-layer elements on the pasteboard are not published at all, while layer items are published, but positioned in such a way that they cannot be viewed.

Once you make these changes in the CSS, attach your modified copy to the page with the External Stylesheets Action. And hide the images, as noted above, on the same page. Upload, and you should see everything working. If you don’t, then post a link here, and the changes will be easy to explain once we can see the error in a browser’s debugger.

Walter

On Jul 7, 2014, at 9:42 AM, Tim wrote:

Hi Dave and hi Walter

Everything now seems to be functioning ok as far as it goes.

I would now like to add the datatables’ css stylesheet. The HTML they give is as follows:

The question is how do to do it? Do I need to use the external css stylesheet action? If you so how do I do this?

Many thanks.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

The finished article should like as follows:

http://www.deltadesign.co/FW6Test/datatable.html
http://www.datatables.net/

Mine currently looks as follows:

http://www.golagos.net

When I go into the Datatables folder (as downloaded) > media folder> css it has two files. Each of which I believe I have to upload. One of which is called jquery.dataTables.css. I’m pretty sure these are the files I need.

I’ve uploaded the CSS action 'ESS - Use External Stylesheet". This come up as separate green box on the page containing the table for some reason. However when I go to use the action I’m completely stumped. Unlike the external JS action I cannot see how to upload the files.

Am I trying to use the correct action?

Thanks.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Walter,

Some progress:

http://www.golagos.net/

Using the External Stylesheet option I uploaded the two Datatables CSS files by switching OFF BOTH the “Delete Embedded Styles” AND the “Use Site Pages As Stylesheets” options.

According to the Softpress KnowledgeBase, from where I obtained this information, I should have left the “Use Site Pages As Stylesheets” option ON, which is a little confusing as it appears to work?

Presume that Dave’s table (delta design) looks different due to some additional styling plugin. Neither have I worked out yet how the table headers aren’t in line with the column data as they were in my original table.

Any observations would, as usual, be greatly appreciated.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

On Jul 7, 2014, at 1:56 PM, Tim wrote:

Hi Walter,

Some progress:

http://www.golagos.net/

Using the External Stylesheet option I uploaded the two Datatables CSS files by switching OFF BOTH the “Delete Embedded Styles” AND the “Use Site Pages As Stylesheets” options.

According to the Softpress KnowledgeBase, from where I obtained this information, I should have left the “Use Site Pages As Stylesheets” option ON, which is a little confusing as it appears to work?

No, when you are uploading an external file, you definitely want to have that option OFF. That option changes the file picker from a “choose a file to upload” picker to a “choose a page in the current site” picker, and they are definitely not the same thing.

Presume that Dave’s table (delta design) looks different due to some additional styling plugin. Neither have I worked out yet how the table headers aren’t in line with the column data as they were in my original table.

You are missing two files (see my note about dragging these to the “above the page” portion of the pasteboard to fix this problem), and also you will need to edit your CSS file so that it doesn’t look for them in the (missing) /images folder.

sort_asc.png and sort_both.png need to be added to your page.

Walter

Any observations would, as usual, be greatly appreciated.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Also sort_desc.png. Missed that one on the initial load.

Walter

On Jul 7, 2014, at 2:02 PM, Walter Lee Davis wrote:

On Jul 7, 2014, at 1:56 PM, Tim wrote:

Hi Walter,

Some progress:

http://www.golagos.net/

Using the External Stylesheet option I uploaded the two Datatables CSS files by switching OFF BOTH the “Delete Embedded Styles” AND the “Use Site Pages As Stylesheets” options.

According to the Softpress KnowledgeBase, from where I obtained this information, I should have left the “Use Site Pages As Stylesheets” option ON, which is a little confusing as it appears to work?

No, when you are uploading an external file, you definitely want to have that option OFF. That option changes the file picker from a “choose a file to upload” picker to a “choose a page in the current site” picker, and they are definitely not the same thing.

Presume that Dave’s table (delta design) looks different due to some additional styling plugin. Neither have I worked out yet how the table headers aren’t in line with the column data as they were in my original table.

You are missing two files (see my note about dragging these to the “above the page” portion of the pasteboard to fix this problem), and also you will need to edit your CSS file so that it doesn’t look for them in the (missing) /images folder.

sort_asc.png and sort_both.png need to be added to your page.

Walter

Any observations would, as usual, be greatly appreciated.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Thanks Walter.

Looks like going back to drawing board. I’ll study your suggestions.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

There is a cdn repository for the CSS file that you can link to (and the js of course)

Add the following into Page>Html Markup in the before slot

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">

Then you dont have to think about the images etc.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

Hi Dave and Walter,

I’ve installed the JS files locally so, rightly or wrongly, assumed I should follow suit with the CSS files. Would it better to start over again and take the CDN route or carry on as is I wonder?

Again I assumed that if I could upload the CSS files through the Use External Stylesheet action that would work in the same manner as External Javascript action did. So far no luck. No changes to the table.

Finally I assumed that uploading the dataTable’s CSS files to FW would ‘drag’ the required graphics with them. Maybe this needs need to be done separately, I don’t know.

One thing that may or not be pertinent is that I was able to save and copy of DataTable’s JS files in Textwrangler which worked for that side of things. However the CSS files will only save as either AppleScript or a Safari file. I have no idea if this makes any difference.

The two DataTables’s CSS files I’m trying to upload are in their media>css folder, names as follows:

  1. jquery.dataTables.css

  2. jquery.dataTables_themeroller.css (whatever that is).

All the graphics are in the media>images folder.

I feel sure that I’m missing something extremely simple but can no longer ‘see the wood for the trees’ it seems.

Thank you both for your continued patience.

Tim


freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options