Блог

Я искал пейджер, с помощью которого я мог бы обрабатывать эскизы моего сайта, но я ничего не нашел, поэтому мне пришлось написать свой собственный. Я написал функцию, которая может создавать пейджер для любых данных на основе запроса AJAX:

 function addPager(s, m, f, pager, current) {
if (!current) {current = 2;}
// m - element / page
// s - all elements
// f - ajax getter function's name like functionName(id, page)
// current - pressed button's index or p n f l as prev next first last
if (!pager) { // if the pager not appended
    if (s%m == 0) { p = s/m; } else {p = parseInt(s/m);} // get the pages number on all elements / elementsonpage
    $pager = $('<div class="pager clearfix"></div>') // pager holder box
    for (i=0;i<=p;i  ) // append all pages to the pager holder and bind them for click
    {
        $('<span>' (i 1) '</span>')
        .bind("click", {page: i}, f)
        .click(function(){
            var ind = $(this).index();
            addPager(s, m, f, $(this).parent("div"), ind); // on click call this function again
        })
        .appendTo($pager); // the append
    }
    $pager.find("span").eq(0).addClass("on"); // find first element and add on class because its just appended
    $('<span class="mod">Next</span>').click(function(){ addPager(s, m, f, $(this).parent("div"), "n"); }).appendTo($pager); // prev, next, first, last buttons
    $('<span class="mod">Prev</span>').click(function(){ addPager(s, m, f, $(this).parent("div"), "p"); }).prependTo($pager);   
    $('<span class="mod">Last</span>').click(function(){ addPager(s, m, f, $(this).parent("div"), "l"); }).appendTo($pager);    
    $('<span class="mod">First</span>').click(function(){ addPager(s, m, f, $(this).parent("div"), "f"); }).prependTo($pager);  
    $pager.children("span").eq(0).addClass("on"); // add on class for the now 1st element (which is the first button)
    $pager.children("span").eq(1).addClass("disabled"); // disable the prev button
    $pager.children("span:not(.mod)").each(function(index) {
        if (((current-3) > (index 2)) || ((current 3) < (index 2))) { $(this).hide(); } else { $(this).show(); } // hide everything but the first 6 buttons (in case of 1000 pages i just show 1 .. 6)
        if (current == (index 2)) { $(this).addClass("on"); } // add on class to the first element - its probably useless because of the previous addonclass
      });
return($pager); // return it for the function which called. i append in the primary ajax function.

} 
else { // if the pager is already appended to the site
    if (s%m == 0) { p = s/m; } // calculate pages
    else {p = parseInt(s/m);} // calculate pages

    if (current == "n") {var i = $pager.find("span:not(.mod).on").index(); if ((i>=1) amp;amp; (i<(p 2))) {addPager(s, m, f, pager, (i 1));}} // if current next goto next
    else if (current == "p") {var i = $pager.find("span:not(.mod).on").index(); if ((i>2) amp;amp; (i<=(p 2))) {addPager(s, m, f, pager, (i-1));}} // if current prev goto prev
    else if (current == "f") { addPager(s, m, f, pager, 2); } // 1st
    else if (current == "l") { addPager(s, m, f, pager, (p 2)); } // last
    else { // if any other button pressed
        $pager = pager;
        $pager.find("span").removeClass("on disabled"); // remove on or disabled classes on each buttons
        $pager.find("span:not(.mod)").each(function(index) { // find numbered items only (without the spec buttons like prev or last)
            if (((current-3) > (index 2)) || ((current 3) < (index 2))) { $(this).hide(); } else { $(this).show(); } // hide all the buttons but the nearest ones
            if (current == (index 2)) { $(this).addClass("on"); }
        });
        if (current == 2) { $pager.children("span").eq(0).addClass("on");  $pager.children("span").eq(1).addClass("disabled"); }// first button makes the prev diabled and first active
        if (current == (p 2)) { $pager.children("span").eq(p 4).addClass("on"); $pager.children("span").eq(p 3).addClass("disabled"); } // last button makes the next diabled and last active
    }
}
}
  

… который можно использовать следующим образом;

 $.ajax {
...
addPager(allelementsnumber, elementsonpage, thisajaxfunctionsname); 
$pager.appendTo(whereyouwanttoappendthis);
...
}
  

Лицензия CC, используйте ее, если хотите, она работает нормально 🙂

1. Когда я вызываю addPager(param, param, param, param, param, param) много раз с таким количеством параметров … использует ли это много памяти или что-то в этом роде?

2. Как я могу сделать эту функцию лучше или быстрее?

Я сделал несколько комментариев для более простого понимания, однако я думаю, что это не сложная функция.

Было бы лучше создать объект со свойствами, а затем передать это вместо нескольких параметров. Каждое свойство объекта будет представлять один из параметров. Вы могли бы думать об этом как об объекте options / configuration.

Затем вы бы передали объект функции в виде одного параметра, а затем использовали свойства объекта.

Это гораздо лучший подход, поскольку он обеспечивает гораздо лучшую масштабируемость в долгосрочной перспективе.

Однако я не уверен, что при использовании многих параметров возникают накладные расходы. Это просто сложно читать и, на мой взгляд, не очень масштабируемо.