webentwicklung-frage-antwort-db.com.de

probleme mit jQuery DataTable-Überlauf und Textumbruch

Ich habe die folgende DataTable (Full-Width-CSS-Klasse setzt width = 100%)

<table class="datatable full-width">
    <thead>
        <th>LOB</th>
        <th>Creditor Line 1</th>
        <th>Creditor Line 2</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th></th>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Javascript:

var profileTable =
            $(".datatable").dataTable({
                "iDisplayLength": 25,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false
            });

Alles funktioniert einwandfrei, bis ein Datensatz mit einer langen Zeichenfolge vorhanden ist. Wenn ein Datensatz mit wirklich langem Text angezeigt wird, läuft die Datentabelle rechts auf der Seite über. (Siehe Screenshot unten, die rote Linie ist der Ort, an dem die Seite enden soll.) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

Kann mir jemand sagen, wie ich den Text entweder in die Zellen einwickeln oder dieses Überlaufproblem verhindern kann?

Ich habe es über 'table-layout: fixed' versucht ... dies verhindert den Überlauf, setzt aber alle Spalten auf die gleiche Breite.

Vielen Dank

35
thiag0

Ich entschied mich für die Einschränkung (für manche Leute einen Vorteil), dass meine Zeilen nur eine Textzeile hoch waren. Das CSS, das lange Zeichenfolgen enthält, wird dann zu:

.datatable td {
  overflow: hidden; /* this is what fixes the expansion */
  text-overflow: Ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
  white-space: nowrap;
}

[Bearbeiten, um hinzuzufügen:] Nachdem ich meinen eigenen Code verwendet hatte und zunächst versagt hatte, erkannte ich eine zweite Anforderung, die den Leuten helfen könnte. Die Tabelle selbst muss ein festes Layout haben, oder die Zellen versuchen einfach zu erweitern, um den Inhalt aufzunehmen, egal was passiert. Wenn DataTables-Stile oder Ihre eigenen Stile dies nicht bereits tun, müssen Sie dies festlegen:

table.someTableClass {
  table-layout: fixed
}

Jetzt, da der Text mit Ellipsen abgeschnitten ist, können Sie ein potenziell verborgenes Textobjekt "sehen", indem Sie ein Tooltip-Plugin oder eine Detailschaltfläche oder ähnliches implementieren. Eine schnelle und schmutzige Lösung ist jedoch die Verwendung von JavaScript, um den Titel jeder Zelle so festzulegen, dass er mit dem Inhalt identisch ist. Ich habe jQuery verwendet, aber Sie müssen nicht:

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables stellt auch Callbacks auf Zeilen- und Zellen-Rendering-Ebenen bereit. Sie können also die Logik bereitstellen, um die Titel an diesem Punkt anstelle eines jQuery.each-Iterators festzulegen. Wenn Sie jedoch andere Listener verwenden, die den Zellentext modifizieren, sollten Sie sie besser mit dem jQuery.each am Ende treffen.

Diese gesamte Abschneidemethode hat AUCH eine Einschränkung, von der Sie angegeben haben, dass Sie kein Fan sind: Standardmäßig haben Spalten die gleiche Breite. Ich identifiziere Spalten, die konsistent breit oder konsistent eng sein sollen, und lege explizit eine prozentuale Breite für sie fest (Sie können dies in Ihrem Markup oder mit sWidth tun). Alle Spalten ohne explizite Breite erhalten eine gleichmäßige Verteilung des verbleibenden Speicherplatzes.

Das mag viele Kompromisse sein, aber das Endergebnis hat sich für mich gelohnt.

38
Greg Pettit

Die folgende CSS-Deklaration funktioniert für mich:

.td-limit {
    max-width: 70px;
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
15
Mukesh Salaria

Sie können versuchen, den Word-wrap einzustellen, es funktioniert jedoch noch nicht in allen Browsern.

Eine andere Methode wäre das Hinzufügen eines Elements um die Zelldaten wie folgt:

<td><span>...</span></td>

Dann füge ein paar CSS hinzu:

.datatable td span{
    max-width: 400px;
    display: block;
    overflow: hidden;
}
10
David Gallagher

Ich hatte das gleiche Problem des Textumbruchs und löste es, indem ich in DT_bootstrap.css..__ die css der table-Klasse änderte. 

   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    Word-break: break-all;
   } 
3
Harish Lalwani

Ganz einfach funktioniert der CSS-Stil mit white-space:nowrap sehr gut, um Textumbrüche in Zellen zu vermeiden. Natürlich können Sie text-overflow:Ellipsis und overflow:hidden verwenden, um Text mit dem Effekt "Ellipsis" abzuschneiden.

<td style="white-space:nowrap">Cell Value</td>
3
Lucky

Ich bin zwar spät dran, aber nachdem ich die Antwort von @Greg Pettit und ein paar Blogs oder andere SO - Fragen gelesen habe, kann ich mich leider nicht daran erinnern, dass ich beschlossen habe, ein paar dataTables-Plugins zu erstellen, um damit umgehen zu können.

Ich habe sie in einem Mercurial Repo auf Bitbucket gesetzt. Ich folgte dem fnSetFilteringDelay plugin und änderte einfach die Kommentare und den Code darin, da ich noch nie ein Plugin für irgendetwas erstellt habe. Ich habe 2 gemacht und kann sie gerne verwenden, dazu beitragen oder Vorschläge machen. 

  • dataTables.TruncateCells - schneidet jede Zelle in einer Spalte auf eine festgelegte Anzahl von Zeichen herunter, wobei die letzten 3 durch Ellipsen ersetzt werden, und fügt den gesamten vorbeschnittenen Text in den Zellentitel ein. 

  • dataTables.BreakCellText - versucht, bei jedem benutzerdefinierten X-Zeichen in jede Zelle in der Spalte ein Unterbrechungszeichen einzufügen. Es gibt Macken in Bezug auf Zellen, die sowohl Leerzeichen als auch Bindestriche enthalten. Es kann zu seltsamen Ergebnissen kommen (wie zum Beispiel ein paar Zeichen, die hinter dem zuletzt eingefügten Zeichen stehen 
    Charakter). Vielleicht kann jemand das robuster machen, oder Sie können einfach mit den breakPos für die Kolonne spielen, damit sie mit Ihren Daten gut aussieht.

3
JustinP8

Das gleiche Problem und ich habe es gelöst, die Tabelle zwischen den Code zu setzen

<div class = "table-responsive"> </ div>
2
César Augusto

Versuchen Sie, td {Word-wrap: break-Word;} zur css hinzuzufügen, und prüfen Sie, ob sie dies behebt.

1
ScottS

Der Einsatz der Klassen "responsive nowrap" für das Tabellenelement sollte den Trick ausführen.

0
Ryan

Sie können nur Rendern verwenden und Ihr eigenes div oder span umschließen. TDs sind schwer zu formatieren, wenn es um maximale Breite, maximale Höhe usw. geht. Div und Span sind einfach.

Siehe: https://datatables.net/examples/advanced_init/column_render.html

Ich denke, eine schönere Lösung, die dann mit CSS-Hacks arbeitet, die nicht über Browser hinweg unterstützt werden. 

0
user1281146