Quelle est la bonne façon d'utiliser slimscroll sur une table de bootstrap?

J'essaie d'utiliser le défilement mince sur un tableau HTML mais je ne reçois aucun défilement. Voici les codes que je tried.:-Quelle est la bonne façon d'utiliser slimscroll sur une table de bootstrap?

Le code de table: -

<div class"container"> 
<div class="row"> 
<div class="col-md-8"> 
<div class="scrolltable"> 
<table class="table table-striped table-bordered text-center table-condensed"> <thead> 
<tr style="height: 83px;"> 
<th style="width: 249px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; STUDENT-ID</th> 
<th style="width: 34px; height: 83px;">&nbsp;S.NO</th> 
<th style="width: 198px; height: 83px;">&nbsp; &nbsp; &nbsp; &nbsp; STUDENT NAME</th> 
</tr> 
</thead> 
    <tbody id="bodyer"> 

<tr style="height: 23px;"> 
    <td style="width: 249px; height: 23px;">15-14-065</td> 
    <td style="width: 34px; height: 23px;">1</td> 
    <td style="width: 198px; height: 23px;">Anisul Islam</td> 
    <td style="width: 11px; height: 23px;">L</td> 
    <td style="width: 11px; height: 23px;">U</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 13px; height: 23px;">&nbsp;</td> 
    <td style="width: 13px; height: 23px;">&nbsp;</td> 
    </tr> 

    <tr style="height: 23px;"> 
    <td style="width: 249px; height: 23px;">&nbsp;</td> 
    <td style="width: 34px; height: 23px;">&nbsp;</td> 
    <td style="width: 198px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 13px; height: 23px;">&nbsp;</td> 

    <td style="width: 13px; height: 23px;">&nbsp;</td> 
    </tr> 
    <tr style="height: 23px;"> 
    <td style="width: 249px; height: 23px;">&nbsp;</td> 
    <td style="width: 34px; height: 23px;">&nbsp;</td> 
    <td style="width: 198px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 11px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 12px; height: 23px;">&nbsp;</td> 
    <td style="width: 13px; height: 23px;">&nbsp;</td> 
    <td style="width: 13px; height: 23px;">&nbsp;</td> 
    </tr> 
    </tbody> 


    </table></div></div></div></div>

je lis les réponses d'ici: - Custom scrollbar for Bootstrap Table mais cela ne semble pas aider. est ici le javascript, où je suis en train d'utiliser défilement mince pour la table: -

<script> 
$(function(){ 
    $('.scrolltable').slimScroll({ 
     height: '50px' 
    }); 
}); 

</script>

et moi avons aussi essayé ceci: -

<script> 
$(function(){ 
    $('#bodyer').slimScroll({ 
     height: '50px' 
    }); 
}); 

</script>

Source

2017-07-20 lmgguy

Votre script ne fonctionne pas pour deux raisons:

1) Vous devez ajouter les propriétés suivantes dans la balise "table":

données-bascule = "table" données height = "299"

ainsi:

<table class="table table-striped table-bordered text-center table-condensed" data-toggle="table" data-cache="false" data-height="299">

2) Vous devez avoir le même nombre de colonnes dans votre « thead "tag et dans toutes les balises" tr "suivantes. Dans votre exemple, je compte 3 colonnes dans la première ligne de votre table - les balises « tHead » - et 25 colonnes dans les lignes suivantes - les balises « td » de chaque balise « tr » -

Here is a working example with your data.

Note: J'ai essayé la propriété "colspan" mais cela ne fonctionnait pas avec la bibliothèque Slimscroll. Je devais ajouter "theads" tags dans la première rangée

Remarque: le script JavaScript suivant fonctionne bien:

$(document).ready(function() { 
    $('.fixed-table-body').slimScroll({}); 
});

Source

2017-07-20 12:43:52 Cpalitzyne

Quelle est la bonne façon d'utiliser slimscroll sur une table de bootstrap?

Répondre

Questions connexes