JQuery plugin - Datatables.net

Your css files are in fact being uploaded to your page, and are working just fine. But you don’t seem to have the images located in the same place on your server as the css files expect them to be.

If you look in jquery.dataTables.css, you will see this bit of code:

table.dataTable thead .sorting {
  background: url("../images/sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
  background: url("../images/sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
  background: url("../images/sort_desc.png") no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
  background: url("../images/sort_asc_disabled.png") no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
  background: url("../images/sort_desc_disabled.png") no-repeat center right;
}

You need to edit it to read like this:

table.dataTable thead .sorting {
  background: url("sort_both.png") no-repeat center right;
}
table.dataTable thead .sorting_asc {
  background: url("sort_asc.png") no-repeat center right;
}
table.dataTable thead .sorting_desc {
  background: url("sort_desc.png") no-repeat center right;
}
table.dataTable thead .sorting_asc_disabled {
  background: url("sort_asc_disabled.png") no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled {
  background: url("sort_desc_disabled.png") no-repeat center right;
}

See how I took the …/images/ part out of those URLs?

Next, you need to get the images referenced therein up to your server, into the Resources folder. I previously urged you to just drag these images up to the pasteboard above the visible page, but I now realize that since they have underscores in their names, Freeway will likely rename them and make a mess of the references in your page. Better solution is to download Tim Plumb’s Upload Stuff Action from the Forge, and use that to add these images to your Resources folder. It’s very similar to the way the External … Actions work – you pick a file in the Actions palette, and the Action forces Freeway to upload it. There are two sections to the interface – upload with HTML, and upload into Resources. You want the latter.

You’re really very close – this is working just as designed – just missing those photos and the changes to the CSS files that will enable the page to find them on your server.

Finally, if you do choose to go with the CDN route, that traditionally will make the whole thing a lot easier – often the images will be sourced from the CDN along with the scripts and CSS, so it’s a one-step deal. What you lose is the control and security of not relying on someone else for critical function of your site. I got burned once or twice when Prototype was updated on Google’s Ajax CDN and my scripts relied on an older version of the library.

Walter

On Jul 8, 2014, at 10:30 AM, Tim wrote:

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


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

It appears that with the local route (as opposed to CDN) FW is less ‘compliant’. I wanted to avoid the CDN route for exactly the reasons you have stated, although CDN does appear to be more FW friendly. A worthwhile point for anyone considering using this plug-in.

To be sure that I understand:

I need to copy the content of the jquery.dataTables.css into Textwrangler and edit as per your advice. I’m assuming that, when I save the changes, it doesn’t matter that this effectively becomes an Applescript file. Then, as and when, upload it to my page using the External Javascript action, as a .css file obviously. Still have no idea what jquery.dataTables_themeroller.css is, but no doubt that will come to light at some time!

In the meantime I need to upload and use the Upload Stuff Action to ‘copy’ the contents of DataTables’s image folder to my FW Resources folder within the Site folder. This I infer not only ‘forces’ FW to accept these images it re-names them appropriately. That will probably become evident when I do it.

Hope I’m right in my understanding. Walter, you’re a star.

Tim


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

On Jul 8, 2014, at 11:33 AM, Tim wrote:

It appears that with the local route (as opposed to CDN) FW is less ‘compliant’. I wanted to avoid the CDN route for exactly the reasons you have stated, although CDN does appear to be more FW friendly. A worthwhile point for anyone considering using this plug-in.

To be sure that I understand:

I need to copy the content of the jquery.dataTables.css into Textwrangler and edit as per your advice. I’m assuming that, when I save the changes, it doesn’t matter that this effectively becomes an Applescript file.

You can fix this behavior by locating the edited file in your Finder, clicking once on it, and choosing File / Get Info from the main menu. Then change the Open With… setting to TextWrangler, and you should be all done. It should appear to be a text file from that point on, which is all that CSS files are.

Then, as and when, upload it to my page using the External Javascript action, as a .css file obviously. Still have no idea what jquery.dataTables_themeroller.css is, but no doubt that will come to light at some time!

Use the External Stylesheet Action to upload the CSS – it will set the proper tag for it in the head of the page. If you use the External JavaScript Action for the CSS, you will get a and it won’t work at all.

In the meantime I need to upload and use the Upload Stuff Action to ‘copy’ the contents of DataTables’s image folder to my FW Resources folder within the Site folder. This I infer not only ‘forces’ FW to accept these images it re-names them appropriately. That will probably become evident when I do it.

Freeway has some peculiar habits around file naming, and this can become a real pain when you are referencing a file from outside of Freeway’s domain (as in these external stylesheets). Normally, it doesn’t matter what Freeway names anything, because it will maintain a database of file names and links to them internally, and any changes are reflected anywhere they are needed. For example, rename the File attribute of one of your pages. Instantly, without you doing anything, any page that linked to that page under its old name will be marked as “dirty” (having changes) and will get a bullet to the left of its name in the site tree. When you next upload, all of those pages will be replaced with new pages that contain the correct link. But when you are working with a file that was not authored by Freeway, you have to take extra pains to avoid letting Freeway do its usual things with the file names (stripping out punctuation, avoiding duplicate filenames, etc.).

Hope I’m right in my understanding. Walter, you’re a star.

Sounds like you’re really close.

Walter

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

Well, it may not be the prettiest table but all the nuts and bolts seem to be in the right place. I’ll just have to work on that (appropriate extra plug-ins, styling, etc).

http://www.golagos.net/

What can I say except one huge thanks to you Walter, and also thanks again to Dave. I’m sure this will also be of immense help to anyone in the future whose thinking of using DataTables. Excellent stuff!

Tim


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

I’m assuming that if your jquery code requires the table to have a footer it’s a ‘no goer’?


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

You can add a footer to the table. It’s slightly geeky, but do-able directly in Freeway. Click on one of the table cells in the bottom row. In the Inspector, move to the first tab and click the Markup button. By default, the markup dialog will open to the Before TR segment. In this dialog, add the following:

<tfoot>

Then switch the picker to After TR, and put in the closing tag:

</tfoot>

Okay the dialog and publish. Your table now has a tfoot element wrapped around the last row, and your script will know which row to use when constructing that part of the effect.

Walter

On Jul 10, 2014, at 6:07 AM, Tim wrote:

I’m assuming that if your jquery code requires the table to have a footer it’s a ‘no goer’?


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,

When I click one of the bottom row cells it comes up with the ‘text’ inspector.

I have tried adding a blank row which, when I do the same, comes up with the ‘table’ inspector which enabled me to the add the markup. However.

When I then look at the page source it shows that all my rows with text in them have been wrapped with the tfoot element. The new empty row then appears afterwards, hanging there on its own so to speak.

Thanks.

Tim


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

The “which element is selected” feedback in a table is subtle and tricky, IMO. Try these steps: click on the pasteboard, so nothing on the page is selected, then click once in the middle of a table cell in your bottom row. You should see a blue highlight rectangle around the table cell (not a text cursor or selection handles on the table itself). If you don’t, try those steps again, and do your best not to click on actual text characters when you click on the table cell.

The Inspector title should read Table when you have successfully done this, and the Inspector should have four tabs: Table cell settings, Item general settings, Item output settings, and Style Inspector. By default (at least here) the second of these is initially highlighted, and you want to switch over to the left-most tab (Table cell settings) to find the Markup button.

Walter

On Jul 11, 2014, at 5:25 AM, Tim wrote:

Hi Walter,

When I click one of the bottom row cells it comes up with the ‘text’ inspector.

I have tried adding a blank row which, when I do the same, comes up with the ‘table’ inspector which enabled me to the add the markup. However.

When I then look at the page source it shows that all my rows with text in them have been wrapped with the tfoot element. The new empty row then appears afterwards, hanging there on its own so to speak.

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,

Whatever I do when I select a cell with text in it, it brings up the text inspector. No text cursor or the table handles.

If however I create an empty row and do the same it brings up the table inspector. If I click between the cell with text and the cell below without text the inspector toggles between the table and text inspectors.

The currently published page has been set up using the additional empty row/ cell, using the table inspector to add the markup.

http://www.golagos.net/

I have also tried using the markup in the text inspector with (as far as I can tell) the same results, i.e. where the tfoot elements appear in the same position in the source code.

PS The previous comment about this method leaving my empty row ‘hanging there’ appears to have been a figment of my imagination. Apologies.

Cheers.

Tim


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

I just tried this here, and I see what you mean. The Text Inspector now contains a table cell tab, the third from the left. There you will find the same controls as I was expecting you to find in the first tab.

Walter

On Jul 11, 2014, at 8:56 AM, Tim wrote:

Hi Walter,

Whatever I do when I select a cell with text in it, it brings up the text inspector. No text cursor or the table handles.

If however I create an empty row and do the same it brings up the table inspector. If I click between the cell with text and the cell below without text the inspector toggles between the table and text inspectors.

The currently published page has been set up using the additional empty row/ cell, using the table inspector to add the markup.

http://www.golagos.net/

I have also tried using the markup in the text inspector with (as far as I can tell) the same results, i.e. where the tfoot elements appear in the same position in the source code.

PS The previous comment about this method leaving my empty row ‘hanging there’ appears to have been a figment of my imagination. Apologies.

Cheers.

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

Alas we can’t win them all!

Many thanks for trying.

Tim


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

I think you missed my point. If you click into the table cell, along with the text controls (in the same Inspector) you will also see the table cell controls. In that tab (third from the left) you will see the Markup button, and you will be able to make the addition of the tag as previously described.

Walter

On Jul 11, 2014, at 9:27 AM, Tim wrote:

Alas we can’t win them all!

Many thanks for trying.

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

Sorry about that Walter.

This time I used the text inspector to apply the markup to the last row with text (removed the empty row). To my eye it looks the same.

http://www.golagos.net/

Bearing in mind I’m putting these tags before and after

Tim


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

It appears to be working – the element is being replaced by the script with a <div class="dataTables_info"> element. So do you have a style in your page (or sourced from the data tables css file) that modifies the text properties of that element?

If you make a style with the Tag set to .dataTables_info and the Name set to nothing (and tab out of that field so it sticks) you will be able to create any sort of text styling you need.

Note carefully that you never apply this Tag-only style to anything on the page. The very fact that it exists is enough for it to be applied to the elements it matches. Such is the magic of CSS.

Walter

On Jul 11, 2014, at 10:33 AM, Tim wrote:

Sorry about that Walter.

This time I used the text inspector to apply the markup to the last row with text (removed the empty row). To my eye it looks the same.

http://www.golagos.net/

Bearing in mind I’m putting these tags before and after

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

Actually, it’s more complex than I was noticing – I didn’t look at the raw code, but the DOM code that jQuery modified the page to be. Your actual HTML is invalid, and that appears to be my fault. The Action you’ve applied to the table has made a thead and tbody, but does not provide a tfoot, and thus, the tfoot you added is appearing in the wrong part of the code (inside the tbody). The browser just rearranges things and figures you were crazy.

I’ve updated the Semantic Table Action to provide a tfoot element. Download the newer version and see if that sorts things. Remember to remove your hand-added tfoot code from the table before you try that.

Walter

On Jul 11, 2014, at 10:37 AM, Walter Lee Davis wrote:

It appears to be working – the element is being replaced by the script with a <div class="dataTables_info"> element. So do you have a style in your page (or sourced from the data tables css file) that modifies the text properties of that element?

If you make a style with the Tag set to .dataTables_info and the Name set to nothing (and tab out of that field so it sticks) you will be able to create any sort of text styling you need.

Note carefully that you never apply this Tag-only style to anything on the page. The very fact that it exists is enough for it to be applied to the elements it matches. Such is the magic of CSS.

Walter

On Jul 11, 2014, at 10:33 AM, Tim wrote:

Sorry about that Walter.

This time I used the text inspector to apply the markup to the last row with text (removed the empty row). To my eye it looks the same.

http://www.golagos.net/

Bearing in mind I’m putting these tags before and after

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

Hi Walter,

I’m guessing you’re looking at the page source with an editor and a trained eye because I can’t see any reference to script you mention!

I was intending (or should that be hoping) to use dataTables’s individual column filtering feature (text or select inputs), example:

https://datatables.net/examples/api/multi_filter.html

I presume (as Dave would say) that this is hard wired somewhere into my dataTables JS/ CSS files. It’s getting the little devil to come out to play I have to work out.

It appears to me that script given all relates to the ‘document ready script’, which one assumes replaces or adds to ‘document ready script’ I already have in place, except changing the word ‘example’ to my own table id. In other words, it’s all there and this script should set the engine running.

Anyway I’ve taken far too much of your time for one day, and grateful thanks as always.

Tim


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

Hi Walter/ everyone,

A thought. My table footer tags need to achieve the same as the following:

http://jquery-datatables-column-filter.googlecode.com/svn/trunk/default.html

As is, do I need to change anything?

Cheers,

Tim


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

Interesting. They have the tfoot as the second thing in the table, not the third. My Action makes it and I’m not sure if the script needs it to be the way they have it coded. Most likely not.

You could experiment with this aspect by doing the following:

  1. Preview your page into your programmer’s text editor, as previously discussed.
  2. Locate the section of the table code, and move it to just after the code (both of those tags will contain a and a bunch of or tags, by the way).
  3. Save, and refresh your browser, and see if anything changes.

Walter

On Jul 12, 2014, at 11:05 AM, Tim wrote:

Hi Walter/ everyone,

A thought. My table footer tags need to achieve the same as the following:

http://jquery-datatables-column-filter.googlecode.com/svn/trunk/default.html

As is, do I need to change anything?

Cheers,

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 interesting, they have the tfoot containing th tags, not td. I just updated the Semantic Table Action to make that happen.

Walter

On Jul 12, 2014, at 12:43 PM, Walter Lee Davis wrote:

Interesting. They have the tfoot as the second thing in the table, not the third. My Action makes it and I’m not sure if the script needs it to be the way they have it coded. Most likely not.


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

While I’m not all that enthusiastic over th tags in the tfoot, I have seen th tags take the SCOPE attribute to indicate whether the th describes row or column formation, which is sensible approach for semantics.

A nice summary of semantic data table structures - http://planetoftheweb.com/components/promos.php?id=543

Walter wrote:

Also interesting, they have the tfoot containing th tags, not td. I just updated the Semantic Table Action to make that happen.


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