Dropkick.js and Tablsorter.js Issue

Dev Shed Forums Sponsor:

January 24th, 2013, 01:43 PM

nbasso713

Contributing User

Join Date: Dec 2012

Posts: 64

Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1

[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.

January 24th, 2013, 05:37 PM

nbasso713

Contributing User

Join Date: Dec 2012

Posts: 64

Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1

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.

January 24th, 2013, 09:29 PM

nbasso713

Contributing User

Join Date: Dec 2012

Posts: 64

Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1

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.

January 25th, 2013, 02:53 PM

nbasso713

Contributing User

Join Date: Dec 2012

Posts: 64

Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1

Any ideas?

January 26th, 2013, 01:08 AM

nbasso713

Contributing User

Join Date: Dec 2012

Posts: 64

Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1

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) {".

January 26th, 2013, 02:49 AM

nbasso713

Contributing User

Join Date: Dec 2012

Posts: 64

Time spent in forums: 11 h 36 m 11 sec
Reputation Power: 1

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>

Dropkick.js and Tablsorter.js Issue

Developer Shed Advertisers and Affiliates