Dynamic Table

[Spritemarkiv]

Dynamic Table
* This module modifies static wysiwyg(or code) tables, and makes them dynamic and interactive. Using the Jquery plugins: DataTables by Allan Jardine.
Features
* Table is sortable, filterable, paginated
* Show/Hide individual columns
* Floating header
* The jquery datatables plug-in uses native translations in many languages.
* Data is exportable to Clipboard,Excel, CSV, and Print using the table tools plug-in.

Five easy steps to get it to work.

   1. Create a page with a table
   2. Make sure the table has an id for example:

Code:

<table id="my_table">

  3. Make sure the table has a header row
   4. Add a dynamic table section to the page
   5. Add the table id and click save

Bonus
 *This module can also work with other modules.  For example, if you have a table that is created dynamically using the code module.

Tested on
* WB2.8.1

Download at AMASPhttp://www.websitebakers.com/pages/modules/interaction/dynamic-table.php

[pcwacht]

Do you have a demo handy?
John

[Spritemarkiv]

http://www.karlpiercedesign.com/pages/web-design/website-baker-modules/dynamic-table/dynamic-table-demo.php

Have fun!

[pcwacht]

Looks impressive.

Looks better than my solution, hardcoded in template -> http://www.scholenmarktamersfoort.nl/pages/alle-scholen-op-een-rij.php
is Dutch

Why the swf?

John

[Spritemarkiv]

Hi John,
The swf is used by the tabletools plug-in. This is the tool that lets you export the content of the table. I did not write this part only porting it to WB, so I can't really comment on why or how it is used.

[pcwacht]

Ah, ok , thanks

[nuke]

