分页jQuery数据表和春季问题

问题描述：

我一直在尝试对我用来显示一些数据的数据表进行分页。让我解释一下整个场景。分页jQuery数据表和春季问题

首先我有一个服务代码，这将让我所有的行业：

@Transactional 
@Override 
public List<IndustryModel> getBusinessNature(String acctCatName) { 
    try { 
     List<AcctBusinessNature> acctBusinessNatureList = acctBusinessNatureRepository 
       .findByAcctCategoryAcctCatName(acctCatName); 
     List<IndustryModel> listOfIndustries = new ArrayList<IndustryModel>(); 

     int id = acctBusinessNatureList.size(); 
     int idOrder = 0; 
     for (AcctBusinessNature BussinesNatureTmp : acctBusinessNatureList) { 

      if (idOrder < id) { 
       IndustryModel industryModel = new IndustryModel(); 
       industryModel.setId(++idOrder); 
       industryModel.setIndustryId(BussinesNatureTmp.getBusNatureId()); 
       industryModel.setIndustryInEnglish(BussinesNatureTmp.getBusNatureTitleEn()); 
       industryModel.setIndustryInArabic(BussinesNatureTmp.getBusNatureTitleAr()); 
       industryModel.setAddedDate(BussinesNatureTmp.getCreatedTs()); 
       industryModel.setUserName(BussinesNatureTmp.getCreatedUser()); 
       listOfIndustries.add(industryModel); 
      } 
     } 
     return listOfIndustries; 

    } catch (Exception e) { 
     throw new GeneralLookUpException(GeneralLookUpExceptionCode.GET_DOC_TYPE, e.toString()); 
    } 
}

而且我有以下控制器：

@RequestMapping(value = "/generalSettingIndustries", method = RequestMethod.GET) 
public ModelAndView getIndustryLookUp() { 
    ModelAndView model = new ModelAndView("/generalSettingLookup/industryGridPartial"); 
    List<IndustryModel> listOfIndustries = generalSettingMerchantLookUpService.getBusinessNature(Constant.MERCHANT); 
    IndustryModel industryModel = new IndustryModel(); 
    model.addObject("listOfIndustries", listOfIndustries); 
    model.addObject("industryModel", industryModel); 
    return model; 
}

这里是我的html：

<th:block 
    th:if="${listOfIndustries} and ${#lists.isEmpty(listOfIndustries)}"> 
    <div id="noRecordDiv"> 
     <div class="alert alert-danger">Record not found.</div> 
    </div> 
</th:block> 
<th:block 
    th:unless="${listOfIndustries} and ${#lists.isEmpty(listOfIndustries)}"> 
    <div class="table-responsive"> 
     <table 
      class="table table-striped table-bordered table-hover dataTables-example dataTable dtr-inline" 
      id="dataTableIndus" aria-describedby="DataTables_Table_0_info" role="grid"> 
      <thead> 

       <tr> 
        <th width="10%" class="sorting" tabindex="0" 
         aria-controls="DataTables_Table_0" rowspan="1" colspan="1">ID</th> 
        <th width="20%" class="sorting" tabindex="0" 
         aria-controls="DataTables_Table_0" rowspan="1" colspan="1">Industry 
         in English</th> 
        <th width="20%" class="sorting" tabindex="0" 
         aria-controls="DataTables_Table_0" rowspan="1" colspan="1">Industry 
         in Arabic</th> 
        <th width="20%" class="sorting" tabindex="0" 
         aria-controls="DataTables_Table_0" rowspan="1" colspan="1">Added 
         Date</th> 
        <th width="15%" class="sorting" tabindex="0" 
         aria-controls="DataTables_Table_0" rowspan="1" colspan="1">By</th> 
        <th width="15%" class="sorting" tabindex="0" 
         aria-controls="DataTables_Table_0" rowspan="1" colspan="1">Action</th> 
       </tr> 
      </thead> 


      <tbody> 
       <th:block th:each="industry : ${ listOfIndustries }"> 
        <tr> 
         <td style="display: none;" th:utext="${industry.industryId}" /> 
         <td th:utext="${industry.id}" /> 
         <td th:utext="${industry.industryInEnglish}" /> 
         <td th:utext="${industry.industryInArabic}" /> 
         <td th:utext="${#dates.format(industry.addedDate, 'dd-MMM-yyyy')}" /> 
         <td th:utext="${industry.userName}" />

