#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2

    [jquery] Passing Function Through Dropkick.js


    I've decided to implement two fairly popular js scripts into my latest project since JS isn't my strong suite. But I'm having an issue with tablesorter.pager.js. For some reason the script does not run correctly when the page loads dropkick.js.

    I have narrowed it down, and it's definitely the dropkick.js script causing the issue.

    If anyone knows what could be causing the issue I'd appreciate the help. I'll include the tablesorter.js script and the on page script below.

    jquery.tablesorter.pager.js:
    Code:
    (function($) {
    	$.extend({
    		tablesorterPager: new function() {
    			
    			function updatePageDisplay(c) {
    				var s = $(c.cssPageDisplay,c.container).val((c.page+1) + c.seperator + c.totalPages);	
    			}
    			
    			function setPageSize(table,size) {
    				var c = table.config;
    				c.size = size;
    				c.totalPages = Math.ceil(c.totalRows / c.size);
    				c.pagerPositionSet = false;
    				moveToPage(table);
    				fixPosition(table);
    			}
    			
    			function fixPosition(table) {
    				var c = table.config;
    				if(!c.pagerPositionSet && c.positionFixed) {
    					var c = table.config, o = $(table);
    					if(o.offset) {
    						c.container.css({
    							top: o.offset().top + o.height() + 'px',
    							position: 'absolute'
    						});
    					}
    					c.pagerPositionSet = true;
    				}
    			}
    			
    			function moveToFirstPage(table) {
    				var c = table.config;
    				c.page = 0;
    				moveToPage(table);
    			}
    			
    			function moveToLastPage(table) {
    				var c = table.config;
    				c.page = (c.totalPages-1);
    				moveToPage(table);
    			}
    			
    			function moveToNextPage(table) {
    				var c = table.config;
    				c.page++;
    				if(c.page >= (c.totalPages-1)) {
    					c.page = (c.totalPages-1);
    				}
    				moveToPage(table);
    			}
    			
    			function moveToPrevPage(table) {
    				var c = table.config;
    				c.page--;
    				if(c.page <= 0) {
    					c.page = 0;
    				}
    				moveToPage(table);
    			}
    						
    			
    			function moveToPage(table) {
    				var c = table.config;
    				if(c.page < 0 || c.page > (c.totalPages-1)) {
    					c.page = 0;
    				}
    				
    				renderTable(table,c.rowsCopy);
    			}
    			
    			function renderTable(table,rows) {
    				
    				var c = table.config;
    				var l = rows.length;
    				var s = (c.page * c.size);
    				var e = (s + c.size);
    				if(e > rows.length ) {
    					e = rows.length;
    				}
    				
    				
    				var tableBody = $(table.tBodies[0]);
    				
    				// clear the table body
    				
    				$.tablesorter.clearTableBody(table);
    				
    				for(var i = s; i < e; i++) {
    					
    					//tableBody.append(rows[i]);
    					
    					var o = rows[i];
    					var l = o.length;
    					for(var j=0; j < l; j++) {
    						
    						tableBody[0].appendChild(o[j]);
    
    					}
    				}
    				
    				fixPosition(table,tableBody);
    				
    				$(table).trigger("applyWidgets");
    				
    				if( c.page >= c.totalPages ) {
            			moveToLastPage(table);
    				}
    				
    				updatePageDisplay(c);
    			}
    			
    			this.appender = function(table,rows) {
    				
    				var c = table.config;
    				
    				c.rowsCopy = rows;
    				c.totalRows = rows.length;
    				c.totalPages = Math.ceil(c.totalRows / c.size);
    				
    				renderTable(table,rows);
    			};
    			
    			this.defaults = {
    				size: 25,
    				offset: 0,
    				page: 0,
    				totalRows: 0,
    				totalPages: 0,
    				container: null,
    				cssNext: '.next',
    				cssPrev: '.prev',
    				cssFirst: '.first',
    				cssLast: '.last',
    				cssPageDisplay: '.pagedisplay',
    				cssPageSize: '.pagesize',
    				seperator: "/",
    				positionFixed: false,
    				appender: this.appender
    			};
    			
    			this.construct = function(settings) {
    				
    				return this.each(function() {	
    					
    					config = $.extend(this.config, $.tablesorterPager.defaults, settings);
    					
    					var table = this, pager = config.container;
    				
    					$(this).trigger("appendCache");
    					
    					config.size = parseInt($(".pagesize",pager).val());
    					
    					$(config.cssFirst,pager).click(function() {
    						moveToFirstPage(table);
    						return false;
    					});
    					$(config.cssNext,pager).click(function() {
    						moveToNextPage(table);
    						return false;
    					});
    					$(config.cssPrev,pager).click(function() {
    						moveToPrevPage(table);
    						return false;
    					});
    					$(config.cssLast,pager).click(function() {
    						moveToLastPage(table);
    						return false;
    					});
    					$(config.cssPageSize,pager).change(function() {
    						setPageSize(table,parseInt($(this).val()));
    						return false;
    					});
    				});
    			};
    			
    		}
    	});
    	// extend plugin scope
    	$.fn.extend({
            tablesorterPager: $.tablesorterPager.construct
    	});
    	
    })(jQuery);
    On Page Script:
    Code:
    <div id="pages" class="pager">
    <form>
    		<img src="images/first.png" class="first"/>
    		<img src="images/prev.png" class="prev"/>
    		<input type="text" class="pagedisplay"/>
    		<img src="images/next.png" class="next"/>
    		<img src="images/last.png" class="last"/>
    		<select class="pagesize">
    			<option value="25">25 per page</option>
    			<option value="50">50 per page</option>
    			<option value="100">100 per page</option>
    			
    		</select>
    	</form>
    </div>
    
    	<script defer="defer">
    	$(document).ready(function() 
        { 
            $("#user-search-results")
    		.tablesorter({widthFixed: false, widgets: ['zebra']})
    		.tablesorterPager({container: $("#pages")}); 
        } 
    	); 
    </script>;
    Note: Everything is running off the same version of jquery.
    Last edited by nbasso713; January 26th, 2013 at 01:19 AM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    UPDATE: I'm still narrowing down the issue. I managed to get the select property to render correctly, but when an option is selected nothing happens. Selecting an option should automatically change the number of results listed on the screen without refreshing the page.

    So I'm currently trying to understand how that is done with the pager script I posted previously so that I can pass that through dropkick, and I believe that should resolve my issue.

    Dropkick with my recent changes:
    Code:
    	    <script type="text/javascript" charset="utf-8">
     $('.pagesize').dropkick({
    	 change: function () {
       
            $("#user-search-results")
    		.tablesorterPager({container: $("#pager")}); 
            }
          });
    	  </script>
    Change functions are required with dropkick, just a matter of figuring out the correct syntax.

    Functioning page sorter script without using dropkick:
    Code:
    <script defer="defer">
    	$(document).ready(function() 
        { 
            $("#user-search-results")
    		.tablesorter({widthFixed: true, widgets: ['zebra']})
    		.tablesorterPager({container: $("#pager")}); 
        } 
    	); 
    </script>

    NOTE:
    As of right now the select property works to reduce the number of results on the page to the default size, but does not increase or decrease what's displayed.

    I'm 99% sure the problem is caused by dropkick not passing the value on to the pager.js script.
    Last edited by nbasso713; January 24th, 2013 at 08:28 PM.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    I don't understand why the following script will not work:

    Code:
    	    <script type="text/javascript" charset="utf-8">
     $('.pagesize').dropkick({
    	 change: function () {
       
    	$(document).ready(function() 
        { 
            $('#user-search-results')
    		.tablesorterPager({container: $('#pager')});
        } 
    	); 
            }
          });
    	  </script>
    When a selection is made the option should be fired off just like this script that does not use dropkick.js:
    Code:
    <script defer="defer">
    	$(document).ready(function() 
        { 
            $("#user-search-results")
    		.tablesorter({widthFixed: false, widgets: ['zebra']})
    		.tablesorterPager({container: $("#pager")});
        } 
    	); 
    </script>
    I'm bashing my head against the wall at this point. This is holding my entire project up.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    Any ideas?
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    I'm almost positive that I need to pass the value to this function in the pager script:

    Code:
    function setPageSize(table,size) {
    				var c = table.config;
    				c.size = size;
    				c.totalPages = Math.ceil(c.totalRows / c.size);
    				c.pagerPositionSet = false;
    				moveToPage(table);
    				fixPosition(table);
    			}

    This is what my current script looks like, but it still doesn't work:


    Code:
    <script defer="defer">
    	$(document).ready(function() 
        { 
            $('#user-search-results')
    		.tablesorter({widthFixed: false, widgets: ['zebra']})
    		.tablesorterPager({container: $('#pager')});
    			
    		$('.pagesize').dropkick({
    		change: function (value) {
    			setPageSize('table#user-search-results',parseInt(value));
    		}
    		});
    		
        } 
    	); 
    </script>
    I just need to be able to pass the value to that function in the pager script and I think I'll be golden, but i'm not sure what the proper syntax would be after "change: function (value) {".
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    64
    Rep Power
    2
    FINALLY SOLVED IT!

    Code:
    <script defer="defer">
    	$(document).ready(function() 
        { 
            $('#user-search-results')
    		.tablesorter({widthFixed: false, widgets: ['zebra']})
    		.tablesorterPager({container: $('#pager')});
    			
    		$('.pagesize').dropkick({
    		change: function (value) {
    			$('#user-search-results') 
    		.tablesorterPager({size: value});
    		}
    		});
    		
        } 
    	); 
    </script>

IMN logo majestic logo threadwatch logo seochat tools logo