Great module - is there anyway to make it sort descending instead of ascending (when it is first loaded)? I have the first column as dates and it is showing 1987 first instead of 2010 (I'd prefer the newer years were at the top without the visitor having to click the heading)

Thanks!
-Mike

[pcwacht]

Look here for more info:
http://www.datatables.net/examples/basic_init/table_sorting.html

Have fun,
John

[nuke]

Look here for more info:
http://www.datatables.net/examples/basic_init/table_sorting.html

Thanks John for that speedy reply, helped a lot - for others I just added
      "aaSorting": [[ 0, "desc" ]],
Around

//load  DataTable

(I placed it between "bSortClasses": true, and "bAutoWidth":true )

In the view.php - it works great!

-Mike

[janarie]

Hi,

I tried the module, it is working fine with Google chrome, but I got an error with IE 7.
I did not try IE 8 so far.

Jan Arie

[Spritemarkiv]

Hi Jan,
It does work in IE8,IE9(using IE tester) and the current versions of FireFox, Chrome, Safari and Opera.

In IE<8 the data is still shown, making it backward compatible.

There is an extra comma in the "oFeatures" object in view.php around line 105

Code:

"oFeatures": {
<?php if ($settings['export_csv']==1) {echo"\"bCsv\": true,";}?>
<?php if ($settings['export_excel']==1) {echo"\"bXls\": true,";}?>
<?php if ($settings['export_clipboard']==1) {echo"\"bCopy\": true,";}?>
<?php if ($settings['export_print']==1) {echo"\"bPrint\": true,";}?>
},

With this comma IE7 and IE6 will say that it can not open the site.  With out the comma it opens with an error and will not let the JS run.  Anyone have a cure for this?

[Argos]

Yes, I also have errors when using the module in IE7 and 8. But the official demos from DataTables work fine in these browsers, so it looks like there is something wrong in the module and not in the jquery script itself.

If the module would be error free, I would love it to have support for multiple column filtering, like shown on http://www.sprymedia.co.uk/dataTables/example_multi_filter.html (but with the filter input boxes above the table, instead of below). I already tried to get this working with the module, but to be honest I don't have a clue where and how to use it... So if anyone would give me a hand there, I would be most grateful!

[marmot]

Hi,

@Argos: can't see a problem with IE8. Maybe you should install the module on a clean wb installation to prevent correlation with other modules you have installed?

With this comma IE7 and IE6 will say that it can not open the site.  With out the comma it opens with an error and will not let the JS run.  Anyone have a cure for this?

The problem seems to be with fixed header.  I only can test IE7, but when i switch off the fixed header everything is ok. The reason for that problem is in FixedHeader.js /FixedHeader.min.js. In line 290: 

Code:

document.body.appendChild( nDiv );

I assume that this is a problem for IE 6/7 as long as there is a script at the end of the body tag. In my case there is a script from fancybox. So change this line to

Code:

document.body.insertBefore( nDiv, document.body.firstChild );

as the position of nDiv is absolute. In IE 7 the header seems a bit bumpy but this might be a other problem. For those who don't like editing i append a patched FixedHeader.min.js file. (Change the file extension to js).

regards

[Argos]

@Argos: can't see a problem with IE8. Maybe you should install the module on a clean wb installation to prevent correlation with other modules you have installed?

Doesn't make a difference. Your own demo has the same errors. Try http://www.karlpiercedesign.com/pages/web-design/website-baker-modules/dynamic-table/dynamic-table-demo.php in IETester (or a standalone browser). Both 7 & 8 give errors.

[Spritemarkiv]

Found a partial solution.

Change view.php lines 152 to the end

Code:

                       //add the Datatable plugin fixed header
$(document).ready( function () {
var oTable = $( "#<?php echo $settings['table_name_input'];?>").dataTable();
new FixedHeader( oTable );
} );
</script>

Also, remove the last comma from "oFeatures" object in view.php around line 105

Tested with IETester and it works* with IE 6,7,8( works but with an error from ZeroClipboard.js)  Also works in FF,Opera, and Safari current versions.  No need to modify FixedHeader.min.js file.  Does not work with IE5(but who really cares!)

I'll create an update of the module and post it on AMASP.

[Spritemarkiv]

I may have spoke to soon.  It seem like my version of IE tester is buggy. Sometimes it works some times it does not.

[Argos]

I tried, and the errors are gone, but so is the sorting function... 

[Spritemarkiv]

I've managed to get the Fixed header working in IE6,7,8 FF Chrome and Opera.  I haven't been able to get Table tools to work in IE any version (but on http://www.datatables.net/extras/tabletools/ it doesn't work either).

I had to move the Fixed header call into a frontend.js file so it posts into the head.  Doing this eliminates the ability to personalize the table id, but it's a small price to pay. Unless someone knows a cool way to pass a variable to the frontend.js file.

 I'll clean up the code and post it tomorrow, because I'm out of time.

[Argos]

It would be best to keep installing as standard as possible, and do all the admin things in the backend. Otherwise the module has limited advantages above doing it all manually with the original datatables files.

[Argos]

I haven't been able to get Table tools to work in IE any version (but on http://www.datatables.net/extras/tabletools/ it doesn't work either).

I'm perplexed. I would have sworn to have tested it on IE7/8 and it worked. But when I try again, it doesn't work at all. You're right. Well, then the whole thing is rather useless, as IE7/8 will be used by many users for a long time...

[pcwacht]

http://www.datatables.net/extras/tabletools/ works in IE8 at my pc w7 64bit, used bot 32bit and 64bit IE versions?

[Argos]

I tried again with IETester, and now IE7 gives errors and doesn't sort, but IE8 works allright. I don't have a clue where the different situations come from. This afternoon nothing worked... Anyway, it's too buggy to use in a live site right now. I hope the bug(s) will be found!

[marmot]

Hi,

Doesn't make a difference. Your own demo has the same errors. Try http://www.karlpiercedesign.com/pages/web-design/website-baker-modules/dynamic-table/dynamic-table-demo.php in IETester (or a standalone browser). Both 7 & 8 give errors.

Why try IE 8 with IE tester or standalone when having IE 8 installed? IE tester ist alpha. Your link works fine with my IE8 (WIN XP). No errors no display problems.
Which demo do you mean?
Did you change FixedHeaders file and cleared the browser cache? That was often confusing during my testing.
What happens if you disable FixedHeaders in backend?

I got exactly the behavior described by Spritemarkiv in IE7 and the patch on FixedHeaders file solved it.
A more brutal solution would be just to switch off Fixed Headers function for IE 6,7 (by script) but maybe the most recent idea from Spritemarkiv fixes it all.

regards

[Argos]

Well, I haven't IE8 installed anymore since I upgraded to IE9. So IETester is the only solution for me now. Actually IETester is Alpha, but it's always like that. It's pretty reliable in acting like the genuine IE7/8 (i know from when I still got those versions as standalone).

The demo I refer to is the one I mention in that same sentence of course 
But also the one from the original script.

Disabling FixedHeaders didn't change anything, nor did the suggested patches. That is, the errors changed, but it didn't solve it.

[Spritemarkiv]

New Version 0.2.0

http://www.websitebakers.com/pages/modules/interaction/dynamic-table.php

0.2.0
   * added the ability to export table to pdf
   * updated core Javascript files
   * Bug fix now displays properly in IE 6,7,8
   * Now table id must be "myDynamicTable"
   * Turning on and off Table tools via backend temporarily suspended

Know Bug
  *The Table Tools Export options are not currently working with IE

The Table Tools are working for this version the same as the JS authors demo http://www.datatables.net/extras/tabletools/ i.e. they don't work in IE.  I'll contact the JS author and see whats up.

You can also check out my demo at http://www.karlpiercedesign.com/pages/web-design/website-baker-modules/dynamic-table/dynamic-table-demo.php