同时加载数据

Question

我有多个 dataTables 并使用 ajax 加载 dataTables 数据。我已经使用 dataTables 映射了一个托管 bean，并且通过 ajax 更新可以访问数据库并从数据库中获取/检索记录。问题是很少的表可能有很少的记录要显示，很少有更多的记录。我想显示最先可用的记录，而不是所有要加载的表。 请提出建议。在此先感谢。

Answer 1

在大多数大数据应用程序中，这种情况很重要，尤其是当您有要从数据库中获取大数据的数据表时，基本上这是一种延迟加载的方式。

在回答这个问题之前，我想指出，将 getter/setter 用于逻辑/获取是一个坏主意，因为它们在生命周期中被多次调用。 p>

步骤：

• 将 getter 逻辑与另一个获取/生成方法分开。

  public void fetchSpreadList() {
     //fetch from DB and set spreadList
     setSpreadList(db.findSpreadList());
  }
  
  public void fetchTransList() throws Exception { 
     //fetch from DB and set TransList    
     setTransList(db.findTransList());
  }
  
  //getters
  public List<SpreadInformationDTO> getSpreadList() {
     return spreadList;
  }
  
  public List<TransHistoryDataDTO> getTransList() {      
     return transList;
  }
  

• 使用 remoteCommand 获取数据

   <p:remoteCommand name="fetchSpread"                          
                    actionListener="#{transactionMB.fetchSpreadList}"
                    update=":form1:spreadInfo"
                    onstart="preTableIsLoading(PF('widVarMnmsInfo'))"
                    oncomplete="postTableIsLoading(PF('widVarMnmsInfo'))">
   </p:remoteCommand>
  
   <p:remoteCommand name="fetchTrans"
                    actionListener="#{transactionMB.fetchTransList}"
                    update=":form2:withdrawInfo"
                    onstart="preTableIsLoading(PF('widVarBrmOrderInfo'))"
                    oncomplete="postTableIsLoading(PF('widVarBrmOrderInfo'))">       
   </p:remoteCommand>
  

  页面加载后，每个 remoteCommand 都会获取数据，并更新数据表。 onstart 和 oncomplete 这里是加载指示器，将 widgetVar 传递给 preTableIsLoading 和 postTableIsLoading。 注意：如果您使用 PF 3.5 或更低版本，则传递不带 PF 快捷方式的 widgetVar。

• preTableIsLoading 和 postTableIsLoading (javascript)

  function preTableIsLoading(widget) {
     widget.jq.find('.ui-datatable-empty-message td').hide();
     widget.jq.find('.ui-datatable-empty-message')
            .append('<span class="tableLoadingSpan" />');
  }
  
  function postTableIsLoading(widget) {
     widget.jq.find('.ui-datatable-empty-message td').show();
     widget.jq.find('.ui-datatable-empty-message span').remove();
  }
  

  当提取开始时，隐藏空消息并附加一个加载 gif，当提取完成时显示空消息（如果数据表为空）并删除加载 gif 指示符。

• 加载 gif 指示器 (CSS)

  .tableLoadingSpan {
     background:
         url("#{resource['/images/loaderTables.gif']}");
     display: block;
     height: 40px;
     margin-top: 20px;
     background-repeat: no-repeat;
  }
  

最后考虑在表中使用lazy loading。

编辑：

为了防止 javascript 中出现 undefined jQuery 对象错误，请从 remoteCommands 中删除 autoRun（我已经从这个答案中删除了）并在 $(document).ready() 中调用 remoteCommands 以确保 widgetVar可以使用了。

$(document).ready(function() {
   //calling remoteCommands
   fetchSpread();
   fetchTrans();
})