...

View Full Version : Little of JS and CSS



CoolAsCarlito
11-26-2010, 11:40 PM
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


contentpages.php


<?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);



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum