We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 18367
    • 834 Posts
    Has anyone integrated Tablesorter into their Modx templates successfully?

    Whatever I try , I don’t seem to be able to get it to work within MODx.

    It’s fine on a normal page sitting outside of MODx, but as soon as I put it inside even a basic blank template, I lose all it’s functionality.

    Thanks
      Content Creator and Copywriter
      • 4310
      • 2,310 Posts
      The jQuery plugin?
      I’ve got it working on my sandbox here, click search to go to the tablesorter results page.
        • 18367
        • 834 Posts
        Ganesh,

        sorry, don’t have a sampel url ’cos I’m not using it in a live Modx environment.
        I do have a live static url of what I’m trying to get into MODx

        http://www.aquaculturecouncilwa.com/assets/templates/acwa/tablesorter/docs/consultants.php

        IE Everything else on this site sits in MODx, except this page. The page is still within the MODx folder structure, just not part of MODx. It’s accessed via a weblink. (Hope that all makes sense.)

        Yes I checked the paths, endlessly, over and over again.

        I was hoping that if somebody who had got it working within a template could provide me with an example and I could probably take it from there.


          Content Creator and Copywriter
          • 18367
          • 834 Posts
          David,

          can post a copy of what you pasted into your MOdx template?

          Thanks
            Content Creator and Copywriter
            • 4310
            • 2,310 Posts
            Just take it out of the source code wink
            It’s only the paths to your versions of : jquery.js & tablesorter.js and optionally tablesorter.pager.js
            Then the JS code to run it :
            <script type="text/javascript">
            $(document).ready(function() {
            $("table") .tablesorter({widthFixed: true, widgets: ['zebra']})
            .tablesorterPager({container: $("#pager")});
            });
            </script>
            

            I seem to remember some issues with different compressed versions of the JS not working.
            Just take the ones I’m using from my site.
              • 18367
              • 834 Posts
              Ganesh,

              the data is stored in the modx db and it gets there via the eform2db snippet.

              Is that what you mean?

              Also, below is the TS script from the head of my desktop server.

              When I run this thru modx I get the table and data but nor sorting options as on the live example.

              link rel="stylesheet" href="http://localhost/acwa/assets/templates/acwa/tablesorter/docs/css/jq.css" type="text/css" media="print, projection, screen" />
              <link rel="stylesheet" href="http://localhost/acwa/assets/templates/acwa/tablesorter/themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
              <script type="text/javascript" src="http://localhost/acwa/assets/templates/acwa/tablesorter/jquery-latest.js"></script>
              <script type="text/javascript" src="http://localhost/acwa/assets/templates/acwa/tablesorter/jquery.tablesorter.js"> </script>
              
              <script type="text/javascript" src="http://localhost/acwa/assets/templates/acwa/tablesorter/docs/js/chili/chili-1.8b.js"></script>
              <script type="text/javascript" src="http://localhost/acwa/assets/templates/acwa/tablesorter/docs/js/docs.js"></script>
              <script type="text/javascript" src="http://localhost/acwa/assets/templates/acwa/tablesorter/docs/js/examples.js"></script>
              	<script type="text/javascript" id="js">
              	$(document).ready(function() {
              	$("table").tablesorter();
              	$("#ajax-append").click(function() {
              		 $.get("http://localhost/acwa/assets/templates/acwa/tablesorter/docs/assets/ajax-content.html", function(html) {
              		 	// append the "ajax'd" data to the table body
              		 	$("table tbody").append(html);
              			// let the plugin know that we made a update
              			$("table").trigger("update");
              			// set sorting column and direction, this will sort on the first and third column
              			var sorting = ;
              			// sort on the first column
              			$("table").trigger("sorton",[sorting]);
              		});
              		return false;
              	});
              }); 		
              	</script>
              	
              	<script type="text/javascript" src="manager/media/script/mootools/mootools.js"></script>
              	<link rel="stylesheet" type="text/css" href="assets/plugins/madboxr/slimbox_ex/styles/slimbox_ex.css" />
              	<script type="text/javascript" src="assets/plugins/madboxr/slimbox_ex/scripts/slimbox_ex.js"></script>
              


              PS Don’t know how the madbox and mootools script is getting in there cos it’s not in the template.

                Content Creator and Copywriter
                • 43428
                • 1 Posts
                furiousbarnz Reply #7, 11 years ago
                I know this is an old post, but I'm wondering if anyone has successfully used the jQuery tablesorter plugin successfully in ModX Revo. I have a test site I'm creating with a page displaying a list of resources using getResources and getPage. When I load the tablesorter plugin on a static table, i.e. the one on the website, within the ModX install it works fine. However, the second I attempt to run it on a table created by getResources and getPage it stops functioning altogether with no errors reported in firebug. I'm kind of a ModX newb, so ANY advice in this arena would be well received. Thanks in advance...