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");
            });