如何利用html、js、css实现从数据库中读取数据并以分页的表格形式展示，提供源代码

以下是一个基于HTML、JavaScript和PHP的简单表格分页代码：

HTML代码：

<table id="myTable">
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行将在JavaScript中动态添加 -->
  </tbody>
</table>

<div id="pagination"></div>

JavaScript代码：

var table = document.getElementById("myTable");
var rowsPerPage = 10; // 每页显示的行数
var currentPage = 0;

function updateTable(data) {
  // 清空表格除表头外的所有行
  for (var i = 1; i < table.rows.length; i++) {
    table.rows[i].style.display = "none";
  }
  // 添加新的数据行
  for (var i = currentPage * rowsPerPage; i < Math.min((currentPage + 1) * rowsPerPage, data.length); i++) {
    var row = table.insertRow(-1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = data[i].col1;
    cell2.innerHTML = data[i].col2;
    cell3.innerHTML = data[i].col3;
    row.style.display = "table-row";
  }
}

function previousPage() {
  if (currentPage > 0) {
    currentPage--;
    getData();
  }
}

function nextPage() {
  if ((currentPage + 1) * rowsPerPage < totalRows) {
    currentPage++;
    getData();
  }
}

function createPagination() {
  var pagination = document.getElementById("pagination");
  var pageCount = Math.ceil(totalRows / rowsPerPage);
  for (var i = 0; i < pageCount; i++) {
    var pageLink = document.createElement("a");
    pageLink.href = "#";
    pageLink.innerHTML = i + 1;
    pageLink.onclick = function() {
      currentPage = this.innerHTML - 1;
      getData();
    };
    pagination.appendChild(pageLink);
  }
}

function getData() {
  // 向服务器请求数据
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var data = JSON.parse(xhr.responseText);
      updateTable(data);
    }
  };
  var start = currentPage * rowsPerPage;
  var length = rowsPerPage;
  xhr.open("GET", "get_data.php?start=" + start + "&length=" + length, true);
  xhr.send();
}

// 获取总行数
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    totalRows = parseInt(xhr.responseText);
    createPagination();
    getData();
  }
};
xhr.open("GET", "get_total_rows.php", true);
xhr.send();

CSS代码：

table {
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 5px;
}
#pagination a {
  display: inline-block;
  border: 1px solid black;
  margin: 0 5px;
  padding: 5px;
}

PHP代码（get_total_rows.php）：

<?php
// 获取总行数
$conn = mysqli_connect("localhost", "username", "password", "database");
$result = mysqli_query($conn, "SELECT COUNT(*) FROM table_name");
$row = mysqli_fetch_array($result);
echo $row[0];
mysqli_close($conn);
?>

PHP代码（get_data.php）：

<?php
// 获取数据
$start = $_GET["start"];
$length = $_GET["length"];
$conn = mysqli_connect("localhost", "username", "password", "database");
$result = mysqli_query($conn, "SELECT col1, col2, col3 FROM table_name LIMIT $start, $length");
$data = array();
while ($row = mysqli_fetch_array($result)) {
    array_push($data, array("col1" => $row[0], "col2" => $row[1], "col3" => $row[2]));
}
echo json_encode($data);
mysqli_close($conn);
?>

上述代码中，PHP代码用于从数据库中获取数据。`get_total_rows.php`用于获取数据总行数，`get_data.php`用于获取分页后的数据。在JavaScript中，`updateTable`函数用于更新表格中的数据行，`getData`函数用于向服务器请求数据，`createPagination`函数用于生成分页器。CSS代码用于设置表格和分页器的样式。

请注意，上述代码仅为示例代码，需要根据实际情况进行修改。例如，需要将数据库连接信息、数据表名称、列名等修改为实际的值。