Creating jquery plugins...

Question

Hi there

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

I believe jQgrid is what you're looking for.

Project home here

Answer 2

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.

Answer 3

Your question seems to revolve around how do you manage data associated with different table elements with the same plug-in and how do you notify external code.

You could look into using the .data() function in jQuery to store anything you want on the table element. Then any actions or events you wire up could feed off of this data to perform their actions. I should note you can store anything you want including functions to be executed later.

$('#myTable').data('loadPageFunc', function(pageNumber, pageCount){
   //make ajax call and fill in the table
});

//later in code
$('#myTable').data('loadPageFunc')(1, 10);

That is just a simple example but that will enable you to do a lot of stuff. Also if you want external code to be notified of events in your plug-in code then you may want to setup some callbacks that can get passed in as options to your plug-in.

I hope this helps. My only other idea about keeping track of state is using closures (anonymous functions that reference data outside their scope). The closures keep a reference to the data and you use the closure later in code. I'm not sure if that will really do it for you, but they are very handy for wiring up event code and you have probably already used closures a lot in jQuery.