jquery----分页插件

前端分页插件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");
            });