Question

I am using the code below to do pagination on a table (please do not suggest any prebuilt ones)

function tablejax(url, start, count) {
    $('#tablejaxButton').attr("disabled", "true");
    $('#tablejaxOverlay').fadeIn('slow');
    $.ajax({
        type: "GET",
        url: url,
        data: "start="+start+"&count="+count+"&identifier="+$('#tablejaxButton').val(),
        success: function(data){
            setTimeout(function(){
                $('#myTable tbody').append(data);
                $('#myTable tr td div').slideDown('slow');
                $("html:not(:animated),body:not(:animated)").animate({
                    scrollTop: $('body').attr("scrollHeight")
                    }, 1000 );
                $("table").trigger("update");
            }, 1000);
            setTimeout(function(){
                $('#tablejaxOverlay').fadeOut('slow');
                $('#tablejaxButton').removeAttr('disabled');
            }, 1000);
        }
    });
}

however i am currently calling it through

$('#tablejaxButton').click(function() {
        tablejax(this.name,  tcount, 20);
        tcount = tcount+20;
    })

there are a few problems with this,
but the ones i want to change are.

I want to be able to call $('#tableID').tablejax('url', 'identifier', 'count');
eg $('#tableUsers').tablejax('get_members.php', 27, 20);

it would automatically attach an onclick event to #tableUsersButton (tableID + Button)

i want the function itself to keep track of where we should start from,
currently i am using

tcount = 20;  
//do stuff  
tcount = tcount +20; 

which is not ideal.

what is the easiest way to do this?

note: the function should make an assumption that the count that is passed into it has already been loaded into the table, eg if you call $('#tableUsers').tablejax('get_members.php', 27, 20); then the first 20 rows would already be loaded into the table via server side processing.

---

Update
To simplify my question.

I need to be able to call $('#tableID).tablejax(--initial params here--);
on document ready,

this would basically get a function ready by filling out some default params (eg identifier, url, ect)
this would also add on onclick event handler to $('#tableIDButton') which when clicked would call something like $('#tableIDButton').tablejax('next');

this approach is used as sometimes i need to call the pagination using another trigger.

all i need to know is

• How to register a function in jquery: Answered
• How to register the click event when the function is called Answered: Turns out I can register a click even from anywhere not just document ready
• How to call an ‘action’ in the function when it is not the initial call
  (initial call should use the parameters, subsequent calls should call an ‘internal function)

Answer 1

Use the extend() function to add functions to the jQuery object:

jQuery.fn.extend({
    tablejax: function(url, start, count) {
        $('#tableIDButton').click(function() {
            $('#tableID').tablejax(url, start+20, count); // just pass on the variables
        }
    } // put comma here if you want to add more functions
});
// to run the function on document ready:
$(function() {
    $('#tableID').tablejax(...);
}

Then you should be able to call your function like you wanted. You obviously still need to call it inside a click event.

Update:

Updated my example to answer question 2 and 3. To fetch the next rows you could call the same function again recursively, like in the example.

Btw, I don’t see how my example “pollutes the jQuery namespace”, as it’s taken from jQuery’s own documentation.