我打电话给这个部分网格，并使用下面的JavaScript代码和html提供的数据显示在其中时，HTML是在另一个母版页：

function getIndustries() { 
    var csrfParameter = $("#_csrfParam").attr("content"); 
    var csrfToken = $("#_csrf").attr("content"); 
    var jsonParams = {}; 
    jsonParams[csrfParameter] = csrfToken; 

    $.ajax({ 
     type : "GET", 
     url : getContextPath() + "/generalSettingIndustries", 
     success : function(data) { 
     $("#industryGrid").html(response); }); 

}

<div class="ibox-title"> 
    <h5>Industries</h5> 
    <div class="ibox-tools"> 
     <a class="collapse-link" onclick="getIndustries()"> <i 
     class="fa fa-chevron-up"></i> 
     </a> 
    </div> 
</div> 
<div id="industryGrid"> 
    <th:block th:include="/generalSettingLookup/industryGridPartial"></th:block> 
</div>

我想在我的js这样使用一个数据表，但没有发生：

$.ajax({ 
    type : "GET", 
    url : getContextPath() + "/generalSettingIndustries", 
    success : function(data) { 
     $("#dataTable").dataTable({ 
      "bJQueryUI" : true, 
      "bSort" : false, 
      "bPaginate" : true, 
      "sPaginationType" : "full_numbers", 
      "iDisplayLength" : 10, 
      "bServerSide": true , 
      'data' : data, 
      'destroy' : true, 
      'columns' : [ { 
       'data' : 'id' 
      }, { 
       'data' : 'industryInEnglish' 
      }, { 
       'data' : 'industryInArabic' 
      }, { 
       'data' : 'addedDate' 
      }, { 
       'data' : 'userName' 
      } ] 
     }); 
    }, 
    error : function(e) { 
     alert("some thing went wrong"); 
     // alert("Submit failed" + JSON.stringify(e)); 
    }

这是所有我在做什么。如何在表格显示后为表格添加分页？

答

请尝试以下步骤：

你应该做的分页上DB（因为它是最快的方法）。 Jpa支持分页。下面是一个代码示例：

您必须导入：

 import org.springframework.data.domain.Page; 
    import org.springframework.data.domain.Pageable; 

    public interface YourEntityRepository extends 
    JpaRespository<YourEntity,Long>{ 
    Page<YourEntity> findAll(Pageable pageable); 
    }

，然后在服务，你必须使用查询接口写道：和接线库

开始=>

@Autowired 
private YourEntityRepository repo; 

public List<YourEntity> getYourEntityByPage(int pageNumb){ 
     int size=8; 
     PageRequest request=new PageRequest(pageNumb-1, size); 
     return this.convertPageToList(this.repo.findAll (request)); 
    }

在这里，你必须转换页面列出

private List<YourEntity> convertPageToList(Page<YourEntity> page){ 
     List<YourEntity> items=new ArrayList<YourEntity>(); 
     Iterator<YourEntity> iterator= page.iterator(); 
     while(iterator.hasNext()) 
      items.add(iterator.next()); 
     return items; 
}

在用户界面上只有你必须要做的事情是要发送到服务器端的请求与页码（https://localhost:8080/path/ {pageNumber}）在控制器中，您将处理此请求调用分页的服务，并且响应将是您已在服务中转换的列表（该列表必须从“提取”身体和显示）

开始=“4”>

分页jQuery数据表和春季问题

相关推荐