bootstarp作业一：制作分页器

html代码如下：

  <div id="app">
      <table border="1" cellspacing="0" cellpadding="0" id="table" class="table-striped">
        <tr>
          <th>#</th>
          <th>name</th>
          <th>age</th>
          <th>gender</th>
          <th>comment</th>
        </tr>
      </table>
      <ul class="pagination">
        <li class="first-page">首页</li>
        <li class="prev-page">上一页</li>
        <button class="btn btn-default">1</button>
        <button class="btn btn-default">2</button>
        <button class="btn btn-default">3</button>
        <button class="btn btn-default">4</button>
        <button class="btn btn-default">5</button>
        <li class="next-page">下一页</li>
        <li class="last-page">尾页</li>
        <li><input type="text" class="form-control" placeholder="Search" /></li>
        <!-- 回车，失去焦点 -->
        <!--<input>{
    {
    queryInfo.pageNum}}</input>-->
      </ul>
    </div>

简单设置一下样式：
css:

<style>
      #app {
    
        width: 50%;
        margin: 50px auto;
      }

      #table {
    
        width: 100%;
        text-align: center;
      }
      #table tr {
    
        height: 30px;
      }

      .pagination {
    
        display: flex;
        align-items: center;
        list-style: none;
        justify-content: center;
      }

      .pagination > li {
    
        border: 1px solid #ddd;
        border-right: none;
        margin-right: 10px;
        cursor: pointer;
      }

      .pagination > li:last-child {
    
        border: 1px solid #ddd;
      }
      button {
    
        margin-right: 10px;
      }
      .btn-color {
    
        background-color: #c00000;
        color: #ffffff;
      }
    </style>

当然还需要在html中引用bootstarp的插件，可以节省写css

js:

//模拟的从远程服务获得到的数据
let arr = [];
let Arr = [
  "rgba(187, 255, 255, 0.4)",
  "rgba(0, 255, 127, 0.4)",
  "rgba(192, 255, 62, 0.4)",
  "rgba(0, 191, 255, 0.4)",
  "rgba(255, 165, 0, 0.4)",
];
function init() {
    
  for (let i = 0; i < 23; i++) {
    
    let person = {
    };
    person.name = "tony" + (i + 1);
    person.age = parseInt(Math.random() * 8) + 18;
    person.gender = Math.random() > 0.5 ? "男" : "女";
    arr.push(person);
  }
}

init();
console.log(arr);

//1、页面的渲染数据的数组
let dataList = [];
//2、分页参数
let queryInfo = {
    
  //当前页码
  pageNum: 1,
  //一页几条
  pageSize: 5,
  //总条数
  total: arr.length,
};

//3、获得当前页码对应的渲染数据
function getDataList() {
    
  dataList = [];
  let start = (queryInfo.pageNum - 1) * queryInfo.pageSize;
  let end = start + queryInfo.pageSize;
  if (end >= queryInfo.total) {
    
    end = queryInfo.total;
  }
  for (let i = start; i < end; i++) {
    
    dataList.push(arr[i]);
  }
  console.log(queryInfo);
}

//4、拼接页面数据
function renderData() {
    
  getDataList();
  let table = $("#table");
  table.find("tr:not(:first)").remove();
  dataList.forEach(function (item, index) {
    
    let tr = `<tr> <td>${
      index + 1}</td> <td>${
      item.name}</td> <td>${
      item.age}</td> <td>${
      item.gender}</td> <td></td> </tr>`;
    table.append(tr);
  });
}

$(function () {
    
  renderData();

  $(".last-page").click(function () {
    
    queryInfo.pageNum = Math.ceil(queryInfo.total / queryInfo.pageSize);
    renderData();
    $("#table").css("background", Arr[4]);
    $(".btn").eq(4).css("background-color", "#c00000").css("color", "#ffffff");
    $(".btn").eq(4).siblings().css("background-color", "#ffffff").css("color", "#000000");
  });

  $(".prev-page").click(function () {
    
    queryInfo.pageNum--;
    if (queryInfo.pageNum <= 0) {
    
      queryInfo.pageNum = 1;
    }
    renderData();
    $("#table").css("background", Arr[queryInfo.pageNum - 1]);
    $(".btn")
      .eq(queryInfo.pageNum - 1)
      .css("background-color", "#c00000")
      .css("color", "#ffffff");
    $(".btn")
      .eq(queryInfo.pageNum - 1)
      .siblings()
      .css("background-color", "#ffffff")
      .css("color", "#000000");
  });

  $(".next-page").click(function () {
    
    queryInfo.pageNum++;
    let totalPages = Math.ceil(queryInfo.total / queryInfo.pageSize);
    if (queryInfo.pageNum >= totalPages) {
    
      queryInfo.pageNum = totalPages;
    }
    renderData();
    $(".btn")
      .eq(queryInfo.pageNum - 1)
      .css("background-color", "#c00000")
      .css("color", "#ffffff");
    $(".btn")
      .eq(queryInfo.pageNum - 1)
      .siblings()
      .css("background-color", "#ffffff")
      .css("color", "#000000");
    $("#table").css("background", Arr[queryInfo.pageNum - 1]);
  });

  $(".first-page").click(function () {
    
    queryInfo.pageNum = 1;
    renderData();
    $("#table").css("background", Arr[0]);
    $(".btn").eq(0).css("background-color", "#c00000").css("color", "#ffffff");
    $(".btn").eq(0).siblings().css("background-color", "#ffffff").css("color", "#000000");
  });

  $(".btn").click(function () {
    
    var index = $(this).index() - 1;
    queryInfo.pageNum = index;
    renderData();
    $(this).css("background-color", "#c00000").css("color", "#ffffff");
    $(this).siblings().css("background-color", "#ffffff").css("color", "#000000");
    $("#table").css("background", Arr[index - 1]);
  });

  //输入框绑定失去焦点事件
  $(".form-control").blur(function () {
    
    //获取当前输入的值
    var value = $(this).val();
    console.log(value);
    //判定值的范围是否符合
    if (value < 0 || value > 5 || value == "") {
    
      return false;
    } else {
    
      queryInfo.pageNum = value - 1;
      renderData();
      //对应的按钮处于激活状态
      $(".btn")
        .eq(value - 1)
        .css("background-color", "#c00000")
        .css("color", "#ffffff");
      $(".btn")
        .eq(value - 1)
        .siblings()
        .css("background-color", "#ffffff")
        .css("color", "#000000");
    }
    $("#table").css("background", Arr[value - 1]);
  });
  //给输入框绑定键盘事件
  $(".form-control").keydown(function (event) {
    
    //当按下回车时
    if (event.keyCode === 13) {
    
      var value = $(this).val();
      console.log(value);
      if (value < 0 || value > 5 || value == "") {
    
        alert("页码输入有误！");
        return false;
      }
      queryInfo.pageNum = value;
      renderData();
      $(".btn")
        .eq(value - 1)
        .css("background-color", "#c00000")
        .css("color", "#ffffff");
      $(".btn")
        .eq(value - 1)
        .siblings()
        .css("background-color", "#ffffff")
        .css("color", "#000000");
    }
    $("#table").css("background", Arr[value - 1]);
  });
});

效果图如下