jPList 基于 jQuery 功能强大的分页排序插件 - 资源分享

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

发布于 2017-12-11 字数 3063 浏览 2328 评论 0

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

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

特点优势

  • 适用于任何内容(表、列表、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'
   });
});

相关连接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2583 文章
29 评论
84935 人气
更多

推荐作者

猫性小仙女

文章 1 评论 0

qq_VO6LhT

文章 0 评论 0

猿舌电影

文章 0 评论 0

7556275422

文章 0 评论 0

YYQ_139

文章 0 评论 0