Try catch 在分页系统上不起作用

Question

Try catch 对我的代码不起作用，我正在使用一个名为“pagination.js”的库来创建分页，当我的服务器没有返回任何项目时，库返回一个错误：

未捕获的错误：分页：dataSource.items 未定义。

当数据库中没有项目时，我想在屏幕上显示一条消息

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!')
  }

Answer 1

而不是try/catch检查data.length与if/else条件。

回调 function 中的一些类似的东西。

callback: function(data) {
    if (data.length > 0) {
      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);
    } else {
      alert('Server didn\'t return any item!')
      }
    }