分页jquery数据表和Spring问题

Question

我一直在尝试对用于显示一些数据的数据表进行分页。让我解释一下整个场景。

首先，我有一个服务代码，可以让我了解所有行业：

@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));
    }

这就是我所做的一切。如何在表格显示后为其添加分页？

Answer 1

试试这些步骤：

1. 您应该在 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);
     }

1. 然后在服务中，您必须使用在接口中编写的查询并连接存储库

@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;
}

4. 在 UI 上，您唯一要做的就是向服务器端发送带有页码 (https://localhost:8080/path/{pageNumber}) 的请求 在控制器中，您将处理此请求，调用服务 分页和响应将是您已转换的列表 在服务中（列表必须从正文中“提取”并且 显示）