完美实现bootstrap分页查询

实现 Bootstrap 分页查询的步骤如下：

1. 引入 Bootstrap

在 HTML 文件中引入 Bootstrap 的 CSS 和 JavaScript 文件：

<!-- 引入 Bootstrap CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">

<!-- 引入 jQuery JavaScript 文件 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

<!-- 引入 Bootstrap JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

2. 实现后端分页查询

在后端代码中实现分页查询，返回页码和每页显示的数据。

例如，使用 Python Flask 框架实现分页查询：

from flask import Flask, jsonify, request
app = Flask(__name__)

@app.route('/data')
def get_data():
  page = int(request.args.get('page', 1))
  limit = int(request.args.get('limit', 10))

  # 查询数据库，获取数据和总记录数
  data = [{'id': i, 'name': f'item {i}'} for i in range(1, 101)]
  total = len(data)

  # 对数据进行分页处理
  start = (page - 1) * limit
  end = start + min(limit, total - start)
  data = data[start:end]

  # 返回数据和总记录数
  return jsonify({
    'code': 0,
    'msg': 'success',
    'count': total,
    'data': data,
  })

if __name__ == '__main__':
  app.run()

3. 实现前端分页显示

在 HTML 页面中实现分页显示的功能。

例如，使用 jQuery 发送 AJAX 请求，获取分页数据并通过 Bootstrap 显示：

<!-- 分页查询表格 -->
<table class="table table-striped">
  <thead>
    <tr>
      <th>编号</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody id="dataList">
  </tbody>
</table>

<!-- 分页导航栏 -->
<ul class="pagination"></ul>

<script>
// 发送 AJAX 请求获取分页数据
function loadData(page) {
  $.get('/data', { page: page, limit: 10 }, function(res) {
    if (res.code != 0) {
      alert('请求数据失败！');
      return;
    }

    // 渲染数据列表
    $('#dataList').empty();
    for (var i = 0; i < res.data.length; i++) {
      var item = res.data[i];
      var tr = $('<tr></tr>');
      $('<td></td>').text(item.id).appendTo(tr);
      $('<td></td>').text(item.name).appendTo(tr);
      $('#dataList').append(tr);
    }

    // 渲染分页导航栏
    $('.pagination').empty();
    var startIndex = Math.max(1, page - 2);
    var endIndex = Math.min(res.count, page + 2);
    for (var i = startIndex; i <= endIndex; i++) {
      var li = $('<li></li>').addClass('page-item');
      var a = $('<a></a>').addClass('page-link')
                           .text(i)
                           .attr('href', 'javascript:void(0);')
                           .data('page', i);
      if (i == page) {
        li.addClass('active');
      } else {
        a.click(function() {
          loadData($(this).data('page'));
        });
      }
      li.append(a);
      $('.pagination').append(li);
    }
  });
}

$(function() {
  // 初始化加载第一页数据
  loadData(1);
});
</script>

实现步骤和示例代码已经给出，如果还有问题请详细说明。