Try catch doesn't work on pagination system

Viewed 51

Try catch doesn't work on my code, I'm using a library to create pagination called "pagination.js", and when my server doesn't return any item, the library return an error:

Uncaught Error: Pagination: dataSource.items is undefined.

I want to give a message on the screen when there's no item on database

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

Instead of try/catch check data.length with if/else condition.

Some thing like this inside callback 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!')
      }
    }
Related