PHP and MySQL Data Source

Download

PHP and MySQL Data Source is a jPList data source bundle that works with PHP and MySQL database. All logic is handled by the server and database, and jPList behaves as UI module only. The project is also available on GitHub.

Features:

License:

Browser Compatibility:

jQuery Compatibility:

Preview
Usage Example

Create a sample MySql database:

    
CREATE TABLE `item` (
	`ID` MEDIUMINT NOT NULL AUTO_INCREMENT,
	`Title` VARCHAR(150) NULL DEFAULT NULL,
	`Image` VARCHAR(150) NULL DEFAULT NULL,
	`Description` TEXT NULL,
	`Likes` INT(11) NULL DEFAULT NULL,
	`Keyword1` VARCHAR(50) NULL DEFAULT NULL,
	`keyword2` VARCHAR(50) NULL DEFAULT NULL,
	PRIMARY KEY (`ID`)
)
COLLATE='utf8_general_ci'
ENGINE=InnoDB;
INSERT INTO `item` (`ID`, `Title`, `Image`, `Description`, `Likes`, `Keyword1`, `keyword2`) VALUES
	(1, 'Architecture', 'img/thumbs/arch-2.jpg', '...', 25, 'Architecture', 'Brown'),
	(2, 'Autumn', 'img/thumbs/autumn-1.jpg', '...', 12, 'Nature', 'Red'),
	(3, 'Boats', 'img/thumbs/boats-1.jpg', '...', 11, 'Nature', 'Brown'),
	(4, 'Arch', 'img/thumbs/arch-1.jpg', '..', 5, 'Architecture', 'Red'),
	(5, 'Books', 'img/thumbs/book-1.jpg', '...', 100, 'Architecture', 'Red');

Init PHP config file:

    
<?php
/** 
* MySQL settings 
*/
//The name of the database
define('DB_NAME', 'jplist');
//MySQL database username
define('DB_USER', '...');
//MySQL database password
define('DB_PASSWORD', '...');
//MySQL hostname
define('DB_HOST', '127.0.0.1');
//MySQL hostname
define('DB_TABLE', 'item');
?>

Add jPList scripts to the HEAD:

    
<!-- jPList core -->		
<link href="jplist-core.min.css" rel="stylesheet" type="text/css" />
<script src="jplist-core.min.js"></script>	
<!-- sort bundle -->
<script src="/content/js/jplist/jplist.sort-bundle.min.js"></script>
<!-- textbox filter control -->
<script src="/content/js/jplist/jplist.textbox-control.min.js"></script>
<link href="/content/css/jplist-textbox-control.min.css" rel="stylesheet" type="text/css" />
<!-- jPList pagination bundle -->
<script src="/content/js/jplist/jplist.pagination-bundle.min.js"></script>
<link href="/content/css/jplist-pagination-bundle.min.css" rel="stylesheet" type="text/css" />		
<!-- jPList history bundle -->
<script src="/content/js/jplist/jplist.history-bundle.min.js"></script>
<link href="/content/css/jplist-history-bundle.min.css" rel="stylesheet" type="text/css" />
<!-- jPList toggle bundle -->
<script src="/content/js/jplist/jplist.filter-toggle-bundle.min.js"></script>
<link href="/content/css/jplist-filter-toggle-bundle.min.css" rel="stylesheet" type="text/css" />
<!-- jPList views control -->
<script src="/content/js/jplist/jplist.views-control.min.js"></script>
<link href="/content/css/jplist-views-control.min.css" rel="stylesheet" type="text/css" />
<!-- jPList preloader control -->
<script src="/content/js/jplist/jplist.preloader-control.min.js"></script>
<link href="/content/css/jplist-preloader-control.min.css" rel="stylesheet" type="text/css" />
<!-- Handlebars Templates Library: http://handlebarsjs.com -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>

Add Handlebars Templates Library to the HEAD:

    
<!-- 
Any other templates library could be used. 
Also it can be used without javascript templates at all with plain HTML, 
or as XML with XSLT.
-->		
		
