layui使用分页,在jump中做换页请求,页码总是跳回到1上,

layui分页,执行之后总会跳回到原来的1上,不知道为啥,解决之后觉得可能是设置的起始页的问题.
原先错误的代码:

    laypage.render({
            elem: 'demo1'
            , count: total1 //数据总数
            ,limit:10 //每页展示条数
            , groups: 5// 默认的连续出现的页码数
            ,layout: ['prev', 'page', 'next','skip']
            , jump: function (obj ,first) {
                //获取到当前的页数
                page1 = obj.curr;
                if( !first ) {
                    if ( page1 !== pagePre ) {
                        selectSubject( page1 , '' ,false);
                    }
                }
            }
        });

官方文档看了半天 ,有一个curr属性,说是起始页,自己以为就是第一页,然后最后无奈加上试试,将curr的值设置为当前的值

    laypage.render({
            elem: 'demo1'
            , count: total1 //数据总数
            ,limit:10 //每页展示条数
            ,curr:page1  //让起始页等于我传过来的page1,也就是点击的页码
            , groups: 5// 默认的连续出现的页码数
            ,layout: ['prev', 'page', 'next','skip']
            , jump: function (obj ,first) {
                //获取到当前的页数
                page1 = obj.curr;
                if( !first ) {
                    if ( page1 !== pagePre ) {
                        selectSubject( page1 , '' ,false);
                    }
                }
            }
        });
在Vue3项目引入和使用layui分页和表格组件需要以下几个步骤: 1. **安装依赖**: 首先,你需要通过npm或yarn来安装layui组件。如果还没有全局安装,可以使用`npm install layui --save` 或 `yarn add layui`。 2. **注册并导入**: 在main.js或你项目的入口文件,注册layui插件,并将其引入到Vue原型上以便全局使用: ```javascript import { layui } from 'layui' Vue.prototype.$layui = layui // 使用this.$layui来访问layui实例 ``` 3. **创建分页组件**: 使用layui提供的`laypage`组件,创建一个自定义的分页组件。例如: ```html <template> <div ref="layPage"></div> </template> <script> export default { mounted() { this.$nextTick(() => { this.$refs.layPage.render({ elem: this.$refs.layPage, init: { total: yourTotalItems, // 总记录数 limit: pageSize, // 每页的数量 page: 1, // 初始页码 callback: (params) => { // 获取当前页的数据 fetchData(params.page, params.limit); } }) }); }, methods: { fetchData(page, limit) { // 调用接口获取数据,并更新表格数据 } } } </script> ``` 4. **创建表格组件**: 同样地,使用`layui.table`创建表格,你可以将数据绑定到表格上: ```html <template> <table ref="layTable" lay-data="dataList" lay-filter="filterRule"> <!-- 表格列配置 --> </table> </template> <script> export default { data() { return { dataList: [], // 初始化为空的数据数组 }; }, computed: { tableData() { // 根据分页结果返回实际渲染的数据 return this.$ layui.table.data(); } }, methods: { handleQuery(pagination, filter) { // 更新数据源并重新渲染表格 this.fetchData(pagination.current, pagination.size); } } } </script> ``` 5. **API调用和数据处理**: 负责从服务器获取数据以及响应分页和过滤请求。你需要定义好对应的接口,比如`fetchData`方法,它会根据分页参数进行网络请求,然后更新`dataList`和表格数据。
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值