jQuery jPList plugin is deprecated. Please check pure JavaScript (ES6) jPList Library alternative instead.
Home » Products» Data Sources » PHP and MySQL Data Source
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:
No results found
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>