Bienvenue, Invité
Nom d'utilisateur : Mot de passe :


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.

SUJET : Table formatting in simpl-pages module

Table formatting in simpl-pages module il y a 7 ans 2 semaines #1

  • redheadkelly
  • Portrait de redheadkelly
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!
L'administrateur a désactivé l'accès en écriture pour le public.

Table formatting in simpl-pages module il y a 7 ans 2 semaines #2

  • ToyGuy
  • Portrait de ToyGuy
  • Hors Ligne
  • Moderator
  • Live like it's Christmas every day - Santa Stephen
  • Messages : 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
L'administrateur a désactivé l'accès en écriture pour le public.

Table formatting in simpl-pages module il y a 7 ans 2 semaines #3

  • kiwi
  • Portrait de kiwi
  • Hors Ligne
  • Platinum
  • Messages : 4963
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:
Dernière édition: il y a 7 ans 2 semaines par kiwi.
L'administrateur a désactivé l'accès en écriture pour le public.

Table formatting in simpl-pages module il y a 7 ans 2 semaines #4

  • redheadkelly
  • Portrait de redheadkelly
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?
L'administrateur a désactivé l'accès en écriture pour le public.

Table formatting in simpl-pages module il y a 7 ans 2 semaines #5

  • kiwi
  • Portrait de kiwi
  • Hors Ligne
  • Platinum
  • Messages : 4963
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:
Dernière édition: il y a 7 ans 2 semaines par kiwi.
L'administrateur a désactivé l'accès en écriture pour le public.

Table formatting in simpl-pages module il y a 7 ans 2 semaines #6

  • redheadkelly
  • Portrait de redheadkelly
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.
L'administrateur a désactivé l'accès en écriture pour le public.

Table formatting in simpl-pages module il y a 7 ans 2 semaines #7

  • kiwi
  • Portrait de kiwi
  • Hors Ligne
  • Platinum
  • Messages : 4963
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:
L'administrateur a désactivé l'accès en écriture pour le public.

Table formatting in simpl-pages module il y a 7 ans 2 semaines #8

  • redheadkelly
  • Portrait de redheadkelly
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.
L'administrateur a désactivé l'accès en écriture pour le public.
Avez-vous besoin d'une solution d'hébergement web pour votre site webtrees ?
Si vous préférez un hébergeur spécialisé de webtrees, la page suivante en liste quelques-uns capables de vous offrir ce type de service :

Table formatting in simpl-pages module il y a 7 ans 2 semaines #9

  • redheadkelly
  • Portrait de redheadkelly
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.
L'administrateur a désactivé l'accès en écriture pour le public.
Propulsé par Kunena