pagination.js分页系统Try Catch失效，需实现无数据页面提示

问题描述 #

我在使用pagination.js库实现分页功能时，Try Catch语句无法正常工作。当服务器未返回任何数据时，该库会抛出错误：
Uncaught Error: Pagination: dataSource.items is undefined.
我希望在数据库无数据时，在页面上显示提示信息。以下是我的代码：

try {
  $('#url-list').pagination({
    dataSource: 'get_data.php?action=all-urls',
    locator: 'items',
    totalNumberLocator: function(response) {
      return response.totalRows;
    },
    pageSize: 10,
    className: 'paginationjs-theme-blue paginationjs-big',
    afterPreviousOnClick: function() {
      window.location = "dashboard.php#urls";
    },
    afterPageOnClick: function() {
      window.location = "dashboard.php#urls";
    },
    afterNextOnClick: function() {
      window.location = "dashboard.php#urls";
    },
    callback: function(data) {
      var paginationWrapper = $('#url-list');
      var dataContainer = $('.url-list-wrapper', paginationWrapper);

      var html = '<ul class="p-0">';

      $.each(data, function(index, items) {
        html += '<div class="url-wrapper p-4 mb-4"><div class="is-flex is-justify-content-space-between"><p class="url-wrapper-limit is-size-5">' + items.long_url + '</p><p class="ml-3 is-size-5">' + items.date + '</p></div><hr class="url-wrapper-divider"><div class="is-flex is-justify-content-space-between mb-4"><a href="https://dcsr.link/' + items.url_id + '" class="url-wrapper-limit is-size-5">dcsr.link/' + items.url_id + '</a><div class="is-flex is-align-items-center"><span class="tag is-primary mr-1 has-text-weight-bold is-size-6">' + items.clicks + '</span><p class="is-size-5">Clicks</p></div></div><div class="url-wrapper-footer is-flex is-justify-content-space-between"><div><button class="button is-primary mr-1"><i class="fa-solid fa-copy"></i></button><button class="button is-primary mr-1"><i class="fa-solid fa-pen-to-square"></i></button><button class="button is-primary mr-1"><i class="fa-solid fa-qrcode"></i></button><button class="button is-danger mr-1"><i class="fa-solid fa-trash"></i></button></div><div><button class="button is-primary"><i class="fa-solid fa-chart-line mr-2"></i><p>Stats</p></button></div></div></div>';
      });

      html += '</ul>';

      dataContainer.html(html);
    }
  });
} catch (error) {
  alert('Server didn\'t return any item!')
}

原因分析 #

外层try/catch无法捕获错误，是因为pagination.js内部通过异步请求拉取数据，错误是在异步回调函数中抛出的，同步的try/catch无法捕获异步代码的错误。

解决方案 #

方法一：规范后端返回结构（推荐） #

修改get_data.php接口，确保即使无数据时，也返回包含items空数组和totalRows字段的JSON结构：

{
  "items": [],
  "totalRows": 0
}

之后在callback中判断数据是否为空，显示提示信息：

callback: function(data) {
  var paginationWrapper = $('#url-list');
  var dataContainer = $('.url-list-wrapper', paginationWrapper);

  // 无数据时显示提示
  if (data.length === 0) {
    dataContainer.html('<p class="text-center py-5">暂无数据</p>');
    return;
  }

  var html = '<ul class="p-0">';
  // 原有数据渲染代码...
  $.each(data, function(index, items) {
    html += '<div class="url-wrapper p-4 mb-4">...</div>';
  });
  html += '</ul>';

  dataContainer.html(html);
}

方法二：捕获异步错误 #

如果无法修改后端，可通过全局事件捕获异步错误，或使用pagination.js的错误回调（若库支持）：

全局捕获异步错误

window.addEventListener('unhandledrejection', function(event) {
  if (event.reason?.message.includes('Pagination: dataSource.items is undefined')) {
    $('.url-list-wrapper').html('<p class="text-center py-5">暂无数据</p>');
    event.preventDefault(); // 阻止浏览器默认错误提示
  }
});

库内置错误回调（若支持）

检查pagination.js文档，若提供error配置项，可直接配置：

$('#url-list').pagination({
  // 其他配置...
  error: function(err) {
    if (err.message.includes('dataSource.items is undefined')) {
      $('.url-list-wrapper').html('<p class="text-center py-5">暂无数据</p>');
    }
  }
});

内容的提问来源于stack exchange，提问作者joaopcos