Question

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

Answer 1

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

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

<强> 步骤：

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

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()中的$(document).ready(function() { //calling remoteCommands fetchSpread(); fetchTrans(); })确保widgetVar可以使用的方式。

{{1}}

同时加载数据

1 个答案: