django+easyui分页处理

相关网址:https://www.cnblogs.com/Mohf/p/4121953.html

思路:

1、datagrid会自己传page 跟rows过来,直接在后台获取

2、得到page跟rows后把它们类型转为int、从数据库取出数据把总行数赋给total,然后把数据放到列表里面

3、判断page是不是第一页:

  3.1、如果是第一页:判断有多少行(rows),取rows行数据

  3.2、如果不是第一页:从列表删除page-1条数据得到剩余的数据,然后再做第3.1步

4、把total跟得到的数据拼起来:ealist = {'rows':alist,'total':total}

5、把ealist转成json格式数据return回去, ok

 

实现:

<table id="dg" class="easyui-datagrid" title="作者列表" style="width:100%;height:420px"

data-options="pagination:true,url:'/getAuthor/',method:'get',toolbar:'#tb',">

</table>


def getAuthor(request):
    if request.method == "GET":
        page = int(request.GET.get('page',0))-1
        rows = int(request.GET.get('rows',0))
        list = models.Author.objects.all().order_by("-id")
        allList = []
        for li in list:
            allList.append({
                "id": li.id,
                "head_img": str(li.head_img),
                "name": li.name,
        
Django + Vue3项目中,使用Element-Plus的el-pagination组件处理分页可以通过以下步骤实现: 1. **安装依赖**: 确保你已经安装了`django`, `vue3`和`element-plus`。如果还没有安装,可以使用以下命令进行安装: ```bash pip install django npm install vue@next element-plus ``` 2. **配置Django后端**: 在你的Django视图中,你需要处理前端发送的分页请求。例如: ```python from django.http import JsonResponse from .models import YourModel # 替换成你的模型 from django.core.paginator import Paginator def get_paginated_data(request): page_number = request.GET.get('page', 1) page_size = request.GET.get('pageSize', 10) data = YourModel.objects.all() paginator = Paginator(data, page_size) try: page = paginator.page(page_number) except PageNotAnInteger: page = paginator.page(1) except EmptyPage: page = paginator.page(paginator.num_pages) return JsonResponse({ 'total': paginator.count, 'currentPage': page.number, 'pageSize': page_size, 'data': list(page), }) ``` 3. **配置URL路由**: 在你的Django项目的urls.py文件中添加一个URL模式来处理分页请求: ```python from django.urls import path from .views import get_paginated_data urlpatterns = [ path('api/paginate/', get_paginated_data, name='get_paginated_data'), ] ``` 4. **配置Vue3前端**: 在你的Vue3组件中,使用Element-Plus的el-pagination组件来实现分页功能。示例代码如下: ```javascript <template> <div> <el-table :data="paginatedData" style="width: 100%"> <!-- 你的表格列定义 --> </el-table> <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" :total="total" @current-change="handleCurrentChange" @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" /> </div> </template> <script> import { ref, reactive } from 'vue'; import axios from 'axios'; export default { setup() { const currentPage = ref(1); const pageSize = ref(10); const total = ref(0); const paginatedData = ref([]); const fetchPaginatedData = async () => { const response = await axios.get('/api/paginate/', { params: { page: currentPage.value, pageSize: pageSize.value, }, }); paginatedData.value = response.data.data; total.value = response.data.total; }; const handleCurrentChange = (val) => { currentPage.value = val; fetchPaginatedData(); }; const handleSizeChange = (val) => { pageSize.value = val; currentPage.value = 1; // 重置为第一页 fetchPaginatedData(); }; // 初始加载数据 fetchPaginatedData(); return { currentPage, pageSize, total, paginatedData, handleCurrentChange, handleSizeChange, }; }, }; </script> ``` 通过以上步骤,你可以在Django + Vue3项目中使用Element-Plus的el-pagination组件实现分页功能。确保在实际应用中根据具体需求调整代码细节。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值