[Pro] Sortable Table?

I’ll have a stab at it over the weekend. Thanks Walter.

Really sorry for yet another question, but does anyone know if it’s possible to divide a working sortable table over more than one page?

I have up to 150 entries to make which, along with the address of each, will make for one very long list if I have to put it on single page.

Tim


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

This sortable table design pattern only works if all the data is loaded into the page, because it acts on the actual data in the table, directly in the browser. If loading all of that data makes the page slow to load or display, then you may need to look into sorting it on the server, rather than in the browser. That way you would filter the number of records you show, and the order in which you show them, and you could “paginate” the results of the query. You would not be able to use this Action for that.

If the only issue is the visual size of the table, you could probably add some JavaScript to hide portions of the table, so only N rows are revealed at a time, and add some pagination controls over that. Post a link to your massive table, and one of us will see if there’s a way.

Walter

On Apr 26, 2013, at 12:43 PM, Tim wrote:

I’ll have a stab at it over the weekend. Thanks Walter.

Really sorry for yet another question, but does anyone know if it’s possible to divide a working sortable table over more than one page?

I have up to 150 entries to make which, along with the address of each, will make for one very long list if I have to put it on single page.

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

Unfortunately the website is still work in progress so I’m unable to post a link. I could post a full ‘real life’ example of one of the records on here (until now I’ve tried to keep things as straightforward as possible), then it would just be case of knowing that such a record is multiplied 100/ 150 fold. I’m assuming so in any case.

I’m happy to reduce the number of records to about 100 (min) if it looks like slowing up the time it takes to load the page.

It may be that the answer is too advanced for a beginner like myself but I live in hope!

You really have been extremely helpful, and patient.


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

Sounds like one hell of a table. Can’t wait to see it in action. I’ll make sure I quit all of my apps so my Mac doesn’t slow to a crawl. :slight_smile: Just kidding Tim.


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

Me too RavenManiac!

This has got me slightly concerned though. I’ve been on sites today with well in excess of 150 records and my Mac flew through them, so I would imagine it’s down to how large each record is. They were something like 6 columns but admittedly only single line records.

Would I be correct in saying that if I test the table through the browser preview the list will behave as it would were the site actually up and running on an internet server?


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

If you are doing something complex on the server to generate each record, say traversing through a number of related tables of a database and collating the data into a report, then rendering the page may take some time for the server before it serves it to the browser. But if you’re talking about a table with 150 rows of text in it, then I doubt you will have to worry. Your stylesheet could conceivably be larger than the HTML you need to describe that table. If you have a need to make the data appear less complex or large in order to avoid overwhelming your users, then you might want to paginate this data table. You might also want to look at my fast search example, which filters a table in real time down to the matching rows. I’m not at a computer at the moment, but maybe someone can dig out the link.

Walter

On Apr 29, 2013, at 7:58 AM, “Tim” email@hidden wrote:

Me too RavenManiac!

This has got me slightly concerned though. I’ve been on sites today with well in excess of 150 records and my Mac flew through them, so I would imagine it’s down to how large each record is. They were something like 6 columns but admittedly only single line records.

Would I be correct in saying that if I test the table through the browser preview the list will behave as it would were the site actually up and running on an internet server?


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

Walter, I just tried your sortable table action and it works great, save one problem. The little up and down arrows are being displayed under my header text.

Check it out here:
http://rcb.idealynx.com/models.html

What am I doing wrong? Also, can you walk me through styling the table as well?

Thanks!


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

Oops. Wrong link. Whenever I’m working with Perch I always forget to switch my page to php. Here’s the correct link: Thanks in advance for your help Walter.

http://rcb.idealynx.com/models.php


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

You have some conflicting style definitions for the padding property.

Freeway Pro is writing your table and header cells with an inline style
which includes “padding:5px”. Since an inline style definition has the
highest level of Specificity in the Cascade Order, it will always over-ride
any other style definition. Your table looks quite nice with that inline
padding removed. See -

http://cssway.thebigerns.com/workbench/du_jour/kelly-table-styling/

So the question becomes “why is Freeway Pro adding this inline padding
property?” Is it because of something you have done, and can undo? Or is
this something FWP does on it’s own and must be beaten into submission? For
me to answer this, I’d have to actually build a table with FWP…
unfortunately, I’m occupied with other stuff just this moment so I’ll leave
that to you.

By the way, you’ve inadvertently put some CSS for the “Menu drop shadow” in
an inconvenient Page Markup position – Before instead of Before

… you should also probably fix that. Also, there are other notes I've made in my markup of your page that I think will help better center your table.

And… is “null” valid property value for “height”???


Ernie Simpson

On Wed, May 15, 2013 at 5:37 AM, RavenManiac email@hidden wrote:

Oops. Wrong link. Whenever I’m working with Perch I always forget to
switch my page to php. Here’s the correct link: Thanks in advance for your
help Walter.

http://rcb.idealynx.com/models.php


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

You have some inline CSS in your table code (not sure how that got in there) that is overriding the tablekit CSS (linked in from my CDN). The tablekit CSS reserves space for the arrows by setting the padding-left in the TH to 16px. Your style is overriding that with padding of 5px, hence the crash.

Try removing all styles from the table altogether (in Freeway) and publish again. This includes any properties like cellpadding set on the table itself in the Inspector.

Then, to override the data-table styes, read the source of the TableKit stylesheet: http://cdn.freewaypro.com/tablekit/1.3/css/style.css and create new styles in your page head that match these selectors but either extend or override the settings you find there. That’s the cleanest way to do this.

Walter

On May 15, 2013, at 5:37 AM, RavenManiac wrote:

