JQuery pagination не работает с фильтрацией

Я пишу, чтобы обратиться за помощью, поскольку я сталкиваюсь с некоторыми проблемами с моей университетской курсовой работой.JQuery pagination не работает с фильтрацией

В основном я создал разбиение на страницы JQuery и фильтрацию JQuery. Индивидуально они работают фантастически, однако, если я начну фильтровать, и, скажем, мое разбиение на страницы ограничивает меня до 5 результатов за один раз, а затем возвращаюсь к полной сумме (например, 12), когда я начинаю вводить текст.

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

Здесь я дать ссылку на мой JS скрипкой: http://jsfiddle.net/u7unm9zy/1/ (лучший способ проверить фильтрацию путем набора на клавиатуре 1 в поле поиска)

HTML

<form action="" class="live-search" method="post"> 
    <input type="text" value="" name="filter" id="filter" placeholder="Search" /> 
</form> 
<table> 
    <thead> 
     <th>Column 1</th> 
     <th>Column 2</th> 
     <th>Column 3</th> 
     <th>Column 4</th> 
     <th>Column 5</th> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Row 1</td> 
      <td>Row 1</td> 
      <td>Row 1</td> 
      <td>Row 1</td> 
      <td>Row 1</td> 
     </tr> 
     <tr> 
      <td>Row 2</td> 
      <td>Row 2</td> 
      <td>Row 2</td> 
      <td>Row 2</td> 
      <td>Row 2</td> 
     </tr> 
     <tr> 
      <td>Row 3</td> 
      <td>Row 3</td> 
      <td>Row 3</td> 
      <td>Row 3</td> 
      <td>Row 3</td> 
     </tr> 
     <tr> 
      <td>Row 4</td> 
      <td>Row 4</td> 
      <td>Row 4</td> 
      <td>Row 4</td> 
      <td>Row 4</td> 
     </tr> 
     <tr> 
      <td>Row 5</td> 
      <td>Row 5</td> 
      <td>Row 5</td> 
      <td>Row 5</td> 
      <td>Row 5</td> 
     </tr> 
     <tr> 
      <td>Row 6</td> 
      <td>Row 6</td> 
      <td>Row 6</td> 
      <td>Row 6</td> 
      <td>Row 6</td> 
     </tr> 
     <tr> 
      <td>Row 7</td> 
      <td>Row 7</td> 
      <td>Row 7</td> 
      <td>Row 7</td> 
      <td>Row 7</td> 
     </tr> 
     <tr> 
      <td>Row 8</td> 
      <td>Row 8</td> 
      <td>Row 8</td> 
      <td>Row 8</td> 
      <td>Row 8</td> 
     </tr> 
     <tr> 
      <td>Row 9</td> 
      <td>Row 9</td> 
      <td>Row 9</td> 
      <td>Row 9</td> 
      <td>Row 9</td> 
     </tr> 
     <tr> 
      <td>Row 10</td> 
      <td>Row 10</td> 
      <td>Row 10</td> 
      <td>Row 10</td> 
      <td>Row 10</td> 
     </tr> 
     <tr> 
      <td>Row 11</td> 
      <td>Row 11</td> 
      <td>Row 11</td> 
      <td>Row 11</td> 
      <td>Row 11</td> 
     </tr> 
     <tr> 
      <td>Row 12</td> 
      <td>Row 12</td> 
      <td>Row 12</td> 
      <td>Row 12</td> 
      <td>Row 12</td> 
     </tr> 
    </tbody> 
</table> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

JQuery

