Dataatables - Nagłówki kolumn nie poruszają się podczas przewijania w poziomie

Mam prosty przykład mojego problemu. Używam Datatables 1.9. Nagłówki kolumn nie poruszają się podczas przewijania w poziomie, gdy datatable znajduje się wewnątrz innej tabeli HTML. Działa dobrze, gdy nie znajduje się w tabeli html. Mój przykład został faktycznie wzięty z ich przykładu na przewijaniu poziomym, ale dodałem zewnętrzny stół. Każda pomoc będzie doceniona. Szukałem wszędzie odpowiedzi. Oto kod. DziękiDataatables - Nagłówki kolumn nie poruszają się podczas przewijania w poziomie

<head> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery-ui.min.js"></script> 
<script type="text/javascript" src="<%=request.getContextPath()%>/scripts/jquery.dataTables.min.js"></script> 

</head> 

<form> 

<table> 
<tr> 
<td> 

    <div id="demo"> 
    <table id="example"> 
    <thead> 
    <tr> 
    <th>Rendering engine</th> 
    <th>Browser</th> 
    <th>Platform(s)</th> 
    <th>Engine version</th> 
    <th>CSS grade</th> 
    </tr> 
    </thead> 
    <tfoot> 
    <tr> 
    <th>Rendering engine</th> 
    <th>Browser</th> 
    <th>Platform(s)</th> 
    <th>Engine version</th> 
    <th>CSS grade</th> 
    </tr> 
    </tfoot> 
    <tbody> 
    <tr> 
    <td>Trident</td> 
    <td>Internet Explorer 4.0</td> 
    <td>Win 95+</td> 
    <td>4</td> 
    <td>X</td> 
    </tr> 
    <tr> 
    <td>Other browsers</td> 
    <td>All others</td> 
    <td>-</td> 
    <td>-</td> 
    <td>U</td> 
    </tr> 
    </tbody> 
    </table> 
    </div> 

</td> 
</tr> 
</table> 

</form> 

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript"> 

$(document).ready(function() { 

    $('#example').dataTable({ 
    "sScrollX": "100%", 
    "sScrollXInner": "110%" 
    }); 

}); 

</SCRIPT>

Źródło

2013-06-11 fjmdawg

Oto skrzypce z Twoim kodem http://jsfiddle.net/CHPqb/1/ Czy mógłbyś, proszę, wyjaśnić dokładniej, jaka jest dokładnie różnica między twoim kodem a przykładem na stronie z danymi? –

Twoje skrzypce dokładnie pokazują problem. Ich przykład nie ma zewnętrznej tabeli html. Jeśli usuniesz

powyżej i poniżej div będzie działać prawidłowo. – fjmdawg

Spróbuj naprawić szerokość zewnętrznego stołu http://jsfiddle.net/CHPqb/3/ –

Spróbuj http://jsfiddle.net/CHPqb/23/

Dodałem kod css i zamiast sScrollXInner zmienić go scrollX: true

th, td { 
white-space: nowrap; 
} 

div.dataTables_wrapper { 
    width: 80%; 
    margin: 0 auto; 
} 

$('#example').dataTable({ 
    "sScrollX": "100%", 
    "scrollX": true 
});

Źródło

2016-05-03 06:57:54 qwerzxcxyz

Zamiast przypadku korzystania "scrollX": true ruch DataTable wewnątrz div: <div class='scroll'></div>

I dodaj CSS: div.scroll { overflow:auto; }

Źródło

2018-01-05 11:07:46

Dataatables - Nagłówki kolumn nie poruszają się podczas przewijania w poziomie

Odpowiedz

Powiązane problemy