<!-- Handlebars Templates Library: http://handlebarsjs.com -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/2.0.0-alpha.4/handlebars.min.js"></script>
<!-- handlebars template -->
<script id="jplist-template" type="text/x-handlebars-template">
	{{#each this}}
						
		<div class="list-item box">	
			<div class="img left">
				<img src="{{image}}" alt="" title=""/>
			</div>
								
			<div class="block right">
				<p class="title">{{title}}</p>
				<p class="desc">{{description}}</p>
				<p class="like">{{likes}} Likes</p>
				<p class="theme">{{keyword1}}, {{keyword2}}</p>
			</div>
		</div>
							
	{{/each}}
</script>

Call jPList plugin:

    
<script>
	$('document').ready(function () {
		var $list = $('#demo .list')
			,template = Handlebars.compile($('#jplist-template').html());
		$('#demo').jplist({
			itemsBox: '.list'
			,itemPath: '.list-item'
			,panelPath: '.jplist-panel'
			//data source
			,dataSource: {
				type: 'server'
				,server: {
				//ajax settings
				ajax: {
					url: '/content/data-sources/php-mysql-demo/server-json.php'
					,dataType: 'json'
					,type: 'POST'
				}
			}
			//render function for json + templates like handlebars, xml + xslt etc.
			,render: function (dataItem, statuses) {
				$list.html(template(dataItem.content));
			}
		}
		});
	});
</script

Add basic HTML structure to the BODY:

    
<!-- demo -->
<div id="demo">
	
	<!-- panel -->
	<div class="jplist-panel">						
		
		<!-- reset button -->
		<button 
			type="button" 
			class="jplist-reset-btn"
			data-control-type="reset" 
			data-control-name="reset" 
			data-control-action="reset">
			Reset  <i class="fa fa-share"></i>
		</button>
		<!-- items per page dropdown -->
		<div
			class="jplist-drop-down"
			data-control-type="items-per-page-drop-down"
			data-control-name="paging"
			data-control-action="paging">
			<ul>
				<li><span data-number="3"> 3 per page </span></li>
				<li><span data-number="5"> 5 per page </span></li>
				<li><span data-number="10" data-default="true"> 10 per page </span></li>
				<li><span data-number="all"> View All </span></li>
			</ul>
		</div>
		<!-- sort dropdown -->
		<div
			class="jplist-drop-down"
			data-control-type="sort-drop-down"
			data-control-name="sort"
			data-control-action="sort">
			<ul>
				<li><span data-path="default">Sort by</span></li>
				<li><span data-path=".title" data-order="asc" data-type="text">Title A-Z</span></li>
				<li><span data-path=".title" data-order="desc" data-type="text">Title Z-A</span></li>
				<li><span data-path=".desc" data-order="asc" data-type="text">Description A-Z</span></li>
				<li><span data-path=".desc" data-order="desc" data-type="text">Description Z-A</span></li>
				<li><span data-path=".like" data-order="asc" data-type="number">Likes asc</span></li>
				<li><span data-path=".like" data-order="desc" data-type="number">Likes desc</span></li>
			</ul>
		</div>
		<!-- text filter by title -->
		<div class="text-filter-box">
															
			<!--[if lt IE 10]>
			<div class="jplist-label">Filter by Title:</div>
			<![endif]-->
								
			<input 
				data-path=".title" 
				data-button="#title-search-button"
				type="text" 
				value="" 
				placeholder="Filter by Title" 
				data-control-type="textbox" 
				data-control-name="title-filter" 
				data-control-action="filter"
			/>
								
			<button 
				type="button" 
				id="title-search-button">
				<i class="fa fa-search"></i>
			</button>
		</div>
							
		<!-- text filter by description -->
		<div class="text-filter-box">
																
			<!--[if lt IE 10]>
			<div class="jplist-label">Filter by Description:</div>
			<![endif]-->
								
			<input 
				data-path=".desc" 
				data-button="#desc-search-button"
				type="text" 
				value="" 
				placeholder="Filter by Description" 
				data-control-type="textbox" 
				data-control-name="desc-filter" 
				data-control-action="filter"
			/>	
								
			<button 
				type="button" 
				id="desc-search-button">
				<i class="fa fa-search"></i>
			</button>
		</div>
							
		<!-- checkbox filters -->
		<div
			class="jplist-group"
			data-control-type="checkbox-group-filter"
			data-control-action="filter"
			data-control-name="themes">
			<input
				data-path=".architecture"
				id="architecture"
				type="checkbox"
			/>
			<label for="architecture">Architecture</label>
			<input
				data-path=".christmas"
				id="christmas"
				type="checkbox"
			/>
			<label for="christmas">Christmas</label>
			<input
				data-path=".nature"
				id="nature"
				type="checkbox"
			/>
			<label for="nature">Nature</label>
			<input
				data-path=".lifestyle"
				id="lifestyle"
				type="checkbox"
			/>
			<label for="lifestyle">Lifestyle</label>
		</div>
		<div
			class="jplist-group"
			data-control-type="checkbox-group-filter"
			data-control-action="filter"
			data-control-name="colors">
			<input
				data-path=".red"
				id="red-color"
				type="checkbox"
			/>
			<label for="red-color">Red</label>
			<input
				data-path=".green"
				id="green-color"
				type="checkbox"
			/>
			<label for="green-color">Green</label>
			<input
				data-path=".blue"
				id="blue-color"
				type="checkbox"
			/>
			<label for="blue-color">Blue</label>
			<input
				data-path=".brown"
				id="brown-color"
				type="checkbox"
			/>
			<label for="brown-color">Brown</label>
								
		</div>
		<!-- list / grid view -->
		<div 
			class="jplist-views" 
			data-control-type="views" 
			data-control-name="views" 
			data-control-action="views"
			data-default="jplist-list-view">
							   
			<button type="button" class="jplist-view jplist-list-view" data-type="jplist-list-view"></button>
			<button type="button" class="jplist-view jplist-grid-view" data-type="jplist-grid-view"></button>
		</div>
							
		<!-- pagination results -->
		<div 
			class="jplist-label" 
			data-type="Page {current} of {pages}" 
			data-control-type="pagination-info" 
			data-control-name="paging" 
			data-control-action="paging">
		</div>
								
		<!-- pagination -->
		<div 
			class="jplist-pagination" 
			data-control-type="pagination" 
			data-control-name="paging" 
			data-control-action="paging">
		</div>	
		<!-- preloader for data sources -->
		<div 
			class="jplist-hide-preloader jplist-preloader"
			data-control-type="preloader" 
			data-control-name="preloader" 
			data-control-action="preloader">
			<img src="/content/img/common/ajax-loader-line.gif" alt="Loading..." title="Loading..." />
		</div>		
		
	</div>				 
	
	<!-- HTML data -->   
	<div class="list">
		
		<!-- item 1 -->
		<div class="list-item">	
			...
		</div>
		
		<!-- item 2 -->
		<div class="list-item">	
			...
		</div>
		
		...
		
	</div>
	
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
					
</div>