Large sortable table (html + javascript) - how?

itweb · June 23, 2009, 02:03:25 AM

Howdy,

I am using SMF + TP and have a need to include a pretty large table.
It looks like it could be done using a frontpage block, maybe an article.

It's html table and some javascript for sorting and filtering.
Here is the source script I planned on using:
http://ideamill.synaptrixgroup.com/?p=17

My current problems are:
1. html code is large and will be growing. TP html+script block chops it at the certain point. Is there any way around it?
2. html code calls some js files, which originally are located in 4 folders. Without rewriting html code (there are dozens of calls), where would I upload these 4 folders containing js files to make it to work.
3. If #1 fails, is there a way to call external html file (to keep the structure like in original)?
4. If #2 fails, do I have to include the contents of js files in html file?
5. So far, I can make the table appear as the frontpage block but the GO button does nothing, hence no sorting and filtering options appear.

Or, is there a TP table script available already? (has to be sortable and filterable and allow for huge tables)

Thanks for help, folks!

IchBin · June 23, 2009, 04:53:20 PM

1. I wouldn't know unless you told us some information about your setup. Please read the Posting Guideliness

2. Most likely you need to put a full path to the files.

3. In php you can include any file .If your php configuration allows files can even be included from outside your site.

4. 2 should not fail if you provide the full path.

5. This is the problem with using forms inside articles. A form has to submit to a certain page. You have to figure out how you can include the code in the page, and have it submit to the right page.

itweb · June 25, 2009, 06:52:05 AM

Sorry I didn't include enough details.
Here we go.

My test site: http://www.legia.us.com
SMF version: 1.1.9
TP version: v1.0 beta 4
Theme name and version: Default
Browser Name and Version: Firefox 3.0.11
Mods installed: None
Related Error messages: None AFAIK

Script I plan on using:
http://ideamill.synaptrixgroup.com/?p=17

Here is demo of script working (make sure to turn on JS in your browser):
http://ideamill.synaptrixgroup.com/jquery/tablefilter/tabletest.htm

It consists of html file and 4 folders with some .js files, images and stylesheets.
The important portion of the html file:

Code Select

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv=Content-Type content="text/html; charset=us-ascii">

<link rel="stylesheet" type="text/css" href="includes/tableFilter.css">

<link rel="stylesheet" type="text/css" href="includes/tableFilter.aggregator.css">

<title>jQuery tableFilter normal table test</title>

<style>

body {

	font-family:Calibri, tahoma, arial, sans-serif;

}

table {

	font-size:12px;

	font-family:Calibri, tahoma, arial, sans-serif;

	white-space:nowrap;

	border-collapse:collapse;

	background-color:#FFFFFF;

}

td {

	padding:2px;

}

tr {

	height:20px;

	border:.5pt solid #F79646;

	background-color:#FFFFFF;

}

.offColor {

	background-color:#FDE9D9;

}

.header { 

	text-align:center;

	background-color:#F79646;

	color:white;

	font-weight:bold;

}

.header a{

	color:white;

}

</style>



<script type="text/javascript" src="_dist/jquery-packed.js"></script>

<script type="text/JavaScript" src="_dist/jquery.cookies-packed.js"></script>

<script type="text/javascript" src="_dist/prototypes-packed.js"></script>

<script type="text/javascript" src="_dist/json-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.truemouseout-packed.js"></script>

<script type="text/javascript" src="_dist/daemachTools-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.tableFilter-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.tableFilter.aggregator-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.tableFilter.columnStyle-packed.js"></script>





<!--



<script type="text/javascript" src="_dist/jquery-packed.js"></script>

<script type="text/JavaScript" src="_dist/jquery.cookies-packed.js"></script>

<script type="text/javascript" src="_dist/prototypes-packed.js"></script>

<script type="text/javascript" src="_dist/json-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.truemouseout-packed.js"></script>

