一個簡單的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;                }            });    }});