账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    用ajax做分页,怎么清除页面数据后在重新渲染?
    35
    0

    我用ajax做分页,vue做数据渲染,当我点击第二页时请求数据这个是没有问题的,但是当我回到第一页,页面事件就不生效了,我要怎样删除页面数据重新渲染??

    <tbody>
                                    <tr class="gradeX" v-for="(item,index) in mydatas">
                                        <td class="expand tabclick">{{item.id}}</td>
                                        <td class="">{{item.menuname}}</td>
                                        <td>{{item.engname}}</td>
                                        <td>{{item.path}}</td>
                                        <td data-hide="default,phone,tablet">{{item.ord}}</td>
                                        <td>
                                            <div class="tpl-table-black-operation">
                                                <a href="javascript:;"  @click="edit(index)"> 
                                                    <i class="am-icon-pencil"></i> 
                                                    编辑
                                                </a> 
                                                <a href="javascript:;" class="tpl-table-black-operation-del" @click="delt(index)">
                                                    <i class="am-icon-trash"></i> 
                                                    删除
                                                </a>
                                            </div>
                                        </td>
                                    </tr> 
                                </tbody>
    function pags(totalCount){
                    //分页
                    $('.M-box4').pagination({
                        totalData: totalCount,
                        showData: 10,
                        jump: true,
                        callback: function (api) {
                            var data = {                                
                                pageNum: api.getCurrent(),
                                pageSize:10
                            };
                            $.post('<%=basePath%>admin/resources/resourceList.jhtml', data, function (json) {
                                vmm.mydatas = json.datas;
                                 vmm.$nextTick(function(){
                                     $(".footable").footable(); 
                                  }); 
                            });
                        }
                    },function (api) {
                        var this_page = api.getCurrent(); //1
                        if(this_page == 1){
                            $.post('<%=basePath%>admin/resources/resourceList.jhtml?pageNum=1&pageSize=10',function (json) {
                            vmm.mydatas = json.datas;
                                    vmm.$nextTick(function(){     
                                        $(".footable").footable(); 
                                 });
                            });
                        }
                    });
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 朵烟熏的埖 普通会员 1楼

      在使用Ajax进行分页时,每次切换页面时,你需要重新获取新的数据,并用新数据替换掉当前页面已有的数据。以下是一个基本的步骤:

      1. 清除原有数据: javascript // 假设你的数据渲染在一个id为'container'的元素中 var container = document.getElementById('container'); container.innerHTML = ''; // 清空容器中的所有内容

      2. 发送Ajax请求获取新一页的数据: javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'your-api-url?page=2', true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var newData = JSON.parse(xhr.responseText); // 假设返回的是JSON格式数据 renderData(newData); // 调用渲染函数 } }; xhr.send();

      3. 根据新数据重新渲染页面: javascript function renderData(data) { for (var i = 0; i < data.length; i++) { var item = document.createElement('div'); // 创建一个新的元素用于存放每条数据 item.innerHTML = data[i].content; // 假设data[i]是每一条记录 container.appendChild(item); // 将新元素添加到容器中 } } 以上只是一个简单的示例,实际应用中,你可能需要根据你的API接口和页面结构做相应的调整。同时,现代前端开发中,建议使用fetch API或者jQuery.ajax等更便捷的Ajax方法,以及React、Vue、Angular等框架提供的数据绑定和组件更新机制来处理这类问题。
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部