$('table').each(function() { 
    var currentPage = 0; 
    var numPerPage = 5; 
    var $table = $(this); 

    $table.bind('repaginate', function() { 
    $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show(); 
    }); 
    $table.trigger('repaginate'); 

    var numRows = $table.find('tbody tr').length; 
    var numPages = Math.ceil(numRows/numPerPage); 
    var $pager = $('<div class="pager"></div>'); 
    $('<span class="first">&lt;</span>').bind('click', function (event) { 
    currentPage = 0; 
    $table.trigger('repaginate'); 
    $('span.page-number').each(function() { 
     if (parseInt($(this).text()) == 1) { 
     $(this).addClass('active') 
     } else { 
     $(this).removeClass('active'); 
     } 
    }); 
    if (currentPage == 0) { 
     $(this).addClass('disabled'); 
     $(this).parents('.pager').children('.prev').addClass('disabled'); 
    } else { 
     $(this).removeClass('disabled'); 
     $(this).parents('.pager').children('.prev').remove('disabled'); 
    } 
    if (currentPage == numPages - 1) { 
     $(this).parents('.pager').children('span.next').addClass('disabled'); 
     $(this).parents('.pager').children('span.last').addClass('disabled'); 
    } else { 
     $(this).parents('.pager').children('span.next').removeClass('disabled'); 
     $(this).parents('.pager').children('span.last').removeClass('disabled'); 
    } 
    }).appendTo($pager); 
    $('<span class="prev">&lt;&lt;</span>').bind('click', function (event) { 
    if ((currentPage - 1) >= 0) { 
     currentPage = currentPage - 1; 
     $table.trigger('repaginate'); 
     $('span.page-number').each(function() { 
     if (parseInt($(this).text()) - 1 == currentPage) { 
      $(this).addClass('active') 
     } else { 
      $(this).removeClass('active'); 
     } 
     }); 
    } 
    if (currentPage == 0) { 
     $(this).addClass('disabled'); 
     $(this).parents('.pager').children('.first').addClass('disabled'); 
    } else { 
     $(this).removeClass('disabled'); 
     $(this).parents('.pager').children('.first').removeClass('disabled'); 
    } 
    if (currentPage == numPages - 1) { 
     $(this).parents('.pager').children('span.next').addClass('disabled'); 
     $(this).parents('.pager').children('span.last').addClass('disabled'); 
    } else { 
     $(this).parents('.pager').children('span.next').removeClass('disabled'); 
     $(this).parents('.pager').children('span.last').removeClass('disabled'); 
    } 
    }).appendTo($pager); 
    for (var page = 0; page < numPages; page++) { 
    $('<span class="page-number"></span>').text(page + 1).bind('click', { 
     newPage: page 
    }, function (event) { 
     currentPage = event.data['newPage']; 
     $table.trigger('repaginate'); 
     $(this).addClass('active').siblings().removeClass('active'); 

     if (event.data['newPage'] == 0) { 
     $(this).parents('.pager').children('span.prev').addClass('disabled'); 
     $(this).parents('.pager').children('span.first').addClass('disabled'); 
     } else { 
     $(this).parents('.pager').children('span.prev').removeClass('disabled'); 
     $(this).parents('.pager').children('span.first').removeClass('disabled'); 
     } 
     if (event.data['newPage'] == numPages - 1) { 
     $(this).parents('.pager').children('span.next').addClass('disabled'); 
     $(this).parents('.pager').children('span.last').addClass('disabled'); 
     } else { 
     $(this).parents('.pager').children('span.next').removeClass('disabled'); 
     $(this).parents('.pager').children('span.last').removeClass('disabled'); 
     } 
    }).appendTo($pager).addClass('clickable'); 
    } 
    $pager.insertAfter($table).find('span.page-number:first').addClass('active'); 
    $('<span class="next">&gt;</span>').bind('click', function (event) { 
    if ((currentPage + 1) <= numPages) { 
     currentPage = currentPage + 1; 
     $table.trigger('repaginate'); 
     $('span.page-number').each(function() { 
     if (parseInt($(this).text()) - 1 == currentPage) { 
      $(this).addClass('active') 
     } else { 
      $(this).removeClass('active'); 
     } 
     }); 
    } 
    if (currentPage == numPages - 1) { 
     $(this).addClass('disabled'); 
     $(this).parents('.pager').children('span.last').addClass('disabled'); 
    } else { 
     $(this).removeClass('disabled'); 
     $(this).parents('.pager').children('span.last').removeClass('disabled'); 
    } 
    if (currentPage == 0) { 
     $(this).parents('.pager').children('.prev').addClass('disabled'); 
     $(this).parents('.pager').children('.first').addClass('disabled'); 
    } else { 
     $(this).parents('.pager').children('.prev').removeClass('disabled'); 
     $(this).parents('.pager').children('.first').removeClass('disabled'); 
    } 
    }).appendTo($pager); 
    $('<span class="last">&gt;&gt;</span>').bind('click', function (event) { 
    currentPage = numPages - 1; 
    $table.trigger('repaginate'); 
    $('span.page-number').each(function() { 
     if (parseInt($(this).text()) == numPages) { 
     $(this).addClass('active') 
     } else { 
     $(this).removeClass('active'); 
     } 
    }); 
    if (currentPage == numPages - 1) { 
     $(this).addClass('disabled'); 
     $(this).parents('.pager').children('span.next').addClass('disabled'); 
    } else { 
     $(this).removeClass('disabled'); 
     $(this).parents('.pager').children('span.next').remove('disabled'); 
    } 
    if (currentPage == 0) { 
     $(this).parents('.pager').children('.prev').addClass('disabled'); 
     $(this).parents('.pager').children('.first').addClass('disabled'); 
    } else { 
     $(this).parents('.pager').children('.prev').removeClass('disabled'); 
     $(this).parents('.pager').children('.first').removeClass('disabled'); 
    } 
    }).appendTo($pager); 
    if (currentPage == 0) { 
    $pager.find('.first').addClass('disabled'); 
    $pager.find('.prev').addClass('disabled'); 
    } 


    /** Filter Data - Live Search **/ 
    function filter(selector, query) { 
    query = $.trim(query); 
    query = query.replace(/ /gi, '|'); 

    $(selector).each(function() { 
     if (($(this).text().search(new RegExp(query, "i")) < 0)) { 
     $(this).hide().removeClass('visible'); 

     } else { 
     $(this).show().addClass('visible'); 
     } 
    }); 
    } 

    $('#filter').keyup(function (event) { 
    if (event.keyCode == 27 || $(this).val() == '') { 
     $(this).val(''); 
     $('table tbody tr').removeClass('visible').show().addClass('visible'); 
    } else { 
     filter('table tbody tr', $(this).val()); 
    } 
    }); 

});

CSS

table, td, th { 
    border: 1px solid black; 
} 
.pager { 
    margin-top: 15px; 
} 
.pager span.page-number, 
.pager span.first, 
.pager span.prev, 
.pager span.last, 
.pager span.next { 
    padding-right: 5px; 
    cursor: pointer; 
} 
.pager span.page-number:hover, 
.pager span.first:hover, 
.pager span.prev:hover, 
.pager span.last:hover, 
.pager span.next:hover { 
    color: green; 
} 
.pager span.page-number.active { 
    color: red; 
}

Как вы увидите, вы можете просто использовать разбиение на страницы и фильтрацию, но при фильтрации разрывов разбивки на страницы, как я могу выполнять разбиение на страницы, но отображаю только 5 результатов за один раз, а затем порядок остальных результатов в порядке фильтрации?

Спасибо, извините, что это может занять некоторое время, чтобы прочитать, но я ценю, кто читает его.

источник

2014-11-28 mdixon18

Возможно, вам захочется взглянуть на плагин JQuery для данных datatables.

Ссылка: http://holt59.github.io/datatable/

источник

2014-11-29 20:41:34

JQuery pagination не работает с фильтрацией

ответ

Смежные вопросы