Oops. Wrong link. Whenever I’m working with Perch I always forget to switch my page to php. Here’s the correct link: Thanks in advance for your help Walter.

http://rcb.idealynx.com/models.php


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

On 15 May 2013, 12:41 pm, waltd wrote:

Then, to override the data-table styes, read the source of the TableKit stylesheet: http://cdn.freewaypro.com/tablekit/1.3/css/style.css and create new styles in your page head that match these selectors but either extend or override the settings you find there. That’s the cleanest way to do this.

Walter

Not entirely sure how to do this. Do I simply create a new style such as this in the Style Box?

Tag: .sortable tr.rowodd Name: Blank

Extended

Name: background-color

Value: FF7700


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

On 15 May 2013, 12:12 pm, The Big Erns wrote:

By the way, you’ve inadvertently put some CSS for the “Menu drop shadow” in
an inconvenient Page Markup position – Before instead of Before
… you should also probably fix that. Also, there are other notes
I’ve made in my markup of your page that I think will help better center
your table.

And… is “null” valid property value for “height”???

Good catch Ernie. Thanks.

Not sure where the “null” value is coming from. I’ll have to look into that.


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

On 15 May 2013, 12:12 pm, The Big Erns wrote:

Your table looks quite nice with that inline

padding removed. See -

http://cssway.thebigerns.com/workbench/du_jour/kelly-table-styling/

Okay, now you’re just teasing me. How are you styling that table?


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

LOL. You’re too funny. Okay, so where do I put that in my FWP document?

/* YES, I HAVE ADDED THIS CODE TO MAKE YOUR TABLE LOOK NICER */
    .sortable th, .sortable td { 
    	padding: 9px 6px 9px 16px; 
    	}

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

I think I figured it out. Let me try.


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

On 15 May 2013, 12:12 pm, The Big Erns wrote:
By the way, you’ve inadvertently put some CSS for the “Menu drop shadow” in
an inconvenient Page Markup position – Before instead of Before
… you should also probably fix that. Also, there are other notes
I’ve made in my markup of your page that I think will help better center
your table.

Ernie, I got it to work, but the ONLY way I was able to do so was to put the drop down menu code and the table code in the Before section. It wouldn’t work in the <Before area.

Should I put all of my drop down code in the Before section?


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

Initially, I used the Inspect Element feature of my browser (Safari,
Firefox, Chrome) to find the problem. Since that tool meant I would have to
affect changes line by line, I turned to a different tool -

All I did was View Source in my browser, then copy and paste that to Coda 2…

Then I added the element to fix the relative links issue.

Then I gave your code a quick look over, used the Tidy plugin for Coda to
make it even more readable. Identified your problem, used Search and
Replace to get rid of the table head/cell inline styles so Walter’s code
could apply. Then made my other edits while watching the live preview.

Saved, uploaded, replied to your email. Elapsed time: 5 minutes easy.


Ernie Simpson

On Wed, May 15, 2013 at 9:27 AM, RavenManiac email@hidden wrote:

I think I figured it out. Let me try.


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

Technically, style code can exist anywhere along the Cascade flow down to
the item being styled. BUT… as a matter of best practices, the head section
is the best in-document location for it. In FWP, that is the before
section.

I think, however, that you are woefully mistaken about it not working
because of the position… maybe something else is at play, but putting it
before IS where you SHOULD put it. Anything else, unless otherwise
clever-ish, just looks unprofessional.

Ernie, I got it to work, but the ONLY way I was able to do so was to put

the drop down menu code and the table code in the Before section.
It wouldn’t work in the <Before area.


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

Okay, this is the same code positioned Before area:
http://rcb.idealynx.com/models.php

As you can see, the page breaks at the comment.


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

I didn’t look at your page that closely, but here’s the basic rule. If it’s JavaScript, and it’s supposed to alter elements in the HTML, then you have to do one of two things to ensure that the JavaScript has access to the DOM (document object model).

  1. Put the script block after the element(s) that you are trying to affect.
  2. Wrap the script in an unobtrusive “listener” function that will wait until the DOM is stabilized before running the code inside it.

For example:

<div id="foo">Some text</div>

<script type="text/javascript">
	document.getElementById('foo').style.color = 'green';
</script>

That will work, because #foo exists at the time that the script runs (which is the instant that the browser encounters it in the flow of code). If the script tag was just above the div, then it wouldn’t work (you’d get an error that you couldn’t change the style on null or undefined).

For the second example, I have to rely on Prototype, cause I don’t remember the syntax off-hand to do a listener for the dom ready event.

<script src="path/to/prototype.js"></script>
<script type="text/javascript">
	document.observe('dom:loaded', function(){
		$('foo').setStyle('color:green');
	});
</script>
</head>
<body>
<div id="foo">Some text</div>

The document.observe construction here is creating an event listener function in JavaScript, which waits until the browser signals the all-clear – that all of the DOM described in the source is loaded into memory and ready to accept modification. Depending on the complexity of your page, this may be quite a while after things start to “paint” to the screen.

Walter

On May 15, 2013, at 9:57 AM, RavenManiac wrote:

On 15 May 2013, 12:12 pm, The Big Erns wrote:
By the way, you’ve inadvertently put some CSS for the “Menu drop shadow” in
an inconvenient Page Markup position – Before instead of Before
… you should also probably fix that. Also, there are other notes
I’ve made in my markup of your page that I think will help better center
your table.

Ernie, I got it to work, but the ONLY way I was able to do so was to put the drop down menu code and the table code in the Before section. It wouldn’t work in the <Before area.

Should I put all of my drop down code in the Before section?


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