[JavaScript知识库] 前端分页代码实现简要思路

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 前端分页代码实现简要思路 -> 正文阅读

[JavaScript知识库]前端分页代码实现简要思路

list : null,       //table当前所要展示的数据
total : 0,         //返回过来的消息总条数
pageIndex : 1,     //当前所在页数
pageSize : 10,     //一页要展示10条数据
tableData : [],    //一次性后端返回过来的数据

//当点击页面跳转时调用这个方法
pageChange:(pageIndex) {
             var _this = this;
             if (_this.tableData) {
                 if (pageIndex) {
                     _this.pageIndex = pageIndex;
                 }
                 _this.list = _this.tableData.slice(
                   (_this.pageIndex - 1) * _this.pageSize,
                   _this.pageIndex * _this.pageSize
                 );
                 console.log(_this.list);
             } else {}
         },
        getTableData(){
        	_this.$http.post('/api/getAllTableData',params)
		    .then(res =>{
			 // 请求接口成功之后,获取列表所有数据
	             _this.tableData = billArr.result;
	             _this.total = res.data.result.length;
	             _this.list = _this.tableData.slice(
	                   (_this.pageIndex - 1) * _this.pageSize,
	                    _this.pageIndex * _this.pageSize
	             );	
			})
		    .catch(error =>{})	             	  
		}