Question

我基于primefaces数据表创建了一个简单的滚动内容加载功能：

PF('tableWidget').jq.bind("scrollstop", function() { 
    var t = PF('tableWidget');
    if(t.jq.scrollTop() + t.jq.height() >= t.jq.children().height()) {
        var rows = t.jq.find('tr');                       //save current rows
        $.ajaxSetup({async: false});                      //ajax set sync
        t.paginator.setPage(t.paginator.cfg.page + 1);    //framework pagination function with an ajax call inside (and other stuff) to get new rows
        rows.prependTo(t.jq.find('tbody'));               //AFTER pagination, add old rows
        $.ajaxSetup({async: true});                       //ajax set async again
    } 
});

说明：当用户向下滚动到dataTable的底部时，我只使用分页，但之前保存旧行。完成分页后，我再次添加行。这留下了超酷的基于滚动的加载，其中只需要从服务器加载新数据，而不是再次加载旧内容。

但是当我在其他问题中读到时，使用同步的ajax调用是不好的做法。

覆盖“t.paginator.setPage（x）”函数并不容易，因为在这个函数中有一个ajax调用。

有没有办法，包装整个函数，并添加一些成功的回调，而不是深入到真正的基本ajax调用？

非常感谢！

Answer 1

你可以让setPage返回$ .ajax承诺，并在promise回调中做你需要的。

t.paginator.setPage = function(pageNum){
  // return the promise
  return $.ajax(....);
};

然后当你打电话时：

t.paginator.setPage(t.paginator.cfg.page + 1).then(function(){
   rows.prependTo(t.jq.find('tbody'));  
});

Answer 2

这是我的解决方案：因为我需要访问paginator onsuccess或oncomplete方法，所以我现在使用primefaces dataTable的给定ajax监听器。基于卷轴的内容加载系统的整个代码如下所示：

<p:dataTable id="table" value="#{items}" var="item" paginator="true" widgetVar="tableWidget">
    <p:ajax event="page" onstart="storeRows()" oncomplete="restoreRows()"/>
    ...
</p:dataTable>

<h:outputScript>
    <!-- variables -->
    var rows;

    <!-- scroll bottom to load more -->
    PF('tableWidget').jq.bind("scrollstop", function() { 
        var t = PF('tableWidget');
        if(t.jq.scrollTop() + t.jq.height() >= t.jq.children().height()) {
            t.paginator.setPage(t.paginator.cfg.page + 1);
        } 
    });

    <!-- store and restore rows -->
    function storeRows() {
        var t = PF('tableWidget');
        rows = t.jq.find('tr'); 
    }

    function restoreRows() {
        var t = PF('tableWidget');
        rows.prependTo(t.jq.find('tbody'));
    }
</h:outputScript>

Javascript等待extern ajax请求

2 个答案: