一个简单的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;                }            });    }});