Edit in JSFiddle

(function ($) {

  $.widget("ui.table", {
    options: {
      name: "table",
      default_controls: [{
        id: 'first',
        icon: 'ui-icon-arrowthickstop-1-w'
      }, {
        id: 'previous',
        icon: 'ui-icon-arrowthick-1-w'
      }, {
        id: 'next',
        icon: 'ui-icon-arrowthick-1-e'
      }, {
        id: 'last',
        icon: 'ui-icon-arrowthickstop-1-e'
      }],
      controls: [],
      page_size: 30,
      page: 1,
      page_count: 1,
      oddclass: 'table_odd',
      evenclass: 'table_even'
    },

    _init: function () {},

    _create: function () {
      $(this).data('old_content', this.element.html());
      this.options.oddcolor = $('.ui-state-default').css('background-color');
      this.options.controls = this.options.default_controls.concat(this.options.controls);
      // création de la barre de navigation
      var chaine = "<ul id='" + this._getId("navBar") + "' style='list-style:none;'>";
      for (var i = 0; i < this.options.controls.length; i++) {
        chaine += this._getControl(this.options.controls[i]['id'], this.options.controls[i]['icon']);
      }
      chaine += "</ul><div style='clear:both;'>&nbsp;</div>";
      chaine += "<table id='" + this._getId("table") + "'></table>";
      this.element.html(chaine);
      this._createHeader();
      this.getValues();
      this.options.page_count = (this.options.provider.getCount() / this.options.page_size);
      var self = this;
      var classe = this._getId('controls');
      $('.' + classe).click(

      function () {
        var methode = $(this).attr('id').replace(new RegExp('^' + self.options.name + '_'), '');
        self[methode]();
      });
    },
    destroy: function () {
      this.element.html($(this).data('old_content'));
      // call the original destroy method since we overwrote it
      $.Widget.prototype.destroy.call(this);
    },

    first: function () {
      this._setOption('page', 1);
    },
    next: function () {
      this._setOption('page', Math.min(this.options.page + 1, this.options.page_count));
    },
    previous: function () {
      this._setOption('page', Math.max(this.options.page - 1, 1));
    },
    last: function () {
      this._setOption('page', this.options.page_count);
    },
    _setOption: function (key, value) {
      this.options[key] = value;
      switch (key) {
        case 'page':
          this.getValues();
          break;
      }
    },

    _getControl: function (id, icon) {
      var classe = this._getId('controls');
      var chaine = "<li class='" + classe + " ui-state-default ui-corner-all' id='" + this._getId(id) + "' style='float:left;margin-right:2px;text-decoration: none;'>" + "<span class='ui-widget ui-corner-all ui-icon ui-button " + icon + "' title='" + id + "'></span></li>";

      return chaine;
    },

    _createHeader: function () {
      var chaine = '<tr>';
      var cols = this.options.provider.getHeader();
      for (var i = 0; i < cols.length; i++) {
        chaine += '<th>' + cols[i] + '</th>';
      }
      chaine += '</tr>';
      $('#' + this._getId("table")).append(chaine);
    },

    getValues: function () {
      var chaine = '';
      var min = (this.options.page - 1) * this.options.page_size;
      $('.' + this._getId("values")).remove();
      var vals = this.options.provider.getData(min, this.options.page_size);
      for (var i = 0; i < vals.length; i++) {
        chaine += "<tr class='" + this._getId("values") + "'>";
        for (var j = 0; j < vals[i].length; j++) {
          chaine += '<td>' + vals[i][j] + '</td>';
        }
        chaine += '</tr>';
      }
      $('#' + this._getId("table")).append(chaine);
      $('.' + this._getId("values") + ':odd').addClass(this.options.oddclass);
      $('.' + this._getId("values") + ':even').addClass(this.options.evenclass);
    },
    _getId: function (id) {
      return this.options.name + '_' + id;
    }

  });

  $.extend($.ui.table, {});

})(jQuery);

var DataProvider = function () {
  this.data = [];

  for (var i = 0; i < 2000; i++) {
    this.data.push([i * 10000 + 1, i * 10000 + 2, i * 10000 + 3, i * 10000 + 4]);
  }
}

DataProvider.prototype.getHeader = function () {
  return ['col1', 'col2', 'col3', 'col4'];
}

DataProvider.prototype.getData = function (start, size) {
  if (size == 0) {
    return this.data;
  } else {
    return this.data.slice(start, start + size);
  }
}
DataProvider.prototype.getCount = function () {

  return this.data.length;
}

@CHARSET"UTF-8";
 .table_odd {
  background-color: #EEEEEE;
}
.table_even {
  background-color: #DDDDDD;
}