<script type="text/javascript" src="_dist/daemachTools-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.tableFilter-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.tableFilter.aggregator-packed.js"></script>

<script type="text/javascript" src="_dist/jquery.tableFilter.columnStyle-packed.js"></script>





<script type="text/javascript" src="../lib/src/jquery.js"></script>

<script type="text/JavaScript" src="../lib/src/jquery.cookies.js"></script>

<script type="text/javascript" src="../lib/src/prototypes.js"></script>

<script type="text/javascript" src="../lib/src/json.js"></script>

<script type="text/javascript" src="../lib/src/jquery.truemouseout.js"></script>

<script type="text/javascript" src="../daemach/src/daemachTools.js"></script>

<script type="text/javascript" src="src/jquery.tableFilter.js"></script>

<script type="text/javascript" src="src/jquery.tableFilter.aggregator.js"></script>

<script type="text/javascript" src="src/jquery.tableFilter.columnStyle.js"></script>

<script type="text/javascript" src="../lib/src/jquery.debug.js"></script>

-->



</head>

<body>

<h3>Normal Table Test</h3>

This table consists of 86 rows, 774 total cells.  (<a href="mediumtabletest.htm">not big enough for you?</a>)<br>

Rather than auto-build the table on page load, the button allows you to control the process so you can get a better sense of the speed.    

<hr /> <input onClick='$("table").eq(0).tableFilter();' type="button" value="Go">  (ctrl-click to sort/filter multiple columns)

<hr />

<table>
...
all the table stuff
...

As the website will be built around this table, I plan on using a frontpage block full width that would contain this table. Maybe 1 panel visible, not decided which one yet.

Now, coming back to my points and your responses:

