写javascript进行分页跳转渲染时出现死循环

前段时间再写后台管理项目时，写到了渲染分页的方法时，出现了调用分页方法会出现不断刷新第一页，一直死循环的问题。

var layer = layui.layer

// 获取文章列表数据的方法
function initTable() {
        $.ajax({
            method: 'GET',
            url: '/article/list',
            data: q,
            success: function(res) {
                if (res.status !== 0) {
                    return layer.msg('获取文章列表失败!')
                }
                layer.msg('获取文章列表成功!')
                    // 使用模板引擎渲染页面数据
                var htmlStr = template('tpl-table', res)
                $('tbody').html(htmlStr)
                    //调用渲染分页的方法
                renderPage(res.total)
            }
        })
    }

// 渲染分页的方法
    function renderPage(total) {
        // console.log(total);
        //渲染分页结构
        laypage.render({
            elem: 'pageBox', 
            count: total, //数据总数，从服务端得到
            limit: q.pagesize, //每页显示的条数
            curr: q.pagenum, // 默认选中的分页
            //分页发生切换的时候触发jump回调
            jump: function(obj) {
                q.pagenum = obj.curr
                    //渲染表格
                initTable()
            }
        });
    }

这是因为直接调用initTable方法来进行表格渲染的话，会发生死循环的问题，一直在不断刷新第一页。jump回调一直在被触发。

我们知道，jump回调的方式一般有两种：

• 点击页码的时候
• 只要调用了laypage.render

此时如果我们调用的是laypage.render，则不应该再次调用initTable方法。否则会出现死循环，我们应该在此基础之上加上判断，进行jump回调的方式区分。

将jump改为：

jump: function(obj, first) {
      // obj.curr最新的页码值
      q.pagenum = obj.curr
      // obj.limit 最新的条目数
      q.pagesize = obj.limit
                    
      if (!first) {
         initTable()
      }

 }