How to create multiple (similar) buttons with JQuery

Question

I want to create 4 paging buttons within a JQueryUI widget (First, Prev, Next, Last) with as little repetition of code as possible. I have a working example like this (in a function in a widget factory plugin):

    var pager = document.createElement( 'span' );

    var names = ['start','prev','next','end'];
    var labels = ['First','Prev','Next','Last'];

    for (var i = 0; i < names.length; i++) {    
        var pagerButton = document.createElement( 'button' );
        $(pagerButton).button({icons: { primary: "ui-icon-seek-" + names[i]}, label: labels[i]});
        $(pagerButton).attr('name', names[i]);
        pager.appendChild(pagerButton);
        this._on(pagerButton, {
            click: function(event) {
                alert('You clicked ' + event.target.name);
            }
        });  
    }
    this.element.find('.pager').empty().append(pager);  

This has the functionality that I require but I feel that there ought to be a more concise way of doing this with JQuery.

NB: Some points to note:

1. Naturally, the alert will be replaced by a more useful function.
2. names and labels separate in case multilingual needed.
3. I have looked at jqGrid and datatables. I want something much more simple (just ajax, paging, sorting), plus this is a learning exercise for me (it's not for work). I don't need recommendations for third-party JQuery libraries.
4. Feel free to point out any heresies I have committed in the above code snippet.

---

UPDATE Well, I worked out how to get the event declaration out of the loop:

        this._on(pager, {
            'click button': function(event) {
                alert('You clicked ' + event.currentTarget.name);
            }
        });

(currentTarget used as suggested).

Which leaves me with:

    for (var i = 0; i < names.length; i++) {    
        var pagerButton = document.createElement( 'button' );
        $(pagerButton).button({icons: { primary: "ui-icon-seek-" + names[i]}, label: labels[i]});
        $(pagerButton).attr('name', names[i]);
        pager.appendChild(pagerButton);
    }

Which is probably fine. It just thought there might be a "more jquery" way of doing it (i.e. using some of those clever functions which apply to all selected elements.

Answer 1

It is hard to say exactly correct as there is no exact scenario so I am just writing what I would do.

first of all your code looks nice to me. here is jsFiddle

as you can see I had changed the event.target to event.currentTarget as currentTarget is the button you have created and target is the span $UI created to display fancy button.

first of my Html layout would be below

<div class="data" data-currentPage="0" data-currentData="/personal">
   <div class="list"></div>
   <div class="pager">Where your buttons will be</div> 
</div> 

the reason of it you use in-depended multiple list in one page. in the buttons event you can reach the main div by $(event.currentTarget).parent("div.data") and according to currentPage and currentData you can request anything you want for current data I would used URL and with a post request I would send page data. but you just use a simple text of enum category and send it as parameter. Also you can keep an JSON object in the data so it is up to you.

To get data with using current-page and data you can get full html of the div.list and bind it directly or return JSON list object and bind it by a JS loop. It is up to you and up to your system for example if you already have a MVC web API just get the data with it.

For multi-language support I have never developed such a thing but the below would be my code.

To keep languages

var labelsData = {};
labelsData["en"] = ['First','Prev','Next','Last'];
labelsData["fr"] = ['le First','le Prev','le Next','le Last'];

and to find out the client language you can use following code

//jQuery probably have something short for the below line but logic is the same
//just find out en-US or just en
var language = window.navigator.userLanguage || window.navigator.language;
language = language.split("-")[0];
var labels = labelsData[language]; // labels so you can use your code
if (!labels)
    labels = labelsData["en"]; //Default

if the language is determined by back-end just render it instead.

Hope this helps.