1. Html code is big and will be growing. Can block handle it?
2. Do you mean I should rewrite the html code to have non-relative paths?
- in order to not have to do it, is there a location in SMF/TP install that would treat these folders as relative?
3. I would appreciate help on including an external html file. That could possibly solve at least part of my problems here. Is this Dragoon writeup what I need? (http://www.tinyportal.net/index.php/topic,21681.0.html)
4. I tried changing paths for js files but it didn't do anything
5. There is some css mixup too

6. Just noticed - source code has some js calls to files not included with the script - the last block of js calls in html code

7. 4 folders are uploaded to root of SMF install, all except for above paths changed in html code.

8. The GO button really doesn't have to be there, if script can be active right away. Not sure how to do it

If you know about a good solution that I am not seeing here, don't hesitate to share. Maybe I started from the wrong side

Freddy · June 25, 2009, 11:00:02 AM

Not sure if this will work but have you tried setting it all up on it's own some place then use 'Import' an article ? So basically all you do is create an imported article in TP and get it to point to your table page..

JPDeni · June 25, 2009, 04:04:35 PM

Quote1. Html code is big and will be growing. Can block handle it?

The default setting for the body of a block is a "text" data type, which will hold 65535 characters. You can change that in the database (via phpMyAdmin, for example) to "longtext" which will hold 4294967295 characters.

If it was me, I'd store data in a database table instead of in the html, but that's just me.

Quote2. Do you mean I should rewrite the html code to have non-relative paths?
- in order to not have to do it, is there a location in SMF/TP install that would treat these folders as relative?

Absolute paths are likely to be better, but try going from the Sources directory as the "home" directory for relative paths.

QuoteI would appreciate help on including an external html file.

Using a php block, use the following:

Code Select


include('path/to/file.html');

4 -- you're going to have to change all paths or none of them.

5 -- probably a path problem, too.

6 -- you'll either need to get the files or call them remotely

7 -- I don't know what that means.

8 -- Can't help you with the javascript itself. I don't "do" js.

itweb · June 25, 2009, 04:37:54 PM

Quote from: JPDeni on June 25, 2009, 04:04:35 PM
Quote1. Html code is big and will be growing. Can block handle it?

The default setting for the body of a block is a "text" data type, which will hold 65535 characters. You can change that in the database (via phpMyAdmin, for example) to "longtext" which will hold 4294967295 characters.

If it was me, I'd store data in a database table instead of in the html, but that's just me.

Do you think it would run more efficient then? No idea how would I modify the script to work then, it's prolly too much for me to handle at my html/php knowledge

Quote
Quote2. Do you mean I should rewrite the html code to have non-relative paths?
- in order to not have to do it, is there a location in SMF/TP install that would treat these folders as relative?

Absolute paths are likely to be better, but try going from the Sources directory as the "home" directory for relative paths.

I tried that as well as installation root and some TP folders. No success. I guess all paths have to be absolute, if html code is included in the block.

Quote
QuoteI would appreciate help on including an external html file.

Using a php block, use the following:

Code Select Expand
include('path/to/file.html');

Thank you very much! My php knowledge is rather limited so I appreciate help. I will try it out. Now, in this case, folders can stay where they are in relation to html file so I wouldn't have to change the paths, right?

Quote4 -- you're going to have to change all paths or none of them.

I think I am on the right path now

Quote5 -- probably a path problem, too.

You are most likely right. I will see if the problem persists after I include the html file in php block as you suggested.

Quote6 -- you'll either need to get the files or call them remotely

I am still not sure what these files are and more important, WHERE they are on original demo server. I will figure it out sooner or later.

Quote7 -- I don't know what that means.

All I meant was the current state of my test site, www.legia.us. Code in html block, paths changed for js files placed in folders in smf root folder. And it didn't work

Quote8 -- Can't help you with the javascript itself. I don't "do" js.

Well, I will see if I need more help with js itself. Hopefully not :up:

JPDeni · June 25, 2009, 04:44:08 PM

QuoteDo you think it would run more efficient then? No idea how would I modify the script to work then

Then probably better not to. I don't know enough about js to be able to help you.

QuoteNow, in this case, folders can stay where they are in relation to html file so I wouldn't have to change the paths, right?

I think so.

I always have a problem with paths and just try everything I can think of until I get it to work.

itweb · June 25, 2009, 05:24:35 PM

OK, I got the php block and included the htm file which worked fine. CSS is still untouched so table looks the same way as before.

One problem persists:
The GO button (that makes the sorting and filtering fields appear) still doesn't work.

Code Select

<input onClick='$("table").eq(0).tableFilter();' type="button" value="Go">

It does work if you go straight to the file:
http://www.legia.us/table/TableTest.htm

Again, I don't really need the go button. If there is an easier way just to show the table with sorting fields right away, it's great too.

itweb · June 25, 2009, 06:03:40 PM

Still struggling to make the js to work.

I included js and css calls in index.template.php before </head> like this (folders are uploaded to theme's root):

Code Select

<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/includes/tableFilter.css">

<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/includes/tableFilter.aggregator.css">

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/jquery-packed.js"></script>

<script type="text/JavaScript" src="', $settings['default_theme_url'], '/_dist/jquery.cookies-packed.js"></script>

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/prototypes-packed.js"></script>

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/json-packed.js"></script>

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/jquery.truemouseout-packed.js"></script>

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/daemachTools-packed.js"></script>

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/jquery.tableFilter-packed.js"></script>

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/jquery.tableFilter.aggregator-packed.js"></script>

<script type="text/javascript" src="', $settings['default_theme_url'], '/_dist/jquery.tableFilter.columnStyle-packed.js"></script>

Now the table behaves like it wanted to expand to allow for that extra couple rows of sorting and filtering fields but it doesn't do it

Lesmond · June 25, 2009, 10:44:35 PM

Could you pull this into your article using an Iframe

Code Select

<iframe src="http://www.your-page.com"></iframe>

Recent

User

Stats

Members

Stats

Users Online

Large sortable table (html + javascript) - how?

itweb

IchBin

itweb

Freddy

JPDeni

itweb

JPDeni

itweb

itweb

Lesmond