pagination

文章来源 ： https://www.cnblogs.com/fengpingfan/p/9811330.html 在web开发过程中，通常使用表格展示数据，在数据较多时采用分页的方式展示给用户。 分页方式有前端假分页和后端分页两种实现方式，此文仅记录前端假分页实现方式。 第一步：添加分页组件（el-pagination）在表格下方，添加的代码如下所示： <template> <el-table> ... </el-table> <el- pagination @size -change="handleSizeChange" @current -change="handleCurrentChange" :current -page="currentPage" :page -sizes="[15, 30, 50, 100]" :page -size="pageSize" layout ="total, sizes, prev, pager, next, jumper" :total ="currentTotal"> </el-pagination> </template> <script> ... </script> 第二步：添加分页所需的变量，如下所示： <script> export default { methods: { ... }, data() { return {

基本语法 下面展示Paginator的基本使用 >>> from django.core.paginator import Paginator >>> objects = ['john', 'paul', 'george', 'ringo'] >>> p = Paginator(objects, 2) >>> p.count 4 >>> p.num_pages 2 >>> type(p.page_range) <class 'range_iterator'> >>> p.page_range range(1, 3) >>> page1 = p.page(1) >>> page1 <Page 1 of 2> >>> page1.object_list ['john', 'paul'] >>> page2 = p.page(2) >>> page2.object_list ['george', 'ringo'] >>> page2.has_next() False >>> page2.has_previous() True >>> page2.has_other_pages() True >>> page2.next_page_number() Traceback (most recent call last): ... EmptyPage: That page contains no

之所以写这篇博客，是因为前段时间有用到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

一、拆分页面： 将一个页面拆分成几个部分，如：父子包裹、左右或上下布局 <!-- 上下布局 --> <template> <el- card style ="background: #fff;min-height: 800px" shadow ="never"> < div slot ="header" style ="height: 28px"> <!-- 标题 --> <span>xxxx列表<span/> </div> <!--内容--> <div> <featureTable :parameters="parameters"/> </div> </el-card> </template> 二、表格操作部分，属于 中间件 ——处理复杂逻辑、数据转换 1.纯展示的表格 <template> <el-card id="activityManage"> <div slot="header"> <el- button type ="primary" @click ="addRowDialog" >新建</el-button> </div> <el-row > <el-col> < CommonTable :table -data="tableData" :table -column="tableColumn" height ="680" :loading ="listLoading"