分页jquery数据表和Spring问题
Posted
技术标签:
【中文标题】分页jquery数据表和Spring问题【英文标题】：pagination jquery data table And Spring issue 【发布时间】：2017-12-20 10:06:42 【问题描述】：我一直在尝试对用于显示一些数据的数据表进行分页。让我解释一下整个场景。
首先，我有一个服务代码，可以让我了解所有行业：
@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 class="sorting" tabindex="0"
aria-controls="DataTables_Table_0" rowspan="1" colspan="1">ID</th>
<th class="sorting" tabindex="0"
aria-controls="DataTables_Table_0" rowspan="1" colspan="1">Industry
in English</th>
<th class="sorting" tabindex="0"
aria-controls="DataTables_Table_0" rowspan="1" colspan="1">Industry
in Arabic</th>
<th class="sorting" tabindex="0"
aria-controls="DataTables_Table_0" rowspan="1" colspan="1">Added
Date</th>
<th class="sorting" tabindex="0"
aria-controls="DataTables_Table_0" rowspan="1" colspan="1">By</th>
<th 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));
这就是我所做的一切。如何在表格显示后为其添加分页？
【问题讨论】：
【参考方案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);
然后在服务中，您必须使用在接口中编写的查询并连接存储库
@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;
在 UI 上，您唯一要做的就是向服务器端发送带有页码 (https://localhost:8080/path/pageNumber) 的请求 在控制器中，您将处理此请求，调用服务 分页和响应将是您已转换的列表 在服务中（列表必须从正文中“提取”并且 显示）
【讨论】：
以上是关于分页jquery数据表和Spring问题的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 jQuery 和 Django 分页附加数据页面？