jPList 基于 jQuery 功能强大的分页排序插件

Question

jPList 是一个灵活的 jQuery 插件，支持排序、分页和过滤 HTML 结构，插件的 UI 设计很简约，搭配任意的网站基本都没有问题，同时插件对 SEO 做了相应的处理，方便搜索引擎索引。

特点优势

• 适用于任何内容(表、列表、div元素等)
• 升序和降序排序
• 字母数字和数字排序
• 日期和时间排序
• 自动分页
• 任意数量的文本框过滤器
• 任意数量的下降过滤器
• 复选框和单选按钮过滤器
• 数据来源 PHP + MySQL、ASP.NET + Sql Server、PHP + SQLite
• 支持本地存储和 Cookies
• 网格/列表视图演示页面
• 完全可定制的风格
• 在所有主要浏览器工作
• SEO友好
• 带注释的源代码
• 详细的文档

使用方法

首先引入插件相关的问题，这里引入的文件有点多，jPlist 采用模块化的方式编写，如果你需要某一些功能，你只需要引入对应的文件即可：

<!-- jQuery Library -->
<script src="jquery.js"></script>

<!-- jPList Core -->
<script src="jplist.core.min.js"></script>
<link href="jplist.core.min.css" rel="stylesheet" type="text/css" />

<!-- jPList Sort Bundle -->
<script src="jplist.sort-bundle.min.js"></script>

<!-- jPList Pagination Bundle -->
<script src="jplist.pagination-bundle.min.js"></script>

<!-- Textbox Filter Control -->
<script src="jplist.textbox-filter.min.js"></script>
<link href="jplist.textbox-filter.min.css" rel="stylesheet" type="text/css" />

第二步编写一些需要排序或者操作的HTML代码，例如向下面的代码：

<div id="demo">
	<!-- panel -->
	<div class="jplist-panel">						
		<!-- add here jPList controls and bundles -->
	</div>				 
	<!-- HTML data -->   
	<div class="list">
		<!-- item 1 -->
		<div class="list-item">	
			<!-- any HTML structure -->
		</div>
		<!-- item 2 -->
		<div class="list-item">	
			<!-- any HTML structure -->
		</div>
		<!-- any number of items ... -->
	</div>
	<!-- no results found -->
	<div class="jplist-no-results">
		<p>No results found</p>
	</div>
</div>	

最后调用插件

$('document').ready(function(){
   //check all jPList javascript options here
   $('#demo').jplist({
		itemsBox: '.list',
		itemPath: '.list-item',
		panelPath: '.jplist-panel'
   });
});

相关连接

• Github 地址：https://github.com/1rosehip/jplist
• 项目地址：https://jplist.com/