madpop Ответов: 2

Как применить подкачку для динамической сгенерированной таблицы с помощью javascript/jquery


Я не могу понять как применить подкачку для динамически генерируемой таблицы ниже приведен мой код

$.Аякс({
тип: "получить",
адрес: услуги.параметры.dailydata,
данные: "inviteId_=" + inviteId + "",

успех: функция (данные) {


var Location = данные;

ВАР тр;

for (var i = 0; i & lt; Location.длина; i++) {

tr = tr + "";
тр = тр + "" + расположение[я].номенклатура + "";
tr = tr + "" + Location[i]. itemname + "";
tr = tr + "" + Location[i]. itemprice.toFixed(2) + "";
tr = tr + "" + Location[i].Единица измерения + "";


tr = tr + "";


};
document.getElementById ('stc_d'). style. display = " block";
document.getElementById('tbl_data'). innerHTML = "" + ""
+ "" + "" + ""+ ""
+ тр +

"
пункт имя цена Единица измерения
";



},
ошибка: функция (e) {

навигатор.уведомления.предупреждение ("пожалуйста, введите действительные данные");

}
});

так может ли кто-нибудь сказать мне, как и где реализовать пейджинг ?

Что я уже пробовал:

$('td', 'table'). each (функция (i) {
$(this). text(i + 1);
});



$('таблица.нумерованные').каждый(функция() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(это);
$table. bind ('repaginate', функция() {
$таблица.найти('элемента tbody тр').скрыть().срез(currentPage * numPerPage, (currentPage + 1) * numPerPage).показать();
});
$table. trigger ('repaginate');
var numRows = $table. find ('tbody tr').длина;
var numPages = Math. ceil(numRows / numPerPage);
var $pager = $('
');
for (var page = 0; page < numPages; page++) {
$('').текст(стр + 1).связать('нажмите', {
newPage: страница
}, функция (событие) {
currentPage = event. data ['newPage'];
$table. trigger ('repaginate');
$(этот).добавление ("активный").братья и сестры().removeClass('Active'и);
}).добавление($пейджер).добавление ("кликабельны");
}
$пейджер.метод insertbefore($таблицы).найти('пядь.страницы-количество:первый').добавление('активный');
});

я попытался реализовать этот сценарий в своем файле, но он не работает

2 Ответов

Рейтинг:
2

Karthik_Mahalingam

проверить это
плагин разбиения на страницы jQuery[^]

Рейтинг:
1

Member 13019324

Добавьте класс / идентификатор в таблицу

var number_of_items = 0;
ВАР number_of_pages = 0;
$(документ).готово(функция () {

//сколько элементов на странице нужно показать
ВАР show_per_page = 12;
//количество элементов в блоке контента
number_of_items = $('#контент').детей().размер();
// подсчитайте количество страниц, которые у нас будут
number_of_pages = Math. ceil(number_of_items / show_per_page);
если (show_per_page &ГТ; number_of_items) {
show_per_page = number_of_items;
}
// установите значение наших скрытых полей ввода
$('#current_page'). val(0);
$('#show_per_page').вал(show_per_page);

/- теперь, когда у нас есть все необходимое для навигации, давайте сделаем это '

/*
что мы будем иметь в навигации?
- ссылка на предыдущую страницу
- ссылки на конкретные страницы
- ссылка на следующую страницу
*/
ВАР navigation_html = '

  • «
    • ';
    ВАР current_link = 0;
    пока (number_of_pages &ГТ; current_link) {
    navigation_html += '
  • '+(current_link + 1) + '
    • ';
    нынешнее звено++;
    }
    navigation_html += '
  • »
    • ';

    $('#page_navigation'). html(navigation_html);

    // добавить класс active_page к ссылке на первую страницу
    //$('#page_navigation .page_link: first'). addClass ('active_page');
    $('#page_navigation .page_link_a:первый').добавление('активный');
    // скрыть все элементы внутри content div
    $('#контент').детей().в CSS('дисплей', 'нет');

    //и показать первые n элементов (show_per_page)
    $('#контент').детей().фрагмент(0, show_per_page).в CSS('дисплей', 'блок');
    if (show_per_page == 0) {
    $("#pagination_footer").текст('показаны 0 до + show_per_page +' из '+ number_of_items + ' ('страницы + number_of_pages+')');
    }
    ещё {
    $("#pagination_footer").текст('показаны 1 до' + show_per_page + ' из '+ number_of_items + ' ('страницы + number_of_pages+')');
    }

    });

    функции предыдущих() {
    new_page = parseInt ($('#current_page'). val ()) - 1;
    //если перед текущей активной ссылкой есть элемент, запустите функцию
    если ($('.active_page').кнопки prev('.page_link').длина = = true) {
    go_to_page(new_page);
    }

    }

    следующая функция() {
    new_page = parseInt ($('#current_page'). val ()) + 1;
    //если после текущей активной ссылки есть элемент, запустите функцию
    если ($('.active_page').следующий('.page_link').длина = = true) {
    go_to_page(new_page);
    }

    }
    функция go_to_page(page_num) {

    // получить количество элементов, показанных на странице
    var show_per_page = parseInt ($('#show_per_page'). val());

    // получить номер элемента, с которого начать срез
    start_from = page_num * show_per_page;

    // получить номер элемента, где закончить срез
    end_on = start_from + show_per_page;
    // скрыть все дочерние элементы content div, получить конкретные элементы и показать их
    $('#контент').детей().в CSS('дисплей', 'нет').slice(start_from, end_on). css ('display', 'block');

    /*получить ссылку на страницу, имеющую атрибут longdesc текущей страницы, и добавить к ней класс active_page
    и удалите этот класс из ранее активной ссылки на страницу*/
    $('.page_link[longdesc=' + page_num + ']').добавление('active_page').братья и сестры('.active_page').removeClass('active_page');

    $('.page_link_a[longdesc=' + page_num + ']').добавление ("активный").братья и сестры('.активный').removeClass('Active'и);

    если (number_of_items &ЛТ; end_on)
    end_on = number_of_items;

    // обновить поле ввода текущей страницы
    $('#current_page'). val(page_num);
    $("#pagination_footer"). text ('Showing' + start_from + ' to '+ end_on + ' of '+ number_of_items + ' (' + number_of_pages + ' pages)');
    }

    Html-код подкачки:
    <pre>   <div class="p_bar_bottom row pagenation-block">
                                                <input type='hidden' id='current_page' />
                                                <input type='hidden' id='show_per_page' />
                                                <h5 id="pagination_footer"></h5>
                                                <ul id='page_navigation' class="pagination"></ul>
                                            </div>