• pagination分页插件使用


    之所以写这篇博客,是因为前段时间有用到pagination.js,网上的各种配置使用方法,但我发现多个版本使用方法有出入,所有写下这篇博客,供以后查看。

    注:此插件基于jq,必须先引入jq才能正常使用。
    
    	引入pagination.js;pagination.css;
    
    插件链接:https://github.com/ljzy1026/pagination
    
    • html

    一个id为pagination的div

    • js
    // 初始化分页模块
    	// sort是本项目ajax请求需要的一个参数
    	function pageStart(sort) {
    		var container = $('#pagination');
    		// sort需要定义才能被回调函数获取到	
    		var sort = sort || 11;
    		// 初始化
    		container.pagination({
    			// 数据源,好几种写法(直接写数组;写函数中包含ajax请求;直接写url)
    			dataSource: '/essaymanage/getessaylist?status=-1&sort=' + sort,
    			// 数据最终来源 res.data
    			locator: 'data',
    			// 总数,一般都是从后台拿的(写死是totalNumber参数)
    			totalNumberLocator: function(response) {
    				return response.num;
    			},
    			// 每页条目数
    			pageSize: 10,
    			// 起始页数
    			pageNumber: 1,
    			// 参数名一般有变化,给上面两个参数起别名
    			alias: {
    				pageNumber: 'page',
    				pageSize: 'size'
    			},
    			// 上一页文本
    			prevText: '<',
    			// 下一页文本
    			nextText: '>',
    			ajax: {
    				beforeSend: function() {
    					container.prev().html('Loading data from flickr.com ...');
    				}
    			},
    			// 回调函数
    			callback: function(res, pagination) {
    				console.log(sort);
    				// 先清空显示区域
    				$('.tb tr:gt(0)').hide();
    				// 循环拿数据,插入数据
    				for (var i = 0; i < res['length']; i++) {
    				    // 拿数据,处理数据...
    				}
    			}
    		})
    	}
    	pageStart();
    
    • css(自定义css)

      最终效果
  • 相关阅读:
    Web前端一种动态样式语言-- Less
    Windows下查看8080进程及结束进程命令
    Java应用程序实现屏幕的"拍照"
    批处理命令 BAT备份MySQL数据库
    LineNumberReader类
    SAXReader
    linux打包压缩命令汇总
    Jquery获取选中的checkbox的值
    Jquery_联系电话正则表达式
    CSS overflow 属性
  • 原文地址:https://www.cnblogs.com/ljzy/p/9446529.html
Copyright © 2020-2023  润新知