2016-06-30 9 views
1

Ich fand, dass DataTables Plug-in ist sehr schön und praktisch, bis Sie alle notwendigen Parameter am Code starten wissen. Aber in meinem Fall möchte ich den Parameter scrollX entsprechend der Höhe des erkannten Dokuments ändern (60% der verfügbaren Höhe). Ich verstehe, dass wir hier über irgendeine Art von Objekt sprechen, aber Push und andere Tricks helfen nicht. Hier ist problematischer Code:DataTables: wie Variable in Tabelle Initialisierungscode setzen

$(document).ready(function() { 
table = $('#example').DataTable({ 
language: { 
info: "Show _START_ til _END_ of _TOTAL_ recs" }, 
scrollY: "300px", 
scrollX:  true, 
scrollCollapse: true, 
paging:   false, 
rowReorder: false, 
ordering: false, 
fixedColumns: { 
    leftColumns: 2, 
    rightColumns:0}  
    }); 
}); 

und stattdessen „300px“ Ich wollte eine Art von JavaScript-Variable setzen, die Dokumentenhöhe enthält, aber klassische Objektmanipulation zeigt nicht Ergebnis. Also, ich habe versucht zu überprüfen:

console.log(Table.scrollX); 

aber Fehler bekommen. Dann habe ich versucht, die Tabelle als public var zu machen, aber dann einen undefinierten Wert. Auch:

table.push({'scrollX': '300px'}); 

und einige seltsame Kombination, aber nop. Irgendein Vorschlag, bitte? Vielen Dank.

Antwort

1

So etwas wie

$(document).ready(function() { 
    var myScrollY = '300px'; 
    var table = $("#example").DataTable({ 
    scrollY: myScrollY 
    }); 
); 
+0

Patrick G .: autsch, ich konnte mich nicht so erinnern! Sauber und einfach. Danke mann. –

+0

@LudusH Gut zu helfen. –

1

Hier ist die Lösung, die ich in meinem Projekt bin mit:

Sie müssen resize Ereignis behandeln. Im Handler die verfügbare Fläche für scrollable Teil der Tabelle berechnen:

$(window).resize(function() { 
    var scrollWidth = "300px"; 
    // scrollWidth should be calculated based on your needs 
    table.find('.dataTables_scrollBody').width(scrollWidth); 
}) 

Ich habe das gleiche getan für height

aktualisieren:

Einstellung scrollY: "300px" funktioniert nur für die Initialisierung.

Wenn Sie height des Dokuments ändern, wird das Ereignis domready ausgelöst und Sie müssen neue height Ihrer scrollable Bereich datatables neu zu berechnen:

$(window).resize(function() { 
    var newScrollHeight = Number($(window).height() - $('#IdOfAnElement').height() - other heights) + "px"; // 

    table.find('.dataTables_scrollBody').height(newScrollHeight); 
}) 

.dataTables_scrollBody ist das Element der datatablesscrollable Bereich enthält.

+0

Andrei Zhytkevich danke Mann, aber ich konnte Ihre Lösung nicht realisieren. Einige hilfreiche Hinweise, bitte? –

+0

Was ist das Problem? –

+0

Ich habe dein Beispiel nicht verstanden. Ich habe Ihren Code in meinem Fall ausprobiert und konnte es nicht funktionieren lassen. Sind Sie bereit, es zusammen mit meinem obigen Code zu erklären? Vielen Dank. –