so ändern Sie den Inhalt einer header-Zelle in dataTables?

Ich bin mit dem dataTables plugin

Auf meine sortierbaren Spalten, die ich ersetzen will, die Spalte text mit einem button.

Jedoch, dies zu tun:

$( oSettings.aoColumns[i].nTh).text();

Kann ich abrufen, den text in der jeweiligen Spalte, ABER

$( oSettings.aoColumns[i].nTh).text("some text");
$( oSettings.aoColumns[i].nTh).html("<a href='#'>some button</a>");

Tut man nicht alles.

Kann jemand mir sagen, warum kann ich abrufen von Informationen von einer Zelle, aber nicht Bearbeiten Sie den Inhalt? Nicht unbedingt ein dataTables Frage, aber vielleicht hat ja jemand in etwas laufen ähnlich.

Danke für die Hilfe!

EDIT: hier ist die Lösung:
Innerhalb Ihres Tisches rufen Sie angeben, welche Spalten sollten sortierbar = diese erhalten eine .jqmSorter Klasse

  "aoColumns": [
    /* Select */    {"bSortable": false },
    /* Type */      {"sClass": "jqmSorter"},
    /* From */      {"bSortable": false },
    /* Status */    {"bSortable": false },
],

Dann rufen Sie die fnHeaderCallback in denen ich mich austauschen der header den Inhalt einer Zelle mit einer JQM-Taste:

   "fnHeaderCallback": function( nHead ) {      
       $(nHead).closest('thead').find('.jqmSorter').each( function () {
          var sortTitle = $(this).text(),
          sortButton = 
             $( document.createElement( "a" ) ).buttonMarkup({
                  shadow: false,
                  corners: false,
                  theme: 'a',
                  iconpos: "right",
                  icon: "ui-icon-radio-off"
                  })
             sortButton.find('.ui-btn-text').text(sortTitle);
             $(this).html( sortButton )
             sortButton.addClass("colHighTrigger");             
             });
       }
Wollen Sie dies tun, wenn die datatable ist gerendert, oder Sie wollen es tun, wenn es selbst dargestellt wird?
Es sollte nur einmal geschehen, wenn die datatable gerendert wird. Die Schaltfläche ist nur für visuelle appreance (Jquery-Mobile-Symbol-Taste nur, die ich bin, Wechsel-Symbol-Klassen auf, je nach Sortierung)

InformationsquelleAutor frequent | 2012-02-23

  1. 2

    Können Sie es auf diese Weise:

    Während die Festlegung table-Spalten (definieren, wenn Sie nicht tun es bereits), und verwenden Sie die sClass - Attribut des table-definition für die Spalte (das ist im JSON).

    Nach dieser Klasse, werden angewendet, um die Tabelle-Spalte.

    Danach verwenden Sie die callback Funktion der Datentabellen : fnRowCallback

    und in dieser, legen Sie die html-als 

    $(nRow, '.your_class').html('Your HTML Values');

    Diese wird aufgerufen, wenn jede Zeile der Tabelle wiedergegeben wird.

    Wenn Sie nicht wollen, es zu tun, auf jede Zeile, können Sie Steuern, dass mit einer if-Bedingung.

    cool. mal sehen, ob ich diese zu arbeiten.
    Danke! es arbeitete. Ich verwendet fnHeaderCallBack obwohl. Möchten Sie vielleicht ändern Sie dies in Ihrer Antwort auch. Letzte Frage. Wissen Sie, wer zu wählen Sie die header-Zellen in einem zwei-Zeilen-header. Die Lösung oben nur schnappt sich der erste header-Zeile.
    fand das auch. Alle setzen. Thx nochmal.

    InformationsquelleAutor linuxeasy

  2. 1

    Verwenden fnRender in Ihrem aoColumns Einstellungen, verwenden Sie es, um return HTML code für die bestimmte Zelle, drop-downs, Checkboxen, was du willst.

    "aoColumns": [
    /*Col 1*/
    {
     "mData": "RowID",
     "bSortable": false,
     "sClass": "jqmSorter",
     "fnRender": function(obj){
                     return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
                 }
    },
    /*Col 2*/
    {
     "bSortable": false,
     "sClass": "jqmSorter",
     "fnRender": function(obj){
                     return "<input id='" + obj.aData.RowID + "' type='button' value='myval'/>"
                 }
    }
]

    InformationsquelleAutor Pierre

Schreibe einen Kommentar