素材牛VIP会员

jQuery JavaScripton表格数据自动分页插件

 所属分类:网页特效-表格,分页/文件树

 浏览:1091次  评论:1次  更新时间:2019-11-20
牛币素材VIP可免积分下载
jQuery JavaScripton表格数据自动分页插件
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:jQuery基于强大的layui 框架,通过扩展nicePage.js实现JSON数据格式的自动表格分页和跳转功能,配置简单,上手速度快,兼容IE5+

详细介绍

基本使用说明:

//标准json格式 目前只支持[{a:b,c:d},{a:b,c:d}]

var json=[{"id":"1","name":"Tom","age":"12"},{"id":"2","name":"Joy","age":"13"}]

//nameList与widthList的数组长度要一致
nameList//数组为表格列名,如['序号','姓名','年龄']
widthList//数组为列名的宽度,如['100','200','100']

/**
 * 初始化设置nicepage组件
 *------------------------------------------------------------
 * 进行数据组装,与layui交互进行元素渲染
 *-------------------------------------------------------------
 * @param    {string}  table     table的div id
 * @param    {string}  bar     底部分页的div id
 * @param    {int}  limit     每页默认行数
 * @param    {string}  color     底部分页的颜色
 * @param    {array}  layout     底部分页的布局,具体可参考layui api
 *
 * @date     2018-10-19
 */
//初始化
$(function () {
	nicePage.setCfg({
		table: 'table',
		bar: 'pageBar',
		limit: 20,
		color: '#1E9FFF',
		layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
	});
});
//初始化完成

文件目录结构

  • css
    • ┝ layui.css
    • ┝ layui.mobile.css
    • modules
      • ┝ code.css
  • ┝ index.html
  • js
    • ┝ jquery.min.js
    • lay
      • modules
        • ┝ code.js
        • ┝ laypage.js
    • ┝ layui.js
    • ┝ nicePage.js

讨论这个素材(1)回答他人问题或分享使用心得会奖励牛币

qq***77  
2019年11月25日

很好用,是我想要的效果

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:15 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)