我的本地服务器在我已经粘贴的地方运行，在＆＃39; www / jpdemo＆＃39;，＆＃39;服务器＆＃39; jPList Git repo https://github.com/1rosehip/jplist的文件夹内容。
通过关注php-mysql数据源http://jplist.com/datasources/php-mysql-data-source的使用示例，我填充了数据库并制作了我的＆＃39; jpdemo / layout.html＆＃39;内容如下所示。
我没有得到的是如何在HTML文件运行后获取服务器端数据，因为在任何地方都没有调用任何PHP脚本，而且我找到了“未找到结果”＃39;在网页的div输出区域。
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
<!-- jquery-->
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<!-- jpList 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>
<!-- template library headers ->
<!--
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>
</head>
<body>
<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: '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>
<!-- 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>
</body>
</html>
我检查了控制台日志。资源不在服务器上的正确位置，我试图通过查看日志并将文件（来自repo-js / css / img文件）放在服务器目标位置来减少差异。我现在检查FF中的日志只是JS错误：
TypeError: jQuery.fn.jplist is undefined[Learn More] jplist.sort-bundle.min.js:6:123
TypeError: jQuery.fn.jplist is undefined[Learn More] jplist.pagination-bundle.min.js:6:87
TypeError: jQuery.fn.jplist is undefined[Learn More] jplist.history-bundle.min.js:6:194
TypeError: jQuery.fn.jplist is undefined[Learn More] jplist.filter-toggle-bundle.min.js:9:371
TypeError: jQuery.fn.jplist is undefined[Learn More] jplist.preloader-control.min.js:5:434
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol. layout.html
TypeError: $(...).jplist is not a function[Learn More] layout.html:73:10
重要更新： 通过查看错误（不是上面的错误！）我猜想 jplist-master 文件夹grom git必须存在于www文件夹中。我做了这个，并查询其中的演示页面 对于php-mysql。 chrome控制台中没有错误。一切都正确显示，除了来自mysql的数据没有在div中填充，它显示＆＃34;没有找到结果＆＃34;。我已经测试了与其他php-mysql项目的连接，并且jplist-master中的config.php具有正确的连接参数。此外，DB仅使用提供的SQL语句填充。