Datatables Largeur De Débordement Pour Un Grand Nombre De Colonnes

Woah, j'ai ce grave problème avec jquery datatables plugin. J'ai une table avec un grand nombre de colonnes (plus de 35 colonnes) et ce tableau est le dépassement de mon div de contenu.

J'ai essayé de nombreuses façons (y compris la solution au même problème de débordement de pile), mais ne pouvait toujours pas à résoudre ce problème. Alors, j'ai vraiment besoin de votre aide ici, s'il vous plaît. 🙂

Merci merci beaucoup

Vous pouvez voir la capture d'écran ici.

Voici le code javascript

var list_table = $("#list_table").dataTable({
            "sScrollX": "100%",
            "sScrollXInner": "110%",
            "bScrollCollapse": true
        });

Voici le tableau html

<table class="display" id="list_table">
<thead>
<tr>
<th rowspan="2">Account Code</th>             
<th rowspan="2">Account Name</th>
<th colspan="3">January</th><th colspan="3">February</th><th colspan="3">March</th><th colspan="3">April</th><th colspan="3">May</th><th colspan="3">June</th><th colspan="3">July</th><th colspan="3">August</th><th colspan="3">September</th><th colspan="3">October</th><th colspan="3">November</th><th colspan="3">December            
</th><th colspan="3">January s/d December
<!--            <th rowspan="2" class="link"></th>-->
</th></tr>
<tr>
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>        
<th>Budget</th>
<th>Actual</th>
<th>Variance</th>   
</tr>        
</thead>
<tbody>
<tr>
<td>5201010013</td>
<td><span class="coa-text">INSENTIVE/SHIFT ALLOWANCE</span><br> <span style="background: #778A52" class="attr-text">Divisi Anggaran dan Pajak</span> <span class="loc-text">InChina</span> <span class="asset-text">FA-GENSET</span> <span class="tenant-text">PT. Angin Rupiah</span> </td>
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">2,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">2,500,000.00</td>                               
<td class="align-right">30,000,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">30,000,000.00</td>    
</tr> 
<tr>
<td>5203010001</td>
<td><span class="coa-text">MAKAN BERSAMA TAMU DAN REKANAN</span><br> <span style="background: #778A52" class="attr-text">Divisi Anggaran dan Pajak</span> <span class="loc-text">Satu Dua</span> </td>
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">7,000,000.00</td>
<td class="align-right">-5,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">1,500,000.00</td>
<td class="align-right">0.00</td>
<td class="align-right">1,500,000.00</td>                               
<td class="align-right">18,000,000.00</td>
<td class="align-right">7,000,000.00</td>
<td class="align-right">11,000,000.00</td>    
</tr> 
</tbody>

OriginalL'auteur deerawan | 2011-12-28

9

J'aimerais proposer la suppression de la sScrollXInner tout d'abord (il ne devrait pas vraiment être nécessaire... 🙂 ). Puis un coup d'oeil à ce que la largeur de l'élément wrapper est. Il devrait finir par ressembler à cet exemple: http://datatables.net/release-datatables/examples/basic_init/scroll_x.html

Salut Allan! 😉 Cet exemple utilise sScrollXInner. Est-ce juste une déconseillé de propriété? Ou sans le "110%" déclaration il en fait une auto largeur?
Ses pas obsolète, il a juste ne devrait généralement pas être nécessaire. Les tables de données devrait permettre à la table pour être aussi large que nécessaire, sans la sScrollXInner paramètre, ou 100% de la largeur si la largeur est inférieure à 100%.
OMG Allan, il fonctionne vraiment homme! Woah, vous êtes totalement un grand savoir ce genre de choses. Je vous remercie beaucoup. ^^

OriginalL'auteur Allan Jardine
1

scrollX: vrai

Cela va automatiquement ajouter une barre de défilement lorsque tout dépassement de la largeur de la colonne.

Assurez-vous que responsive: false autres sages, vous verrez un (+) icône dans la création de la ligne

OriginalL'auteur Rajiv Sharma

Vous devez vous connecter pour publier un commentaire.