Jump to content
bongomania

Need guidance for UI modules, sortable data

Recommended Posts

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!

Share this post


Link to post
Share on other sites

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites
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. 
  • Like 1

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By ngrmm
      I have a page with a table. Each table row has a page-reference field and a checkbox.
      The Page sends emails to all users (page-refrence->email-field) and change the value of the checkbox in a row to 1.
      It works with this:
      <?php // event ID fron url query $eventID = $input->get('eventID','int'); // get event-page $event = $pages->get($eventID); // config $fromEmail = $event->event_mail_from; $fromName = $event->event_mail_from_name; $emailSubject = $event->event_subject; // email html body ob_start(); include('./_inc/emailbody.inc'); $emailBody = ob_get_clean(); // make event-page editable $event->of(false); // loop through table and send out emails foreach($event->event_clients_list as $event_table_row) { // get client page $clientPage = $event_table_row->client_name; // get client email $clientEmail = $clientPage->email; // if client isn't invited yet (checkbox not checked) if($event_table_row->client_invited == '') { // send email $m = new WireMail(); $m->to($clientEmail); $m->from($fromEmail, $fromName); $m->subject($emailSubject); $m->bodyHTML($emailBody); $m->send(); // mark client as invited $event_table_row->client_invited = 1; $event->save('event_clients_list'); } } ?> But i have to use a variable in my emailbody.inc which i'm able to get in the table-loop.
      So i do the including of the body inside my loop. But this doesn't work anymore. Page sends out the emails but is unable to change the value of the checkbox.
      I get no errors!
      I'm using ProTable
      <?php // event ID fron url query $eventID = $input->get('eventID','int'); // get event-page $event = $pages->get($eventID); // config $fromEmail = $event->event_mail_from; $fromName = $event->event_mail_from_name; $emailSubject = $event->event_subject; // loop through table and send out emails foreach($event->event_clients_list as $event_table_row) { // get client page $clientPage = $event_table_row->client_name; // get client email $clientEmail = $clientPage->email; // email html body ob_start(); include('./_inc/emailbody.inc'); $emailBody = ob_get_clean(); // make event-page editable $event->of(false); // if client isn't invited yet (checkbox not checked) if($event_table_row->client_invited == '') { // send email $m = new WireMail(); $m->to($clientEmail); $m->from($fromEmail, $fromName); $m->subject($emailSubject); $m->bodyHTML($emailBody); $m->send(); // mark client as invited $event_table_row->client_invited = 1; $event->save('event_clients_list'); } } ?>  
    • By maba
      Hello,
      I need to import regularly - every 15 or 30 days - a big .xslx file into my PW installation.
      This file now has 14 columns, 5.000 rows and grows every month.
      I'll need to group, order and work with these data to:
      analyse User monthly costs analyse User costs per Asset ... User (real AD account) has to match with a PW user - I can't join to the domain - but as you can see I have some services users (start with sca_*) or no user at all. Those rows have to be assigned to a specific user, e.g. account100.
      And:
      I would like to be able to have a kind of diff function to compare User assets between this and last month (and so on) other request is to have a notification when something change for a User between actual and latest import First request: which is the best solution to store those data in your opinion? Page, Table, Repeater Matrix, ...?
      Those are very repetitive data and I think a page reference is better than to import all the data every time but I have to understand how to manage those "dynamic" groups of software (AccType Det), hardware (Asset), ... For example Price will be imported and not stored with the description because it could be change in the future and I'll not have any control on it.
      Thanks!
      User,OE,productNmr,AccType1,AccType Det,Count,Price (€),Sum,ASNA,CC,AccType Info,Asset,AccGroup,,,,,,,,,,,,,
    • By ttttim
      Is there a way to add a (new or existing) page to the top of the asmSelect list? By default they're added at the bottom. 
    • By DooM
      Hello guys,
      I'm trying to figure out how to sync fields and templates between staging and production environments.
      I've found Migrations module by Lostkobrakai, but with use of it all the fields and templates must be created by API, which is kind of uncomfortable.
      I also tried ProcessDatabaseBackups module which can export only certain tables, but I don't think it's the best practice to do that.
      How do you guys solve this problem? It's very annoying to setup everything three times (dev, staging, production).
      Thanks a lot :)
    • By Tyssen
      I have a page that contains a single ProFields table field and I want to display the contents of the table on the front end and then for logged in users, they can edit certain columns in the table.
      What I have at the moment is
      $out = '<form action="'.$page->url.'" method="post" > <table class="table"> <tbody>'; $count = 1; foreach($page->fieldName as $row) : $out .= ' <tr> <td><input type="checkbox" name="fieldName_'.$count.'_columnName"></td> </tr>'; if($input->post->submit) : $page->of(false); $page->set('fieldName_'.$count.'_columnName', $sanitizer->text($input->post->{fieldName_'.$count.'_columnName})); $page->save(); endif; $count++; endforeach; $out .= ' </tbody> </table> <button class="button" type="submit">Save</button> </form>'; The two problems I have are:
      I get an error trying from $sanitizer->text($input->post->{fieldName_'.$count.'_columnName}), not sure how to make that dynamic.  If I change the above to just a static value, e.g. $page->set('fieldName_1_columnName', 'Testing') and save the form, it's not saving the values to the database. Where am I going wrong?
×
×
  • Create New...