Mottie
commented
5 years ago Hi @Skipnot!
I don't quite understand the issue you're describing. Would you please modify this demo to show the problem?
Open Skipnot opened 5 years ago
Mottie
commented
5 years ago Hi @Skipnot!
I don't quite understand the issue you're describing. Would you please modify this demo to show the problem?
Skipnot
commented
5 years ago Thanks for reply @Mottie
I don't think i can replicate the issue. When you want to select a number of result with the select (10, 20, 30 ,40), if you select all (with the <option value="9999">All</option> )sometime it doesn't display all result but keep displaying the selected default, i mean i got 10 by default, i select All, it show All in the select but display 10 result.
I took this screenshot if it can help. "Tous" mean "All"
TheSin-
commented
5 years ago and there is no error in the Javascript console? This sounds like what happens when you can a js error.
Skipnot
commented
5 years ago and there is no error in the Javascript console? This sounds like what happens when you can a js error.
No, nothing in consol, also sometime it work and sometime not
Mottie
commented
5 years ago How many rows are in the table? Are the rows being dynamically loaded, or do they all exist upon initialization? Also, would you please share your initialization code.
Skipnot
commented
5 years ago The number of rows is random. I get it from a simple SQL.
select field1, field2, field3 from myTable where field4='foo'
They aren't dynamically loaded, they are loaded on initialization.
Here's my way to get the rows
public function myFunction() { global $db2, $Droits, $user, $template, $Societe, $Region, $Depot, $helper;
//here we get some info $sql = "SELECT DECSTE, DEREGI, DEDEPO, DENUMDEM, TRIM(DENOFR) AS DENOFR, DEPERDEB, DEPERFIN, DEDTCR, DEUTCR, DESTATUS FROM MYTABLE WHERE DEDTSU = 0 AND ((". substr($user->getSqlEnvironnement('DECSTE', 'DEREGI', 'DEDEPO'), 5) . ") OR DENUMDEM=9999999999) ORDER BY DENUMDEM DESC"; $stmt = $db2->sql_prepare($sql); if($result = $db2->sql_execute($stmt, array())){ $frs = new fournisseur(); $frs->set_societe($this->societe);//set some variable while($row=$db2->sql_fetch_assoc($stmt)) {//while we get result //$template send this array to html $template->assign_block_vars($this->module.'dem', array( 'NUMERO_DEMANDE' => $row['DENUMDEM'], 'SOCIETE' => $Societe->get_libelle($row['DECSTE']), 'REGION' => $Region->get_libelle($row['DECSTE'],$row['DEREGI']), 'DEPOT' => trim($liste_depots), 'FOURNISSEUR' => $nom_frs, 'PERIODE_DEBUT' => $helper->date_convert_db2_month($row['DEPERDEB']), 'PERIODE_FIN' => $helper->date_convert_db2_month($row['DEPERFIN']), 'UTILISATEUR_CREATION'=> $row['DEUTCR'], 'DATE_CREATION' => $helper->date_convert_db2($row['DEDTCR']), 'STATUT_DEMANDE' => $this->libelles_statut[$row['DESTATUS']], 'U_DETAILS' => append_sid("./".$this->module.".php", array("action" => "details", "num-dem" => $row['DENUMDEM'])), )); } unset($frs); return true; }else{ return false; }}
and here is the html
<table id="table-visu-dem" class="tablesorter">
<thead>
<tr>
<th class="filter-match">Num. demande</th>
<th class="filter-select">Société</th>
<th class="filter-select">Région</th>
<th class="filter-select">Dépôts</th>
<th class="filter-match">Fournisseur</th>
<th class="filter-false">Période</th>
<th class="filter-select">Demandeur</th>
<th class="filter-match">Date demande</th>
<th class="filter-select">Statut demande</th>
<th class="filter-false sorter-false"></th>
</tr>
</thead>
<tbody>
<!-- BEGIN reapprodemdem -->
<tr>
<td class="table-int">{reapprodemdem.NUMERO_DEMANDE}</td>
<td class="table-char">{reapprodemdem.SOCIETE}</td>
<td class="table-char">{reapprodemdem.REGION}</td>
<td class="table-char">{reapprodemdem.DEPOT}</td>
<td class="table-char">{reapprodemdem.FOURNISSEUR}</td>
<td class="table-int">{reapprodemdem.PERIODE_DEBUT} -{reapprodemdem.PERIODE_FIN}</td>
<td class="table-char">{reapprodemdem.UTILISATEUR_CREATION}</td>
<td class="table-int">{reapprodemdem.DATE_CREATION}</td>
<td class="table-char">{reapprodemdem.STATUT_DEMANDE}</td>
<td>
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-small dropdown-toggle b2"><span class="caret"></span> Action</button>
<ul class="dropdown-menu">
<li><a href="{reapprodemdem.U_DETAILS}" class="btn-visualiser"><span></span></a></li>
</ul>
</div>
</td>
</tr>
<!-- END reapprodemdem -->
</tbody>
</table>Also, the issue only appear when i want to display All result, if i select 10 or 20 it work's fine. Plus, if i select another option like "10" or "20" and then select "All" it work.
Mottie
commented
5 years ago Sorry, I meant the javascript initialization code. Also, where in the HTML is the pager row?
It's really be easiest for me to help if you could modify this demo to show the issue.
Skipnot
commented
5 years ago My bad, i call a function that i've made. It insert the pager with the jquery .insertBefore(#myId).
$( "<hr style='margin-bottom:7px!important'> \
<div class='span12' style='background-color:#e8e8e8; padding-top:5px'> \
<div id='pager' class='pager' style='margin:0!important;float:left'> \
<img src='./assets/tablesorter/icons/first.png' class='first'/> \
<img src='./assets/tablesorter/icons/prev.png' class='prev'/> \
<span class='pagedisplay' data-pager-output-filtered=''></span> \
<img src='./assets/tablesorter/icons/next.png' class='next'/> \
<img src='./assets/tablesorter/icons/last.png' class='last'/> \
  Nombre de résultat par page \
<select class='pagesize input-small'> \
<option value='10'>10</option> \
<option value='20'>20</option> \
<option value='30'>30</option> \
<option value='40'>40</option> \
<option selected='selected' value='9999'>Tous</option> \
</select> \
</div><div style='float:right;' > <button class='download btn-telecharger-excel'><span></span></button></div> \
</div>" ).insertBefore( table );My complet function here if you want more
function filtres_table(id_table, classement, set_theme ='blue', type_table = 'zebra', set_pager_output = '{page}/{totalPages} pages | {filteredRows} Filtrés sur {totalRows} Résultat(s)', page_commencement = 0, nombre_resultat = 10, pagination = true, stats = false){
$(function() {
//var set_theme =(set_theme != undefined)?set_theme:'blue'; //définition du theme (emplacement dans : dashboard/assets/tablesorter/css/) Blue étant celui que j'ai modifier
//var type_table = (type_table != undefined)?type_table :'table'; // type de table : table, zebra, ..
//var set_pager_output = (set_pager_output != undefined)?set_pager_output :'{page}/{totalPages} pages | {totalRows} Résultat'; // type de pagination
//var page_commencement = (page_commencement != undefined)?page_commencement : 0;//à quelle page va-t-on commencer
//var nombre_resultat = (nombre_resultat != undefined)?nombre_resultat :10; // combien de résultat par page
//var pagination = (pagination != undefined)? pagination: true;
var pager = (pagination == false)?'' :'pager' ;
var math = (stats == false)?'' :'math' ;
var table = $('#'+id_table+'');
var tab_trie = (classement != undefined)?classement : '';//tableau contenant -> pour chaque trie : un tableau avec n°colonne, 0 pour asc / 1 pour desc
//
if(pagination){
//ajout du bloc pager + btn et select
$( "<hr style='margin-bottom:7px!important'> \
<div class='span12' style='background-color:#e8e8e8; padding-top:5px'> \
<div id='pager' class='pager' style='margin:0!important;float:left'> \
<img src='./assets/tablesorter/icons/first.png' class='first'/> \
<img src='./assets/tablesorter/icons/prev.png' class='prev'/> \
<span class='pagedisplay' data-pager-output-filtered=''></span> \
<img src='./assets/tablesorter/icons/next.png' class='next'/> \
<img src='./assets/tablesorter/icons/last.png' class='last'/> \
  Nombre de résultat par page \
<select class='pagesize input-small'> \
<option value='10'>10</option> \
<option value='20'>20</option> \
<option value='30'>30</option> \
<option value='40'>40</option> \
<option selected='selected' value='9999'>Tous</option> \
</select> \
</div><div style='float:right;' > <button class='download btn-telecharger-excel'><span></span></button></div> \
</div>" ).insertBefore( table );
}
table
// Initialisation du tablesorter
.tablesorter({
theme: set_theme, //définition du theme (emplacement dans : dashboard/assets/tablesorter/css/)
widthFixed: true,
usNumberFormat: false,
widgets: [type_table, 'filter', pager, 'stickyheaders', 'zebra', 'output', math],//type de page, avec filtre et pagination
sortList: tab_trie, //tableau contenant -> pour chaque trie : un tableau avec n°colonne, 0 pour asc / 1 pour desc
widgetOptions: {
zebra : [ "normal-row", "alt-row" ],
// nom des classes css ajoutées
pager_css: {
container : 'tablesorter-pager', // class added to make included pager.css file work
errorRow : 'tablesorter-errorRow', // error information row (don't include period at beginning); styled in theme file
disabled : 'disabled' // class added to arrows @ extremes (i.e. prev/first arrows 'disabled' on first page)
},
// jQuery selectors
pager_selectors: {
container : '.pager', // target the pager markup (wrapper)
first : '.first', // go to first page arrow
prev : '.prev', // previous page arrow
next : '.next', // next page arrow
last : '.last', // go to last page arrow
gotoPage : '.gotoPage', // go to page selector - select dropdown that sets the current page
pageDisplay : '.pagedisplay', // location of where the 'output' is displayed
pageSize : '.pagesize' // page size selector - select dropdown that sets the 'size' option
},
// output default: '{page}/{totalPages}'
// possible variables: {size}, {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
// also {page:input} & {startRow:input} will add a modifiable input in place of the value
pager_output: set_pager_output, // '{page}/{totalPages}'
// apply disabled classname to the pager arrows when the rows at either extreme is visible
pager_updateArrows: true,
// starting page of the pager (zero based index)
pager_startPage: page_commencement,
// Reset pager to this page after filtering; set to desired page number
// (zero-based index), or false to not change page at filter start
pager_pageReset: 0,
// Number of visible rows
pager_size: nombre_resultat,
// f true, child rows will be counted towards the pager set size
pager_countChildRows: false,
// Save pager page & size if the storage script is loaded (requires $.tablesorter.storage in jquery.tablesorter.widgets.js)
pager_savePages: true,
// Saves tablesorter paging to custom key if defined. Key parameter name
// used by the $.tablesorter.storage function. Useful if you have
// multiple tables defined
pager_storageKey: 'tablesorter-pager',
// if true, the table will remain the same height no matter how many records are displayed. The space is made up by an empty
// table row set to a height to compensate; default is false
pager_fixedHeight: true,
// remove rows from the table to speed up the sort of large tables.
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
pager_removeRows: false, // removing rows in larger tables speeds up the sort
stickyHeaders : 'tablesorter-stickyHeader',
//Téléchargement de fichier
output_separator : ';', // ',' 'json', 'array' or separator (e.g. ',')
output_dataAttrib : 'data-name', // data-attribute containing alternate cell text
output_headerRows : true, // output all header rows (multiple rows)
output_delivery : 'd', // (p)opup, (d)ownload
output_saveRows : 'f', // (a)ll, (f)iltered or (v)isible
output_replaceQuote : '\u201c;', // change quote to left double quote
output_includeHTML : false, // output includes all cell HTML (except the header cells)
output_trimSpaces : true, // remove extra white-space characters from beginning & end
output_encoding : 'data:text/csv;charset=utf8,',
output_wrapQuotes : false, // wrap every cell output in quotes
output_saveFileName : 'output.csv',
//math_debug : true,
}
})
// bind to pager events
// *********************
.bind('pagerChange pagerComplete pagerInitialized pageMoved', function(e, c) {
var p = c.pager, // NEW with the widget... it returns config, instead of config.pager
msg = '"</span> event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
' page <span class="typ">' + (p.page + 1) + '/' + p.totalPages + '</span>';
$('#display')
.append('<li><span class="str">"' + e.type + msg + '</li>')
.find('li:first').remove();
})
table.bind('pagerChange', function() {
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});
// clear storage (page & size)
$('.clear-pager-data').click(function() {
// clears user set page & size from local storage, so on page
// reload the page & size resets to the original settings
$.tablesorter.storage( table, 'tablesorter-pager', '' );
});
// go to page 1 showing 10 rows
$('.goto').click(function() {
// triggering "pageAndSize" without parameters will reset the
// pager to page 1 and the original set size (10 by default)
// $(\'table\').trigger(\'pageAndSize\')
table.trigger('pageAndSize', [1, 10]);
});
$(document).ready(function(){
//j'ai dû le rajouter pour supprimer les espaces blancs au fond du tableau contacts
table.find('tr.pagerSavedHeightSpacer').remove();
//Bouton Téléchargement au format CSV
$('.download').click(function() {
// tell the output widget do it's thing
table.trigger('outputTable');
});
});
});
}I will edit this comment with a JSFiddle if i success in replicate the issue
Skipnot
commented
5 years ago I don't know why but i can't replicate this issue on JSfiddle.. plus i'll get on holiday today. So my coworker will take over.
Thank you for the tablesorter and all. Have a great summer !
Mottie
commented
5 years ago Have a great holiday!
I think the problem is that if you have more than one table/pager, the id="pager" isn't unique. If you have more than one table on the page, then you need to update container : '.pager', with some unique id or class name.
...
<div id='pager" + id_table + "' class='pager' style='margin:0!important;float:left'>
.
.
.
pager_selectors: {
container : '.pager' + id_table,
...
}Also, instead of using 9999 as the number of pages, it's cleaner to use "all".
<option selected='selected' value='all'>Tous</option>
Hello,
I use the tablesorter_filtre_pager.js, it works fine and it's great exept for one thing.. i got a table with x result, when i load the page i have my pager working fine (10 by 10) but sometime the select all result desn't work. It show "All" on the select but the result are still 10 by 10 instead of displaying all result.
If you got anything to help this.. :)