• 一个简单的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;
    }
    });
    }
    });
  • 相关阅读:
    将来要干啥
    选新技术考虑点
    hdfs 创建一个新用户
    linux下实现mysql数据库定时备份
    PostgreSQL的安装和卸载,远程连接
    PostgreSQL语法
    【NiFi系列】1-基本介绍
    大数据相关资源网址
    MySQL主从复制配置
    MySQL设置免密登录
  • 原文地址:https://www.cnblogs.com/cxf520/p/5737458.html
Copyright © 2020-2023  润新知