Thymeleaf 表更新而无需重新加载页面
Posted
技术标签:
【中文标题】Thymeleaf 表更新而无需重新加载页面【英文标题】:Thymeleaf table update without page reload 【发布时间】:2019-07-10 10:42:14 【问题描述】:我正在使用 thymeleaf 属性渲染数据。但是我现在正在实现“搜索”按钮,并且想要在不重新加载的情况下进行。
我有属性 depatments
,它从 db 渲染 List<Department>
我知道,如何通过 ajax 来实现,但是我需要用 RestController 替换属性,它会给我 JSON。
是否可以在不重新加载页面的情况下从属性中获取数据? Ajax,还是js,还是别的什么?
谢谢
【问题讨论】:
【参考方案1】:是的,您可以通过使用片段和 ajax 来实现这一点。在你的控制器中
@GetMapping("/url")
public ModelAndView getResultBySearchKey()
List<depatments> areaList= new ArrayList<>();//results from db
ModelAndView mv= new ModelAndView("search::search_list");
mv.addObject("searchList",areaList);
return mv;
并在您的 search.html 中添加以下代码。并且不要忘记使用内联 javascript。
function loadSearchResult()
$.ajax(
type: 'get',
url: /*[[ @'/url' ]]*/,
success: function(data)
/*<![CDATA[*/
$('.search_list').html(data);
/*]]>*/
,
)
<button class="btn btn-primary btn-sm"
th:onclick="'loadSearchResult();'">Search</button>
<div class="row">
<div class="col-md-12 search_list">
<div class="table-responsive" th:fragment="search_list">
<table
class="table table-bordered ">
<thead>
<tr>
<th>SL No.</th>
<th>Actions</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<!-- your desired rows-->
</tbody>
【讨论】:
以上是关于Thymeleaf 表更新而无需重新加载页面的主要内容,如果未能解决你的问题,请参考以下文章