前端分页插件twbsPagination的使用
1.引入jquery与twbsPagination
2.引入div,展示分页效果
<div style="text-align: right;"> <ul id="pagination" class="pagination"></ul> </div>
3.script中引入函数
//分页 $('#pagination-demo').twbsPagination({ //total总记录数,就是多少条数据 pages总页数 totalPages: ${page.total}, visiblePages: 5, first:'首页', last:'末页', prev:'上一页', next:'下一页', href:"?p={{number}}" });
示例
<!--分页--> $("#pagination").twbsPagination({ totalPages:[[${pageResult.getTotalPage()}]], visiblePages: 5, //最多显示5页 startPage:[[${pageResult.getCurrentPage()}]], onPageClick: function (event, page) { $("#currentPage").val(page); //修改form表单中的中查询的页数的值 $("#searchForm").submit(); //利用form表单提交数据 } })
可能需要currentPage
totalPages: [[${pageResult.totalPage}]], currentPage: [[${pageResult.currentPage}]], startPage:[[${pageResult.currentPage}]],
如何修改表中的数据
方式1:如果需要修改的数据在图中没有完全显示,那么我们可以通过点击修改按钮在进行发送一个url请求将所有的数据返回给前端。通过获得的数据直接修改模态框中的值,在显示模态框。
方式2:如果需要修改的数据已经在图中显示完全,那么我们可以通过获取列表中的数据来修改模态框中的值,在显示模态框。
如果我们不使用模态对话框,我们可以将表格中的数据在点击修改按钮的时候,动态变成input输入框。
如果需要获取列表中的数据,需要通过选择器来查找元素比较麻烦,一个简单的办法是直接生成列表的时候,直接将一列的数据封装成json放在修改这个标签中。
<a href="javascript:void(-1);" class="edit_Btn" data-jsonstr='' th:data-jsonstr="${vo.getJsonString()}">修改</a>
$(".edit_Btn").click(function () { var json = $(this).data("jsonstr"); $("#systemDictionaryId").val(json.id); $("#title").val(json.title); $("#sn").val(json.sn); $("#systemDictionaryModal").modal("show"); });