Little of JS and CSS

[Xtremer360]

Okay this deals with javascript and css so didn't know which to put it into but it looks like more people post/reply in here so this is what I went with. I had a data table with the same styling template file. However I wanted to implement a tablesorter and pagination plugin of jquery and did so successfully. I have a working version of both however I'm trying to figure out if I need to edit the contentpages.php page or the tablesorter_pager.js file.

 

My page (click on Content Pages under the Site Admin Heading on the left and view the data table in the content div on the right)

http://defiantwrestling.net/efedmanager/index

 

Template file

http://defiantwrestling.net/efedmanager/titanium.html

 

Content Page Code:

<?php
    // Include the database page
    include ('../inc/dbconfig.php');
    
    $query = "SELECT CONCAT_WS(' ', firstname, lastname) AS name, DATE_FORMAT(contentpages.datecreated, '%M %d, %Y') AS datecreated, contentpages.id, contentpagename, contentpageshortname FROM contentpages, handlers WHERE handlers.id = contentpages.creator_id";
    $result = mysqli_query ( $dbc, $query ); // Run The Query
    $rows = mysqli_num_rows($result);

$itemsPerPage = 10;
$pages = ceil( $rows / $itemsPerPage );
?>

<script>
   $(document).ready(function() {
        $('a', $('div#addform')).click(function() {
            $('#innerContent').load('forms/' + $(this).attr('id') + '.php');
        });


	// Add the table sorter and table paginator plugins
	$('#contentPageList')
		.tablesorter() 
    		.tablesorterPager( {
			container: $( '#contentPageList .paginate' ),
			cssPageLinks: 'a.pageLink'
		} ); 

    });
</script>

<!-- Title -->
<div id="title" class="b2">
<h2>Content Pages</h2>
<!-- TitleActions -->
<div id="titleActions">
	<!-- ListSearch -->
	<div class="listSearch actionBlock">
		<div class="search">
			<label for="search">Content Pages</label>
			<input type="text" name="search" id="search" class="text" />
		</div>
		<div class="submit">
			<button type="submit" id="search-button" class="button"><strong><img src="img/icons/search_48.png" alt="search" class="icon "/></strong></button>
		</div>
	</div>
	<!-- /ListSearch -->
	<!-- newPost -->
		<div id="addform" class="addNew actionBlock">
			<a href="#" id="contentpage" class="button"><strong>Add New Content Page<img src="img/icons/add_48.png" alt="add new" class="icon "/></strong></a>
		</div>
	<!-- /newPost -->
</div>
<!-- /TitleActions -->
</div>
<!-- Title -->

<!-- Inner Content -->
<div id="innerContent">

<!-- ListHeader -->
<div id="listHeader">
	<p class="listInfos">
		You have <?php echo $rows; ?> content pages.
	</p>
	<div class="listActions">
		<form action="" method="post">
			<label for="actionSelect">With selected items: </label>
			<select class="select" name="actionSelect" id="actionSelect">
				<option>Edit</option>
				<option>Delete</option>
			</select>
			<button class="button small-button"><strong>Apply</strong></button>
		</form>
	</div>
</div>
<!-- /ListHeader -->


<!-- ListTable -->
<?php if ($rows > 0) { ?>
	<table cellspacing="0" class="listTable" id="contentPageList">
		<!-- Thead -->
		<thead>
			<tr>
				<th class="first"><div></div></th>
				<th><a href="#" title="Page Name">Page Name</a></th>
				<th><a href="#" title="Page Short Name">Page Short Name</a></th>
				<th><a href="#" title="Creator">Creator</a></th>
				<th class="last"><a href="#" title="Date Created">Date Created</a></th>
			</tr>
		</thead>
		<!-- /Thead -->

		<!-- Tfoot -->
		<tfoot>
			<tr>
				<td colspan="5">
					<div class="inner">
						<div class="paginate">
							<?php
								if( $pages > 1 ) {
									for( $i = 1; $i <= $pages; $i++ ) {
										echo '<span style="padding-left: 5px; padding-right: 5px;"><a class="pageLink" href="#">' . $i . '</a></span>';
									}
								}
							?>
						</div>
					</div>
				</td>
			</tr>
		</tfoot>
		<!-- /Tfoot -->

		<!-- Tbody -->
		<tbody>
			<?php 
				while ( $row = mysqli_fetch_array ( $result, MYSQL_ASSOC ) ) {
				  echo '
				  <tr>
				  <td><input type=checkbox class=checkbox value="' . $row['id'] . '" /></td>
				  <td><a href=# title="' . $row['contentpagename'] . '">' . $row['contentpagename'] . '</a></td>
				  <td>' . $row['contentpageshortname'] . '</td>
				  <td>' . $row['name'] . '</td>
				  <td class=last>' . $row['datecreated'] . '</td>
				  </tr>';
				}
			?>
		</tbody>
		<!-- /Tbody -->
	</table>
<?php } ?>
<!-- /ListTable -->

</div>
<!-- /Inner Content -->

 

tablesorter.pages.js

(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: 10,
			offset: 0,
			page: 0,
			totalRows: 0,
			totalPages: 0,
			container: null,
			cssNext: '.next',
			cssPrev: '.prev',
			cssFirst: '.first',
			cssLast: '.last',
			cssPageDisplay: '.pagedisplay',
			cssPageSize: '.pagesize',
			cssPageLinks: 'a.pageLink',  // extension setting
			seperator: "/",
			positionFixed: false,  // defaulting this to false.  original value is true.
			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");

				var $pageSizeEl = $( ".pagesize", pager );
				if( $pageSizeEl.length > 0 )
					config.size = parseInt( $pageSizeEl.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;
				});

				// Extension code
				$( config.cssPageLinks, pager ).first().parent().addClass( 'current' ); // add the "currently selected" class to the first link

				$( config.cssPageLinks, pager ).click( function() {
					var $el = $(this);

					// Remove the "current" (selected) class from all links,
					// and then add it to the one that was just clicked.
					$( config.cssPageLinks, pager ).parent().removeClass( 'current' );
					$el.parent().addClass( 'current' );

					table.config.page = parseInt( $el.html() ) - 1;
					moveToPage( table );

					return false;
				} );
			});
		};

	}
});

// extend plugin scope
$.fn.extend({
        tablesorterPager: $.tablesorterPager.construct
});

})(jQuery);				

[trq]

Whats the question / problem?

[Xtremer360]

I'm having an issue getting the styles of the footer pages to look like the footer pages of the template file with the new plugins installed.

[haku]

And that issue is?

 

You're not making it easy here.

[Xtremer360]

I'm having trouble figure out how to get the correct styles for the footer links for page numbers, current page all all that stuff to to be the same on my page as the template.

[Xtremer360]

Does that make sense?