laypage点击页码无法跳页?

laypage点击页码的时候,从后端返回的第二页数据会累加在第一页的后面,无法跳转到第二页,是什么原因?


// //查询全部信息
function getInfo(page) {


    $.ajax({
        type: 'post',
        url: '/web/illegalMessages',
        data: {
            'page': page
        },
        async: false,
        success: function(data) {
            var list = data.data;
            totalRow = data.totalRow;

            if (data.flag == 'success') {
                for (var i = 0; i < list.length; i++) {
                    $('tbody').append(

                        '<tr id="' + list[i].illegalmessageid + '">' +
                        '<td>' + list[i].deal + '</td>' +
                        '<td>' + list[i].occurarea + '</td>' +
                        '<td>' + list[i].platenumber + '</td>' +
                        '<td>' + list[i].occurtime + '</td>' +
                        '<td>' + list[i].markImgPath + '</td>' +
                        '<td>' + list[i].detailImgPath + '</td>' +
                        '<td>' + list[i].voicePath + list[i].videoPath + '</td>' +
                        '<td>' + list[i].deal + '</td>' +
                        '</tr>'
                    )
                }
            }




            layui.config({
                base: 'base/lay/modules/'
            }).use(['element', 'form', 'layer', 'laypage', 'table'], function() {
                var element = layui.element;
                var layer = layui.layer;
                var laypage = layui.laypage;
                var table = layui.table;

                //分页
                laypage.render({
                    elem: 'layPage' //分页容器的id
                        ,
                    layout: ['prev', 'page', 'next', 'limits', 'count'] //排版
                        ,
                    limit: 10 //每页显示数
                        ,
                    count: totalRow //总条数
                        ,
                    groups: 3 //连续出现的页数
                        ,
                    theme: '#1E9FFF' //自定义选中色值
                        ,
                    skip: true //开启跳页

                });

                function onclick() {
                    $('#layPage a').on('click', function() {//点击页码
                        var page = $(this).attr("data-page");//获取当前的页数
                        getInfo(page);//查询当页数据
                    })
                }

                onclick()
            });

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
        },
    })
}


$(function() {
getInfo(1);
}

阅读 4.1k
1 个回答

修改如下:
1.丢了curr参数。
2.跳页laypage自带参数jump
3.数据会累加是因为重新查询之前没有清空数据。

//查询全部信息
function getInfo(page) {

    $.ajax({
        type: 'post',
        url: '/web/illegalMessages',
        //dataType:'json',
        data: {
            'page': page
        },
        async: false,
        success: function(data) {

            //var data = JSON.parse(data);
            var list = data.data;
            totalRow = data.totalRow; //获取总条数

            if (data.flag == 'success') {

                $('tbody').html(''); //先清空,否则再次查询会在本页累加数据

                for (var i = 0; i < list.length; i++) {
                    $('tbody').append(
                        '<tr id="' + list[i].illegalmessageid + '">' +
                        '<td>' + list[i].deal + '</td>' +
                        '<td>' + list[i].occurarea + '</td>' +
                        '<td>' + list[i].platenumber + '</td>' +
                        '<td>' + list[i].occurtime + '</td>' +
                        '<td>' + list[i].markImgPath + '</td>' +
                        '<td>' + list[i].detailImgPath + '</td>' +
                        '<td>' + list[i].voicePath + list[i].videoPath + '</td>' +
                        '<td>' + list[i].deal + '</td>' +
                        '</tr>'
                    )
                }
            }


            //配置并加载所需模块
            layui.config({
                base: 'base/lay/modules/'
            }).use(['laypage', 'table'], function() {
                var laypage = layui.laypage;
                var table = layui.table;

                //实例化分页
                laypage.render({
                    elem: 'layPage' //分页容器的id
                        ,
                    layout: ['prev', 'page', 'next', 'limits', 'count'] //排版
                        ,
                    limit: 10 //每页显示数
                        ,
                    count: totalRow //总条数
                        ,
                    curr: page
                        ,
                    groups: 3 //连续出现的页数
                        ,
                    theme: '#1E9FFF' //自定义选中色值
                        ,
                    skip: true //开启跳页
                        ,
                    jump: function(obj, first) { //点击页码跳页
                        if (!first) {
                            $('tbody').html('');
                            getInfo(obj.curr); //查询,传参:当前页
                        }
                    }

                });
            });

        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            console.log(XMLHttpRequest.status);
            console.log(XMLHttpRequest.readyState);
            console.log(textStatus);
        },
    })
}


$(function() {

    //初始化加载所有信息
    getInfo(1);


})
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题