J'ai travaillé sur une table que je veux appliquer le filtrage, qui est déclenchée à partir d'un événement select on change. Ce qui supprime toutes les lignes qui ne correspondent pas à la valeur filtrée, puis met à jour la pagination. À l'heure actuelle, je peux faire fonctionner la pagination et filtrer pour travailler indépendamment les uns des autres.Filtrage de table avec pagination
Sélectionnez Majoration:
<select>
<option value="all">Show All</option>
<optgroup label="Programme Level">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</optgroup>
</select>
Tableau Majoration:
<table>
<thead>
<tr>
<th>Programme Level</th>
<th>Title</th>
<th>Summary</th>>
</tr>
</thead>
<tbody>
<tr>
<td>Easy</td>
<td>Title</td>
<td>Short programme description goes here.</td>
</tr>
<tr>
<td>Hard</td>
<td>Title</td>
<td>Short programme description goes here.</td>
</tr>
<tr>
<td>Easy</td>
<td>Title</td>
<td>Short programme description goes here.</td>
</tr>
<tr>
<td>Medium</td>
<td>Title</td>
<td>Short programme description goes here.</td>
</tr>
...
</tbody>
</table>
Jquery à ce jour:
<script type="text/javascript">
$(document).ready(function() {
//Code for select filter
$('.sort select').change(function(){
var KeyWord = $(this).val().toUpperCase();
//find all rows which match value...
$('table').each(function() {
var $table = $(this);
$('tr:not(:has(th))', $table).each(function(){
var value = $('td', this).eq(0).text().toUpperCase();
if(KeyWord != "ALL"){
if(value == KeyWord){
$(this).show();
}
else{
$(this).hide();
}
}else{
$(this).show();
}
});
});
});
//Code for Paging
$('table').each(function() {
var currentPage = 0;
var numPerPage = 6;
var $table = $(this);
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows/numPerPage);
$table.bind('repaginate', function() {
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage)
.show();
});
$table.trigger('repaginate');//show correct number of rows on first page load
if(numPages > 1){ //if num of pages greater then 1, add paging
var $pager = $('<ul class="pagination"></ul>');
for (var page = 0; page < numPages; page++) {
$('<li></li>').text(page + 1)
.bind('click', {newPage: page}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active')
.siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertAfter($table).find('li').eq(0).addClass('active');//Insert paging after table and first page as active
}
});
});
</script>
Si possible, j'aimerais une aide ou des conseils sur la façon pour mettre à jour le code ci-dessus, de sorte que la pagination est mise à jour pour refléter le nombre d'éléments filtrés.
Toute aide ou pointeur serait grandement appréciée.
Merci
Eddie
Merci pour le conseil, bien que je préfère travailler avec le code ci-dessus, il me aider à apprendre. Je ne pouvais pas voir de démos avec tableSorter et sélectionnait des valeurs. Est-ce possible avec le plug-in? – Eddie