Twbs 分页无法在数据表中加载新页面数据 [英] Twbs pagination unable to load new page data in datatable
问题描述
您好，我正在处理分页，发现当我单击第二页时无法从 twbs 插件加载数据.实际上该方法是从ajax调用中调用的，但数据表数据仍然相同.谁能告诉我如何用来自服务器的新数据填充表.
查看 thymeleaf 和 spring boot 中的代码.
<头><tr role="row"><th class="sorting_desc" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Sr.No.: 激活对列升序排序" style="width: 43px;"aria-sort="descending">Sr.No.</th><th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="名称:激活以升序对列进行排序" style="width: 41px;">名称</th></thead><tr role="row" class="odd" th:each="compregloop,incr : ${compregList}"><td th:text="${incr.count}" class="sorting_1"></td><td th:text="${compregloop.companyname}"></td></tr></tbody>
<div class="text-center"><div class="col-sm-12"><ul id="pagination-demo" class="pagination-sm"></ul><div id="page-content" class="page-content">页面 1</div>
<script type="text/javascript">变量数据 = {第2页"，尺寸":10"}$('#pagination-demo').twbsPagination({总页数:14，可见页数:6，下一个: '下一个',上一个: '上一个',onPageClick:函数(事件，页面){//获取内容并在此处渲染$('#page-content').text('Page ' + page) + ' content here';var datapage = { "page":page};$.ajax({类型:POST"，url: "/你好/",数据:数据页，contentType:'应用程序/json',成功:功能(数据){$('shortstorage').html(数据)}});}});
控制器如下:
@RequestMapping(value = "/getcompany", method = RequestMethod.GET)public String getCompany(Model model,HttpServletRequest request,Optional pageSize, Optional page){///获取登录用户System.out.println("pageSize--------------------------------");System.out.println(page);//由 sargam 添加的代码int evalPageSize = pageSize.orElse(INITIAL_PAGE_SIZE);int evalPage = (page.orElse(0) <1) ?INITIAL_PAGE : page.get() - 1;System.out.println(evalPage+"-------------------------"+evalPageSize);页面<公司注册>compregPage = companyregister.findAll(PageRequest.of(evalPage, evalPageSize));列表<公司注册>compregList = compregPage.getContent();model.addAttribute("compregList",compregList);返回管理员/公司"；}@RequestMapping(value = "/helloo", method = RequestMethod.POST ,消耗 = MediaType.APPLICATION_JSON_VALUE)public String mainWithParamhello(@RequestBody String data, Model model, HttpServletRequest request,RedirectAttributes redirectAttributes) {System.out.println(数据);System.out.println("hello2 内部");redirectAttributes.addAttribute("pageSize","10");redirectAttributes.addAttribute("page", "2");返回重定向:/getcompany"；} 一些需要注意的事项:
您想在加载后更新 HTML 文档，因此
$(document).ready(...).决定您希望更改生效的节点.使用 jquery 选择器在 Ajax 成功时更新 DOM，即
#shortstorage.找到一种将 Ajax 响应中的数据呈现到表格的方法.这个例子只是将输出转储到控制台和页面上.
<小时>
这里有一些内容供您了解，$( document ).准备好()
Hi I am working on pagination and found that unable to load data from twbs plugin when i click on the 2nd page. in fact the method is called from the ajax call but the datatable data is still the same. can someone tell me what to do to fill the table with the new data from the server.
have a look to the code in thymeleaf and spring boot.
<table id=shortstorage class="table table-hover table-bordered dataTable no-footer" role="grid" aria-describedby="mtsdetails_info">
<thead>
<tr role="row">
<th class="sorting_desc" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Sr.No.: activate to sort column ascending" style="width: 43px;" aria-sort="descending">Sr.No.</th>
<th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 41px;">Name</th>
</thead>
<tbody>
<tr role="row" class="odd" th:each="compregloop,incr : ${compregList}">
<td th:text="${incr.count}" class="sorting_1"></td>
<td th:text="${compregloop.companyname}"></td>
</tr>
</tbody>
</table>
<div class="text-center">
<div class="col-sm-12">
<ul id="pagination-demo" class="pagination-sm"></ul>
</div>
<div id="page-content" class="page-content">Page 1</div>
</div>
<script type="text/javascript">
var data = {
"page" : "2",
"size" :"10"
}
$('#pagination-demo').twbsPagination({
totalPages: 14,
visiblePages: 6,
next: 'Next',
prev: 'Prev',
onPageClick: function (event, page) {
//fetch content and render here
$('#page-content').text('Page ' + page) + ' content here';
var datapage = { "page":page};
$.ajax({
type: "POST",
url: "/helloo/",
data:datapage,
contentType:'application/json',
success: function (data) {
$('shortstorage').html(data)
}
});
}
});
</script>
The Controller is as folows:
@RequestMapping(value = "/getcompany", method = RequestMethod.GET)
public String getCompany(Model model,HttpServletRequest request,Optional<Integer> pageSize, Optional<Integer> page){
/// Getting Logged in user
System.out.println("pageSize--------------------------------");
System.out.println(page);
//code added by sargam
int evalPageSize = pageSize.orElse(INITIAL_PAGE_SIZE);
int evalPage = (page.orElse(0) < 1) ? INITIAL_PAGE : page.get() - 1;
System.out.println(evalPage+"--------------------------"+evalPageSize);
Page<CompanyRegistration> compregPage = companyregister.findAll(PageRequest.of(evalPage, evalPageSize));
List<CompanyRegistration> compregList = compregPage.getContent();
model.addAttribute("compregList",compregList);
return "admin/company";
}
@RequestMapping(value = "/helloo", method = RequestMethod.POST , consumes = MediaType.APPLICATION_JSON_VALUE)
public String mainWithParamhello(@RequestBody String data, Model model, HttpServletRequest request,
RedirectAttributes redirectAttributes) {
System.out.println(data);
System.out.println("Inside hello2");
redirectAttributes.addAttribute("pageSize","10");
redirectAttributes.addAttribute("page", "2");
return "redirect:/getcompany";
}
Some few things to look at:
You want to update your HTML document once it has loaded, hence
$(document).ready(...).Decide on the node you want changes to take effect. Use jquery selectors to update the DOM on Ajax success i.e.
#shortstorage.Find a way to present your data from the Ajax response to a table. This example just dumps the output to the console and onto the page.
<script type="text/javascript">
// Note: Run your scripts when the page has loaded.
$(document).ready(function () {
var data = {
page: "2",
size: "10"
};
$("#pagination-demo").twbsPagination({
totalPages: 14,
visiblePages: 6,
next: "Next",
prev: "Prev",
onPageClick: function (event, page) {
//fetch content and render here
$("#page-content").text("Page " + page) + " content here";
var datapage = { page: page };
$.ajax({
// type: "POST",
// Note: using an API placeholder for fake responses
url: "http://jsonplaceholder.typicode.com/users",
// data: datapage,
// contentType: "application/json",
success: function (data) {
/**
* Note:
* 1. The node '#shortstorage' is where you want the changes to take effect.
* 2. You will need to find a way to present the data as a table before you render the page.
*/
$("#shortstorage").html(JSON.stringify(data));
console.log(data);
}
});
}
});
});
</script>
Here's something for you to learn more about, $( document ).ready()
这篇关于Twbs 分页无法在数据表中加载新页面数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
