Need guidance for UI modules, sortable data

[bongomania]

Hi all,

I have a database table of about 150 items and growing.  For each item there are about 20 data points, so the table has 150 rows and 20 columns.  The data in the columns is just a digit from 0 to 9.  The "item" name column is just a text field, linked to a URL.

I need help with two different UI's:

On the visitor side, I need them to be able to select a few (say 4 or 5) data points (columns) that are most relevant to their search, so the the table will be re-ordered to display the items that have the highest total numerical value (selected data columns added up) at the top.

On the back end, I need a simple data-entry panel for adding new items.  One field for the name, 20 labeled fields for their respective data points.  Of course it should automatically populate the publicly-visible page.

So, can you recommend any particular modules or other products or approaches to these needs?

I already have PWire installed with no hassle, but I have not gotten much further than that yet.

Thanks!

[diogo]

In PW the best way is to think of each repetition of data as an individual page. The best approach in your case would be to create a page "table" and have the rows as children pages of that one. those pages would have their own template "row" (names are just as example) wish would hold all the fields that correspond to your columns. Everytime you want a new row on the table you just have to create a new page as child of the "table" page.

To convert these pages to table rows in the frontend is as easy as this:

foreach($pages->get("/table/")->children as $row){
    echo "<tr><td>{$row->field1}</td><td>{$row->field2}</td><td>{$row->field3}</td><td>{$row->field4}</td></tr>";
}

This is only one part of the answer, but I have to go now... hope it gives you some light.

[MatthewSchenker]

Greetings bongomania,

One of the things that makes ProcessWire so amazing is how easy it is to link data at all levels with your styling/output concepts.

As diogo shows, displaying your results in a table is easy.

And you can get really fancy without too much more effort.  I'm working on a project now where the client wants to be able to sort various fields of data, and I am using the JQuery DataTables plugin: http://www.datatables.net/index

With this plugin, you can "foreach" through your pages as table rows, and then loop through fields in each page as table data, and make them sortable and styled beautifully.

Starting from there, and the possibilities grow and grow...

Thanks,

Matthew

[bongomania]

Thanks to both of you!  Can that JQery plugin be installed into PW?  I understand PW isn't JQuery, but can it be made to work together?

[diogo]

You don't need to install jQuery in pw, you use it as any other script. Drop the file in the scripts folder and link to it from the html head. (The default install already comes with the file jquery-1.4.2.min.js, but you might want to download another version). Or simply link to a jQuey CDN on the web (http://code.jquery.com/ or https://developers.google.com/speed/libraries/devguide#jquery).

Anyway, by using Mathew's solution, you have to be aware that you will have to list all the rows from the table, and hide them with javascript to paginate (I see that it also does server side, but didn't went deep on investigating). This means that processwire will have to pull all the results, wish might be a waste of memory. Best solution would be to render the table with a limited amount of results depending on the user choice. For this you will need the pagination module http://processwire.com/api/modules/markup-pager-nav/

[SiNNuT]

Also wanted to add that you can take a look at http://modules.processwire.com/modules/data-table/ for some inspiration. It's listed as 'non-stable' and works as a back-end module but maybe it can be of some help.

[MatthewSchenker]

Greetings Everyone,

I am building a site for a public television station using ProcessWire, and I am making use of JQuery datatables to allow admins to display and sort show listings.

NOTE: The site is in its very early stages at the moment, but I wanted to at least show how I'm using databales with ProcessWire.  It's pretty incredible how much you can do combining ProcessWire with DataTables!

To see a page in progress, with 533 listings, look here: http://50.22.43.61/~wnpt/tennessee-crossroads-listings/

Thanks,

Matthew

[ryan]

To see a page in progress, with 533 listings, look here: http://50.22.43.61/~...roads-listings/

 

Very nice! But it took a long time to load here. Not sure if that's because of the connection that IP is going through, or if it's the result of loading and rendering data for 533 pages (?) in one request. But if you are loading that many pages in one request, it's good to keep in mind that you can only scale so far using that method. Eventually, you'll fill up memory if that table keeps growing. If it's not going to keep growing, then you may want to at least cache it with MarkupCache. Usually if I'm rendering something that's reusable and has 50+ pages loading as a result, I use MarkupCache to cache the output. 

[MatthewSchenker]

Greetings,

Thanks Ryan...

Yes, at the moment I am simply showing what's possible, so the table loads all 533 pages and all 58 fields at once! This is NOT the way it will work when the site launches. However, it's a good test in a way because it's loading all of that data -- and on a shared server. ProcessWire performs well!

For the real site, only maybe 10 fields will be included in the table, and I am planning to have the user choose pre-filters before the table renders.

I really like using DataTables with ProcessWire. In fact, the two are similar in their attention to detail and clean code. With a little creativity, DataTables can be part of a custom ProcessWire interface for clients. More on that later!

Thanks,

Matthew