ANNOUNCE: TSTable() template, sortable/filterable table generator

**guido** · 01-03-2012 03:02 PM

Hi Neil, fantastic template! And very good documentation too, since even I got it working. There is one thing I can not find out though, and that is how to reset the links in the template to local files. I did this, but it is obviously not correct:
var tablesorter_uri = "D:\Program Files\MindTouch\MindTouch\web\scripts\res\jquery\t stable\tstable.tablesorter.min.js";

**neilw** · 01-03-2012 06:10 PM

Dadeo:
What you want to feed to TSTable in this case is a list of page variables; specifically, a list of page variables for pages that link to the current page. Using the API to fetch the <inbound> list is on the right track, but your implementation has sort of gone off into the weeds.

First let's produce a working solution. Because you're interested in the current page, you can just use the page variable. Wiki.page(page.path) === page. After fetching the API data for the current page, we'll use xml.list() to fetch all the paths of inbound pages. Then we'll use wiki.getpage() to get the page variable for each one, using a list constructor to build it:

Code:

var x = wiki.api(page.api);
var data = [ wiki.getpage(path) foreach var path in xml.list(x,"//inbound//path") ];

You can now pass that data straight to TSTable. Your last two columns should work fine as-is, but you'll need to re-write the first, keeping in mind that $ is a page variable.

Foreach syntax can be a bit complex but it is consistent. You've read this article, right?

Now let's look at the code you posted to see where you went astray:
1) Putting TSTable *inside* your foreach loop. Unless your goal is to generate a bunch of tables, this is not going to work out well.

2) Passing the wrong kind of data to TSTable. Xml.text() just outputs a single text string. You want to pass a list of structures to TSTable. Think about what data you want to give to TSTable, and work backwards from there, as I did at the top of this post.
3) In your TSTable columns, your first column used eval code but doesn't reference $, pretty much guaranteeing bad results. In general, your first column definition doesn't seem to follow the same ground rules as the last two (which are clearly designed to operate on page variables.)

**neilw** · 01-03-2012 06:18 PM

Originally Posted by guido

Hi Neil, fantastic template! And very good documentation too, since even I got it working. There is one thing I can not find out though, and that is how to reset the links in the template to local files. I did this, but it is obviously not correct:
var tablesorter_uri = "D:\Program Files\MindTouch\MindTouch\web\scripts\res\jquery\t stable\tstable.tablesorter.min.js";

Well, it needs to be URI, and that is not a URI but rather a Windows file path. I do not have any clue about the directory structure of Mindtouch on Windows. Looking at what you just wrote there, I could speculate that this could work for you:

Code:

var tablesorter_uri = "/scripts/res/jquery/tstable/tstable.tablesorter.min.js";

But that is a guess.

**dadeo** · 01-04-2012 04:52 AM

@neilw - thank you SOOO much - I apologize for being such a noob, but I am a content manager with almost no experience in coding/scripts. Also, as our wiki is for an open source app, we all work as volunteers. So, I really shouldn't be attempting such things

, but everyone loves our TSTables so much and now I am screwed because they keep asking me to do them!!

Your solution worked very well with the following code:

Code:

var x = wiki.api(page.api);
var data = [ wiki.getpage(path) foreach var path in xml.list(x,"//inbound//path") ];
TSTable {
    options: { pager:true, zebra:true, width:"80%", nodata:"No changes yet for this control" },
    columns: [
    { key:"(web.link($.uri,$.title))", title:"Change" },
    { key:"(date.format($.revisions[0].date,'yyyy/MM/dd'))", title:"Date", width:"20%", initial:1 },
    { key:"(var t=$.tags; foreach(var x in t) { var s = string.split(x['name'], ':'); if(s != null && s[0] == 'rel'){ s[1] .. ' '}  })", title:"Release"}
    ],
    data: data
}

My only problem now is that I need to constrain the inbound links to subpages of a specific page. How do I do that? If you can even point me in the right direction (link to an relevant MT Wiki page) I can probably figure it out. I assume I want to specify a specific path for "var data = [ wiki.getpage(path) foreach var path in xml.list(x,"//inbound//path") ];" so I tried to add a 'var path = ' statement but either that is the wrong approach or I didn't get the syntax right (as usual!)

Here are some comments on your guidance/questions so you understand where I get lost.