Question

I am trying to create a jquery plugin to do ajax table pagination (i.e get the data and recreate the tbody when it is called.

Can anyone suggest a tutorial that will show me how to do all these things? I am looking to adhere to the following points:

1) The plugin is to use the jquery ui syntax
2) The plugin needs to be useable on more than one table on the same page
3) The plugin needs to have its own methods, append, and replace

Here are the main things i am stuck on.

How does scope work?
I.e. if i have a function that is called via $('#table1').tPaginate('append');
this function must store some data from the ajax request,
This is the remaining rows so.
Where do i store this, following the online tutorials i have found nowhere that is apparently valid to store a persistent variable.

How do you handle error checking etc,
If something in your plugin breaks, how do you let the other “functions” inside know about it. again this seems to come back to the issue of scope.

Answer 1

You can use a pre-built grid as described in your other answers, but to kick start you developing JQuery plugins, here is a quick example script:

(function($)
{
  $.tPaginateInternal = {
    Append: function(el) { },
    Replace: function(el) { }
  };

  $.fn.tPaginate = function(arg1) {
    return this.each(function() {
      // Do work here

      $.tPaginateInternal.Append(this);
    });
  };
})(jQuery);

You should then be able to call:

$("#table1").tPaginate("append");

What that small bit of code shows you is that you can:

1. Create an object that wraps up your logic for your plugin ($.tPaginateInternal)
2. Create a plugin function that works on multiple elements (return this.each)
3. Wrap up the plugin call in safe way ((function($)), etc.

That’s could be the basic structure for creating your plugin, you just need to fill in the rest. Hope that helps.