一個簡單的JQuery自適應分頁插件twbsPagination

下載地址：http://esimakin.github.io/twbs-pagination/

 

1 解決totalPages不更新的問題  （先移除然后重新加入DOM樹中）在使用twbsPagination之前做。
$('#visible-pages-example').remove();
$("#pagination_box").append('<ul id="visible-pages-example" class="pagination"></ul>');

2 實現ajax分頁
$('#visible-pages-example').twbsPagination({
    currentPage: currentPage,
    totalPages:totalPages,
    first: "首頁",
    last: "未頁",
    prev: '上一頁',
    next: '下一頁',
    startPage: 1,
    visiblePages:totalPages>10?10:totalPages,解決當totalPages小於visiblePages頁碼變負值的bug
    version: '1.1',
    onPageClick: function (event, page) {
        //  點擊頁碼發起ajax請求
        //點擊首頁ajax異步請求
            $(this).addClass("active").siblings().removeClass("active");
            var aj = $.ajax({
                url: "http://10.248.26.212:8090/v1/logParseRule/select/" + (page - 1) * $(".select").val() + "/" + $(".select").val() + "",
                //url: "http://localhost:8090/v1/logParseTool/parseCSV",
                contentType: "application/json",
                data: strJson,
                type: 'post',
                cache: false,
                dataType: 'json',
                success: function (json) {
                    console.log(json.data);
                    totalPages = json.data.totalPages;
                    currentPage = json.data.currentPage;
                    totalRows = json.data.totalRows;
                    oTbody = document.getElementById("tbody");
                    oTrs = oTbody.getElementsByTagName("tr");
                    result = json.data.datas;
                    $("#currentPage").html(currentPage);
                    $("#totalPages").html(totalPages);
                    $("#totalRows").html(totalRows);
                    $(oTrs).children().remove();
                    var result = json.data.datas;
                    for (var i = 0; i < result.length; i++) {
                        $("#tbody").append("<tr><th scope='row'>" + result[i].id + "</th><td>" + result[i].name + "</td><td>" + result[i].mode + "</td> <td>" + result[i].descs + "</td><td> <span class='btn btn-default'>查看</span> <span class='btn btn-primary'>編輯</span> <span class='delete btn btn-danger'>刪除</span> </td></tr");
                    }
                    //點擊刪除刪除本行並ajax請求刪除數據
                    $(".delete").click(function(){
                        $.ajax({
                            url: "http://10.248.26.212:8090/v1/logParseRule/delete/"+$(this).parents("tr").children().eq(0).text()+"",
                            contentType: "application/json",
                            type: 'post',
                            cache: false,
                            dataType: 'json',
                            success: function (json) {
                            }
                        });
                        $(this).parents("tr").remove();
                    });
                },
                error: function () {
                    return;
                }
            });
    }
});