jquery datatables: Fix Tabellenüberschrift und Scrollen von Datensätzen im Körper

Question

Ich benutze die jquery-Databases, um die Daten dynamisch anzuzeigen. In einigen Fällen scheinen die Datensätze so lang zu sein, und ich wollte die Tabellenüberschrift fixieren und in der Lage sein, durch die restlichen Datensätze zu scrollen.

<a href="https://jsfiddle.net/Bhannur/q7d2j0z3/2"> Sample</a> 

Unten ist der Link für JSFiddle und es funktioniert gut mit CSS-Code (kommentiert).

Sample

In meinem Projekt Szenario möchte ich das Problem durch Änderung von Javascript Datatable Eigenschaften beheben.

Answer 1

Die feste Header-Erweiterung für Tables wird Ihnen helfen: https://datatables.net/extensions/fixedheader/

Von DataTables.net

Wenn Tabellen mit einer besonders großen Datenmenge auf jeder Seite gezeigt angezeigt wird, kann es nützlich sein, wenn die Kopfzeile der Tabelle und/oder Fußzeile am oberen oder unteren Rand des Scrollfensters fixiert ist. Dadurch können Ihre Benutzer schnell feststellen, worauf sich jede Spalte bezieht, anstatt , die zum Anfang der Tabelle zurückscrollen müssen.

Beispiel:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css"> 
<script src=https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js' /> 
$('#myTable').DataTable({ 
    fixedHeader: true 
}); 

EDIT: Arbeits Fiddle here

Ihre Skriptverweise sind falsch. Folge denen, die ich auf der Geige habe.

Answer 2

Ich denke, Sie brauchen nur scrollY mit scrollCollapse und Paging-Eigenschaften wie folgt, siehe Fiddle für eine Demo.

Ich habe einige andere Eigenschaften hinzugefügt, damit es wie die Demo aussieht, die Sie haben, die Eigenschaften selbst sind ziemlich selbsterklärend, aber sagen Sie mir, wenn Sie nichts verstehen.

$(document).ready(function() { 
    $('#list').DataTable({ 
    "scrollY": "200px", 
    "scrollCollapse": true, 
    "paging": false, 
    "searching": false, 
    "info": false, 
    "ordering": false 
    }); 
});