用ajax写出新增、删除、修改等操作并带有分页

以下是使用AJAX实现增删改操作并包含分页的基本示例。这里使用jQuery来简化AJAX请求的编写。

HTML 部分：

<div id="data-container">
  <!-- 数据加载区域 -->
</div>
<div id="pagination-container">
  <!-- 分页控件 -->
</div>

JavaScript 部分（使用 jQuery）：

$(document).ready(function() {
  loadData(1); // 加载第一页数据
 
  // 分页点击事件
  $('#pagination-container').on('click', 'a', function(e) {
    e.preventDefault();
    loadData($(this).data('page'));
  });
 
  // 新增操作
  $('#new-item-form').on('submit', function(e) {
    e.preventDefault();
    var data = $(this).serialize();
    $.post('add-item-endpoint', data)
      .done(function(response) {
        // 成功后重新加载当前页数据
        loadData(currentPage);
      })
      .fail(function() {
        console.log('新增失败');
      });
  });
 
  // 删除操作
  $('#data-container').on('click', '.delete-link', function() {
    var itemId = $(this).data('id');
    $.ajax({
      url: 'delete-item-endpoint/' + itemId,
      type: 'DELETE',
      success: function() {
        // 成功后重新加载当前页数据
        loadData(currentPage);
      },
      error: function() {
        console.log('删除失败');
      }
    });
  });
 
  // 修改操作
  $('#data-container').on('click', '.edit-link', function() {
    var itemId = $(this).data('id');
    // 显示编辑表单或进行其他编辑操作
  });
});
 
// 加载数据和分页
function loadData(page) {
  $.ajax({
    url: 'get-data-endpoint?page=' + page,
    type: 'GET',
    success: function(data) {
      $('#data-container').html(data.html); // 假设返回的数据包含html
      $('#pagination-container').html(data.pagination); // 假设返回的数据包含分页html
      currentPage = page; // 记录当前页码
    },
    error: function() {
      console.log('加载数据失败');
    }
  });
}

后端 PHP 示例代码（仅为示例，具体实现依赖于后端框架或语言）：

// 获取数据和分页
public function getDataEndpoint() {
    $page = $_GET['page'];
    $dataPerPage = 10;
    $totalItems = $this->getTotalItemsCount();
    $totalPages = ceil($totalItems / $dataPerPage);
    $currentPage = min(max($page, 1), $totalPages);
    $offset = ($currentPage - 1) * $dataPerPage;
 
    $items = $this->getItems($offset, $dataPerPage);
    $paginationHtml = $this->generatePaginationHtml($currentPage, $totalPages);
 
    return [
        'html' => renderItemsHtml($items),
        'pagination' =