We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 47630
    • 56 Posts
    Using BloX & MIGXDB

    So far I got all the data displaying on the front end.

    What I am trying to do is:


    • Sort Descending
    • Auto Delete From Front End When Date Has Passed


    I want to give options to sort/filter by the following:


    • Sort/filter By Field Type
    • Sort/filter By Date

    Also, Pagination

    I can see +pagination in bloxouterTpl but I want to configure it to 20 results on each page, how can this be done?

    I find this in getdatas.class.php

            $numRows = $this->totalCount;
            require_once ($this->bloxconfig['absolutepath'] . 'inc/Pagination.php');
            $p = new Pagination(array(
                'per_page' => $this->bloxconfig['limit'],
                'num_links' => $this->bloxconfig['numLinks'],
                'cur_page' => $this->bloxconfig['page'],
                'total_rows' => $numRows,
                'page_query_string' => $this->bloxconfig['pageVarKey'],
                'use_page_numbers' => true));
    


    But I'm unsure where to input the limitation number.

    Any advice would be appreciated..........

    This question has been answered by Bruno17. See the first response.

      • 47630
      • 56 Posts
      After looking at various options I decided that a data table with child rows was my best option, so I've been trying to integrate TableSorter into my page.

      However I have encountered a odd situation where the data displays in the front end but for each row a new table is created. The Child rows work just fine, it is just for each row of data I have a table instead of 1 table for all rows.

      Here's a link to the page showing the issue: http://bit.ly/1uRJtuu

      I'm still using BloX to call the data, here's the code in my rowTpl file:

       <meta charset="utf-8">
      <!-- jQuery -->
      	<script src="js/jquery.min.js"></script>
      
      	<!-- Tablesorter: required -->
      	<link rel="stylesheet" href="../css/theme.blue.css">
      	<script src="../js/jquery.tablesorter.js"></script>
      	<script src="../js/jquery.tablesorter.widgets.js"></script>
      
      	<!-- Tablesorter: pager -->
      	<link rel="stylesheet" href="../css/jquery.tablesorter.pager.css">
      	<script src="../js/widget-pager.js"></script>
      
      <script>
      $(function() {
      
        $(".tablesorter")
          .tablesorter({
            theme : 'blue',
            // this is the default setting
            cssChildRow: "tablesorter-childRow",
      
            // initialize zebra and filter widgets
            widgets: ["zebra", "filter", "pager"],
      
            widgetOptions: {
              // output default: '{page}/{totalPages}'
              // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
              pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
              pager_removeRows: false,
      
      
              // include child row content while filtering, if true
              filter_childRows  : true,
              // class name applied to filter row and each input
              filter_cssFilter  : 'tablesorter-filter',
              // search from beginning
              filter_startsWith : false,
              // Set this option to false to make the searches case sensitive 
              filter_ignoreCase : true
            }
      
          });
      
        // hide child rows
        $('.tablesorter-childRow td').hide();
      
        // Toggle child row content (td), not hiding the row since we are using rowspan
        // Using delegate because the pager plugin rebuilds the table after each page change
        // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
        $('.tablesorter').delegate('.toggle', 'click' ,function(){
      
          // use "nextUntil" to toggle multiple child rows
          // toggle table cells instead of the row
          $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();
      
          return false;
        });
      
        // Toggle widgetFilterChildRows option
        $('button.toggle-option').click(function(){
          var c = $('.tablesorter')[0].config.widgetOptions,
          o = !c.filter_childRows;
          c.filter_childRows = o;
          $('.state').html(o.toString());
          // update filter; include false parameter to force a new search
          $('table').trigger('search', false);
          return false;
        });
      });
      </script>
      
      
      <div id="demo">
      
      	<div class="pager">
      		<img src="../assets/images/first.png" class="first" alt="First" />
      		<img src="../assets/images/previous.png" class="prev" alt="Prev" />
      		<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
      		<img src="../assets/images/next.png" class="next" alt="Next" />
      		<img src="../assets/images/last.png" class="last" alt="Last" />
      		<select class="pagesize" title="Select page size">
      			<option value="10">10</option>
      			<option value="20">20</option>
      			<option value="30">30</option>
      			<option value="40">40</option>
      		</select>
      		<select class="gotoPage" title="Select page number"></select>
      	</div>
      
      	<table class="tablesorter">
      	<colgroup>
      		<col width="85" />
      		<col width="155" />
      		<col width="155" />
      		<col width="100" />
      		<col width="100" />
      	</colgroup>
      	<thead>
      		<tr>
      			<th>Id No #</th>
      			<th>Collection City</th>
      			<th>Delivery City</th>
      			<th>Date</th>
      			<th>Cubic Metres Available</th>
      		</tr>
      	</thead>
      	<tbody>
      		<!-- First row expanded to reveal the layout -->
      		<tr>
      			<td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
      				<a href="#" class="toggle">[[+id]] - More info</a> <!-- link to toggle view of the child row -->
      			</td>
      			<td>[[+deptown]]</td>
      			<td>[[+arrtown]]</td>
      			<td>[[+freightdate]]</td>
      			<td>[[+cubmt]]</td>
      		</tr>
      		<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[+vehicletype]]<br></div></td></tr>
      		<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[+freightvehicledetail]]<br></div></td></tr>
      		<tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[+freightvehiclecontact]]<br></div></td></tr>
      		</tbody>
      </table>
      
      	</div>



      I posted this issue on the TableSorter Stackoverflow page & the owner asked me this;

      "Can you share the code you are using to update the table? Or, is an "update" being triggered on the table to refresh the cached values?"

      I have posted the above code & the BloX call but, I was wondering if the solution is on the BloX or Migxdb side.

      Does anyone have any ideas what might be causing this? [ed. note: jamesjazz last edited this post 12 years, 3 months ago.]
        • 47630
        • 56 Posts
        The owner of TableSorter has replied on StackOverflow.

        He is suggesting this is an issue with the way BloX calls the data.

        I'm not an expert coder but I feel this may not take too much to find a resolution, any kind souls out there who can see what is causing the multiple tables to appear?
          • 47630
          • 56 Posts
          Here's one of the questions raised on stackoverflow (referring to outerTpl in BloX):

          "As I said I don't know anything about the template system you're using, but this looks wrong to me <ul> [[+innerrows.row]] </ul> why are the rows within an unordered list?"

          Unsure about this so, i tried changing this to an ordered list, but it made no difference, i still get multiple tables :-(
            • 47630
            • 56 Posts
            Just set debug to 1 in BloX call & received the following on front end:

            Array
            (
                [path] => components/blox/
                [absolutepath] => /home/transpo2/public_html/core/components/blox/
                [packagename] => available-freight
                [limit] => 0
                [classname] => AvailableFreight
                [tpls] => bloxouter:outerTpl||row:rowaTpl
                [debug] => 1
                [id] => 
                [id_] => 
                [distinct] => distinct
                [projectname] => blox
                [resourceclass] => modTable
                [htmlouter] => div
                [project] => 
                [projectparent] => blox
                [projectpath] => components/blox/projects/blox/modTable/
                [task] => div
                [outputSeparator] => 
                [tplpath] => components/blox/projects/blox/modTable/div/templates/
                [includespath] => components/blox/projects/blox/modTable/div/includes/
                [cachepath] => components/blox/cache/
                [includesfile] => components/blox/projects/blox/modTable/div/includes/getdatas.php
                [includesclassfile] => components/blox/projects/blox/modTable/div/includes/getdatas.class.php
                [includesclass] => Blox_modTable_Div
                [onsavefile] => components/blox/projects/blox/modTable/div/includes/onsavedatas.php
                [nowtimestamp] => 1403489838
                [day] => 23
                [month] => 06
                [year] => 2014
                [userID] => 0
                [totalVar] => total
                [pageVarKey] => page
                [perPage] => 10
                [numLinks] => 5
                [page] => 1
                [offset] => 0
                [where] => 
                [queries] => *
                [selectfields] => 
                [sortConfig] => 
                [joins] => 
                [keyField] => id
                [parents] => 0
                [depth] => 10
                [bloxfolder] => 
                [documents] => 999999999
                [IDs] => 999999999
                [filter] => 
                [showdeleted] => 0
                [showunpublished] => 0
                [debugTime] => 0
            )
            Query String:
            SELECT `AvailableFreight`.`id`, `AvailableFreight`.`freightcaptitle`, `AvailableFreight`.`vehicletype`, `AvailableFreight`.`deptown`, `AvailableFreight`.`arrtown`, `AvailableFreight`.`cubmt`, `AvailableFreight`.`freightdate`, `AvailableFreight`.`freightvehicledetail`, `AvailableFreight`.`freightvehiclecontact`, `AvailableFreight`.`_fromaddress_`, `AvailableFreight`.`published`, `AvailableFreight`.`createdby`, `AvailableFreight`.`createdon`, `AvailableFreight`.`editedby`, `AvailableFreight`.`editedon`, `AvailableFreight`.`deleted`, `AvailableFreight`.`deletedon`, `AvailableFreight`.`deletedby`, `AvailableFreight`.`publishedon`, `AvailableFreight`.`publishedby` FROM `modx_available-freight` AS `AvailableFreight` 
            Query String:
            SELECT `AvailableFreight`.`id`, `AvailableFreight`.`freightcaptitle`, `AvailableFreight`.`vehicletype`, `AvailableFreight`.`deptown`, `AvailableFreight`.`arrtown`, `AvailableFreight`.`cubmt`, `AvailableFreight`.`freightdate`, `AvailableFreight`.`freightvehicledetail`, `AvailableFreight`.`freightvehiclecontact`, `AvailableFreight`.`_fromaddress_`, `AvailableFreight`.`published`, `AvailableFreight`.`createdby`, `AvailableFreight`.`createdon`, `AvailableFreight`.`editedby`, `AvailableFreight`.`editedon`, `AvailableFreight`.`deleted`, `AvailableFreight`.`deletedon`, `AvailableFreight`.`deletedby`, `AvailableFreight`.`publishedon`, `AvailableFreight`.`publishedby` FROM `modx_available-freight` AS `AvailableFreight` 
            Time to render (row): 0.0112369060516 seconds
            Time to render all: 0.0152521133423 seconds
            Total time: 0.142436027527 seconds
              • 47630
              • 56 Posts
              Just discovered some more general weirdness, when I update the data (by filling in form) the child rows can only be expanded on every second update.

              There are currently 9 rows in total & the child rows can be expanded, if I add a tenth row then none of the child rows can be expanded until I add an eleventh row.

              I found this pattern by increasing the data row by row from 3 rows up to 9.

              4th update cannot expand child rows.
              5th update can expand child rows.
              6th update cannot expand child rows.
              7th update can expand child rows.
              8th update cannot expand child rows.
              9th update can expand child rows.
              • discuss.answer
                • 4172
                • 5,888 Posts
                you will need something like that:

                for the outer tpl:

                <meta charset="utf-8">
                <!-- jQuery -->
                    <script src="js/jquery.min.js"></script>
                 
                    <!-- Tablesorter: required -->
                    <link rel="stylesheet" href="../css/theme.blue.css">
                    <script src="../js/jquery.tablesorter.js"></script>
                    <script src="../js/jquery.tablesorter.widgets.js"></script>
                 
                    <!-- Tablesorter: pager -->
                    <link rel="stylesheet" href="../css/jquery.tablesorter.pager.css">
                    <script src="../js/widget-pager.js"></script>
                 
                <script>
                $(function() {
                 
                  $(".tablesorter")
                    .tablesorter({
                      theme : 'blue',
                      // this is the default setting
                      cssChildRow: "tablesorter-childRow",
                 
                      // initialize zebra and filter widgets
                      widgets: ["zebra", "filter", "pager"],
                 
                      widgetOptions: {
                        // output default: '{page}/{totalPages}'
                        // possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
                        pager_output: '{startRow} - {endRow} / {filteredRows} ({totalRows})', // '{page}/{totalPages}'
                        pager_removeRows: false,
                 
                 
                        // include child row content while filtering, if true
                        filter_childRows  : true,
                        // class name applied to filter row and each input
                        filter_cssFilter  : 'tablesorter-filter',
                        // search from beginning
                        filter_startsWith : false,
                        // Set this option to false to make the searches case sensitive
                        filter_ignoreCase : true
                      }
                 
                    });
                 
                  // hide child rows
                  $('.tablesorter-childRow td').hide();
                 
                  // Toggle child row content (td), not hiding the row since we are using rowspan
                  // Using delegate because the pager plugin rebuilds the table after each page change
                  // "delegate" works in jQuery 1.4.2+; use "live" back to v1.3; for older jQuery - SOL
                  $('.tablesorter').delegate('.toggle', 'click' ,function(){
                 
                    // use "nextUntil" to toggle multiple child rows
                    // toggle table cells instead of the row
                    $(this).closest('tr').nextUntil('tr.tablesorter-hasChildRow').find('td').toggle();
                 
                    return false;
                  });
                 
                  // Toggle widgetFilterChildRows option
                  $('button.toggle-option').click(function(){
                    var c = $('.tablesorter')[0].config.widgetOptions,
                    o = !c.filter_childRows;
                    c.filter_childRows = o;
                    $('.state').html(o.toString());
                    // update filter; include false parameter to force a new search
                    $('table').trigger('search', false);
                    return false;
                  });
                });
                </script>
                 
                 
                <div id="demo">
                 
                    <div class="pager">
                        <img src="../assets/images/first.png" class="first" alt="First" />
                        <img src="../assets/images/previous.png" class="prev" alt="Prev" />
                        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
                        <img src="../assets/images/next.png" class="next" alt="Next" />
                        <img src="../assets/images/last.png" class="last" alt="Last" />
                        <select class="pagesize" title="Select page size">
                            <option value="10">10</option>
                            <option value="20">20</option>
                            <option value="30">30</option>
                            <option value="40">40</option>
                        </select>
                        <select class="gotoPage" title="Select page number"></select>
                    </div>
                 
                    <table class="tablesorter">
                    <colgroup>
                        <col width="85" />
                        <col width="155" />
                        <col width="155" />
                        <col width="100" />
                        <col width="100" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th>Id No #</th>
                            <th>Collection City</th>
                            <th>Delivery City</th>
                            <th>Date</th>
                            <th>Cubic Metres Available</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- First row expanded to reveal the layout -->
                    [[+innerrows.row]]
                        </tbody>
                </table>
                 
                    </div>
                



                row tpl:

                        <tr>
                            <td rowspan="2"> <!-- rowspan="2" makes the table look nicer -->
                                <a href="#" class="toggle">[[+id]] - More info</a> <!-- link to toggle view of the child row -->
                            </td>
                            <td>[[+deptown]]</td>
                            <td>[[+arrtown]]</td>
                            <td>[[+freightdate]]</td>
                            <td>[[+cubmt]]</td>
                        </tr>
                        <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Vehicle Type</div><div>[[+vehicletype]]<br></div></td></tr>
                        <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Job Details</div><div>[[+freightvehicledetail]]<br></div></td></tr>
                        <tr class="tablesorter-childRow"><td colspan="4"><div class="bold">Contact Details</div><div>[[+freightvehiclecontact]]<br></div></td></tr>
                


                Also I would put the whole javascript to the head and/or to the bottom of the body
                  -------------------------------

                  you can buy me a beer, if you like MIGX

                  http://webcmsolutions.de/migx.html

                  Thanks!
                  • 47630
                  • 56 Posts
                  Bruno you are a star!!!!!

                  That worked like a dream.

                  I got 2 other tables to change on other pages but, this looks like the ideal solution.

                  I know from reading the forums some other guys have had issues integrating TableSorter, but you just proved it can work.

                  Also the issue of child rows only opening every 2nd time new data has been loaded has been resolved, they open every time now smiley

                  Successfully integrating TableSorter with MigxDb & BloX has answered all my initial questions about sorting,filtering & pagination. [ed. note: jamesjazz last edited this post 12 years, 3 months ago.]
                    • 47630
                    • 56 Posts
                    Without wanting to resurrect an already answered question, I would like to pose one further question with regard to the above code:

                    Is it possible to add code whereby any dates that are older than the present day (today) will not be included in the front end table?

                    This would be like an auto filter on expiry date.

                    The field to check dates is [[+freightdate]]

                    I tried to set up an 'event' in PhPmyAdmin but the shared hosting the site is on do not allow this. I also tried to create a 'cronjob' but received permission denied.

                    My host then suggested adding this functionality to front end code which brought me back to here!
                      • 4172
                      • 5,888 Posts
                      having a snippet 'now'

                      return time();


                      you should be able to do:

                      &where=`{"freightdate:>":"[[!now:date=`%Y-%m-%d 00:00:00`]]"}`
                        -------------------------------

                        you can buy me a beer, if you like MIGX

                        http://webcmsolutions.de/migx.html

                        Thanks!