I have developed a range of add-ons for webtrees available only from my kiwitrees.net web site: kiwitrees.net/simpl-add-ons/. For any queries related to those items contact me direct from that site.
  • Page:
  • 1

TOPIC:

Table formatting in simpl-pages module 8 years 7 months ago #1

  • redheadkelly
  • redheadkelly's Avatar Topic Author
  • Visitor
  • Visitor
Nigel... I was just checking out your Our Families site & I'm curious how you achieved the table formatting on your Web Links pages. They are formatted & sortable like tables on the Lists pages of webtrees, also like the weblinks pages in Joomla. What's your trick? ;)

Thanks!

Please Log in or Create an account to join the conversation.

Table formatting in simpl-pages module 8 years 7 months ago #2

  • ToyGuy
  • ToyGuy's Avatar
  • Offline
  • Moderator
  • Moderator
  • Live like it's Christmas every day - Santa Stephen
  • Posts: 4925
Kelly
Simply a creative use of the jQuery datatables.
Santa Stephen the Fabled Santa
Latest webtrees at MyArnolds.com
Hosted by webtreesonline.com , a division of GeneHosts LLC
MacOS 10.6.8, Apache 2.2+, PHP 5.4.16, MySQL 5.5.28

Please Log in or Create an account to join the conversation.

Table formatting in simpl-pages module 8 years 7 months ago #3

  • kiwi
  • kiwi's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Posts: 4986
No trick - just some insider knowledge :-)

They use just the same datatables js code that webtrees uses on all its list pages. The web links page you saw is the simplest interpretation. This one is more complex as it pulls data from a database table: www.our-families.info/module.php?mod=sim...on=show&pages_id=471

To create one like my web links just requires a couple of things:
1 - make sure your data is in a normal html table structure (I recommend you do all this in raw HTML. Don't try and use the WYSIWYG editor, its too messy)
2 - That structure must be a complete one, i.e using thead, th, tbody tags correctly. (You can see mine by just using "View source" in your browser)
3 - Give the table itself a unique id.
4 - Add something like this at the BOTTOM of your page, after the tables and anything else you include:
<script type="text/javascript" language="javascript" src="js/jquery/jquery.min.js"></script><script type="text/javascript" language="javascript" src="js/jquery/jquery.dataTables.min.js">
</script><script type="text/javascript">jQuery('#your table id').dataTable({
	"sDom": '<"H"pf<"dt-clear">irl>t<"F"pl>',
	"sPaginationType": "full_numbers",
	"bJQueryUI": true,
	"iDisplayLength": 20,
	"aoColumns": [
            /* 0 Site */ {"sClass": "nowrap"},
            /* 1 Descr*/ {}
	]
     });
</script>

But this is for a simple two-column display. But to understand all the settings that code includes, and adapt more to your own requirement, head to datatables.net and start a crash course. Its a powerful tool!
Nigel

www.our-families.info

Hosted at:
Follow me at:

Please Log in or Create an account to join the conversation.

Last edit: by kiwi.

Table formatting in simpl-pages module 8 years 7 months ago #4

  • redheadkelly
  • redheadkelly's Avatar Topic Author
  • Visitor
  • Visitor
OK... yay! Thanks so much.

This is an area I really haven't ventured into before, so it will be good experience for me.

Can I use the custom JavaScript module to put the code in the footer? Is there something special I have to do since I already have the Google Analytics code there? Do I have to separate them some way or can I just paste it right after?

Or I guess I just need the Javascript on the one page that is going to display my weblinks table, right?

Please Log in or Create an account to join the conversation.

Table formatting in simpl-pages module 8 years 7 months ago #5

  • kiwi
  • kiwi's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Posts: 4986
No, you absolutely MUST put the js code only in the page you want it on, i.e. in the simpl_pages contents, with your data.

You must also add something similar on any other simpl_pages you add where you want to display content in this way. Each instance of that js can only function with a single uniquely ID'd table.
Nigel

www.our-families.info

Hosted at:
Follow me at:

Please Log in or Create an account to join the conversation.

Last edit: by kiwi.

Table formatting in simpl-pages module 8 years 7 months ago #6

  • redheadkelly
  • redheadkelly's Avatar Topic Author
  • Visitor
  • Visitor
OK... that was super easy & quick. My basic table is already done. But I will take a look at datatables.net & see what I can learn.

Thanks for the suggestion.

Please Log in or Create an account to join the conversation.

Table formatting in simpl-pages module 8 years 7 months ago #7

  • kiwi
  • kiwi's Avatar
  • Offline
  • Platinum Member
  • Platinum Member
  • Posts: 4986
Told you there was no trick to it :-))

I went to look at your list, but your site is locked down :-(

However I did notice that you are still using the default family tree title "Genealogy from [North Carolina to Smith County]" You do realise you can change that, don't you? Its not particularly attractive like that, IMHO. Administration > your family tree > General tab > Family tree title You can set the title (completely different to file name) to whatever you want, within reason.
Nigel

www.our-families.info

Hosted at:
Follow me at:

Please Log in or Create an account to join the conversation.

Table formatting in simpl-pages module 8 years 7 months ago #8

  • redheadkelly
  • redheadkelly's Avatar Topic Author
  • Visitor
  • Visitor
Oh no. I didn't realize I could change that. Thanks. I'm actually the only user on my site so far. Ha. Health problems keep me from being very responsive, so I don't want to be in charge of anything that requires attention. Your software has been a Godsend, though. It has given me something to be passionate about since I don't really get to go out & do anything. :)

I recently went so far as to modify my theme, though. I guess changing my Title & then my logo is the next step.

When my current brain fog clears a little, maybe I will look at the my security settings to see how I can make some of the site accessible without it becoming something I really have to pay attention to. It's that double-edged sword. It's great that it's so customizable, but then you really have to have the brain power to figure it out. Ha. I went the easy route of just closing the whole thing. Ha.

Please Log in or Create an account to join the conversation.

Do you need a web hosting solution for your webtrees site?
If you prefer a host that specialises in webtrees, the following page lists some suppliers able to provide one for you: 

Table formatting in simpl-pages module 8 years 7 months ago #9

  • redheadkelly
  • redheadkelly's Avatar Topic Author
  • Visitor
  • Visitor
BTW... just found your kiwitress site today. Thanks for sharing all of your add-ons with the rest of us that don't buy hosting from you. Very generous. Someday, when I feel better, I would love for my site to be something that brings people together to share & discuss. Your pages & menus will go a long way to make it what I want.

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Powered by Kunena Forum