Deaktivieren Sie die Sortierung für eine bestimmte Spalte in jQuery DataTables

155

Ich verwende das jQuery DataTables-Plugin , um die Tabellenfelder zu sortieren. Meine Frage lautet: Wie deaktiviere ich die Sortierung für eine bestimmte Spalte? Ich habe es mit folgendem Code versucht, aber es hat nicht funktioniert:

"aoColumns": [
  { "bSearchable": false },
  null
]   

Ich habe auch den folgenden Code ausprobiert:

"aoColumnDefs": [
  {
    "bSearchable": false,
    "aTargets": [ 1 ]
  }
]

Dies führte jedoch immer noch nicht zu den gewünschten Ergebnissen.

Usman
quelle
1
Ich habe meine Antwort mit einer Option bearbeitet, mit der Sie die Deaktivierungsspalten in Ihrer TH-Definition festlegen können.
Paulo Fidalgo
Deaktivieren Sie die Schaltfläche mit CSS. Schauen Sie sich diese Seite an. datatables.net/forums/discussion/21164/...
Eugine Joseph
Vielleicht möchten Sie auch cbabhusal.wordpress.com/2015/05/20/…
Illusionist

Antworten:

176

Das suchen Sie:

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});
Gnuahn
quelle
3
das hat bei mir funktioniert. Wenn Sie die erste Spalte sortieren möchten, 'aTargets': [-1], für die zweite 'aTargets': [1], für die dritte 'aTargets': [2] und so weiter.
Lasang
5
Sie können einfach 'aTargets' machen: [1, 2]
Adrien Be
2
@Lasang - Meinst du wirklich [-1], dann [1], [2]etc? Was bedeutet das -1? 1Beginnt die Indizierung für Spalten nicht bei dataTables?
Dan Nissenbaum
1
-1ist der Index, der vom Ende der Tabelle zählt. ( -1ist die letzte Spalte der Tabelle)
Ramy Nasr
1
Ab DataTables 1.10.5 können jetzt Initialisierungsoptionen mithilfe von HTML5-Daten- * -Attributen definiert werden. Siehe stackoverflow.com/a/32281113/1430996
Jeromy French
86

Ab DataTables 1.10.5 können jetzt Initialisierungsoptionen mithilfe von HTML5-Daten- * -Attributen definiert werden.

-von DataTables-Beispiel - HTML5-Daten- * Attribute - Tabellenoptionen

So Sie verwenden können , data-orderable="false"auf die thder Spalte , die Sie wollen nicht sortierbar sein. Beispielsweise kann die zweite Spalte "Avatar" in der folgenden Tabelle nicht sortiert werden:

<table id="example" class="display" width="100%" data-page-length="25">
    <thead>
        <tr>
            <th>Name</th>
            <th data-orderable="false">Avatar</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td><img src="https://www.gravatar.com/avatar/8edcff60cdcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/04/25</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td><img src="https://www.gravatar.com/avatar/98fe9834dcca2ad650758fa524d4990?s=64&amp;d=identicon&amp;r=PG" alt="" style="width: 64px; height: 64px; visibility: visible;"></td>
            <td>2011/07/25</td>
            <td>$170,750</td>
        </tr>
        ...[ETC]...
    </tbody>
</table>

Sehen Sie ein funktionierendes Beispiel bei https://jsfiddle.net/jhfrench/6yxvxt7L/ .

Jeromy Französisch
quelle
9
IMO, dies ist die beste Antwort hier, einfachster und elegantester Ansatz
Hamman Samuel
2
Dies deaktiviert die Sortierfunktion, aber ich habe (in 1.10.12) festgestellt, dass die Spalte bei der Initialisierung der DataTable standardmäßig immer noch sortiert ist, wodurch die Spalte mit einem aufsteigenden Sortierzeichen versehen wird. Wenn Sie dies nicht möchten, können Sie die Datentabelle initialisieren, ohne wie folgt zu sortieren: $ ('# example'). DataTable ({'order': []});
Brian Merrell
@BrianMerrell Wellllllll ... schau dir das an! jsfiddle.net/ja0ty8xr Sie sollten ein GitHub-Problem für dieses Verhalten öffnen. :)
Jeromy French
64

Um die Sortierung der ersten Spalte zu deaktivieren, versuchen Sie es mit dem folgenden Code in datatables jquery. Die Null steht hier für die Sortierfreigabe.

$('#example').dataTable( {
  "aoColumns": [
  { "bSortable": false },
  null,
  null,
  null
  ]
} );

Deaktivieren Sie die Sortierung für eine Spalte in jQuery-Datentabellen

Paulraj
quelle
@Paulraj Der Link ist defekt. Würde es Ihnen etwas ausmachen, ihn zu ändern?
Taufique
1
Ab DataTables 1.10.5 können jetzt Initialisierungsoptionen mithilfe von HTML5-Daten- * -Attributen definiert werden. Siehe stackoverflow.com/a/32281113/1430996
Jeromy French
60

Verwenden von Datatables 1.9.4 Ich habe die Sortierung für die erste Spalte mit diesem Code deaktiviert:

/* Table initialisation */
$(document).ready(function() {
    $('#rules').dataTable({
        "sDom" : "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType" : "bootstrap",
        "oLanguage" : {
            "sLengthMenu" : "_MENU_ records per page"
        },
        // Disable sorting on the first column
        "aoColumnDefs" : [ {
            'bSortable' : false,
            'aTargets' : [ 0 ]
        } ]
    });
});

BEARBEITEN:

Sie können sogar deaktivieren, indem Sie die no-sortKlasse auf Ihrem <th>,

und verwenden Sie diesen Initialisierungscode:

// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
    "bSortable" : false,
    "aTargets" : [ "no-sort" ]
} ]

BEARBEITEN 2

In diesem Beispiel verwende ich Datables with Bootstrap nach einem alten Blog-Beitrag. Jetzt gibt es einen Link mit aktualisiertem Material zum Stylen von Datatables mit Bootstrap .

Paulo Fidalgo
quelle
@larrylampco Ich habe den Beitrag mit aktualisierten Links aktualisiert.
Paulo Fidalgo
Danke .. was ist mit dem Verlust von CSS, wenn wir Sortieren anwenden
Shanker Paudel
1
Ab DataTables 1.10.5 können jetzt Initialisierungsoptionen mithilfe von HTML5-Daten- * -Attributen definiert werden. Siehe stackoverflow.com/a/32281113/1430996
Jeromy French
27

Ich verwende nur ein benutzerdefiniertes Attribut in thead td und steuere die Sortierung, indem ich diesen attr-Wert automatisch überprüfe.

So wird der HTML-Code sein

<table class="datatables" cellspacing="0px" >

    <thead>
        <tr>
            <td data-bSortable="true">Requirements</td>
            <td>Test Cases</td>
            <td data-bSortable="true">Automated</td>
            <td>Created On</td>
            <td>Automated Status</td>
            <td>Tags</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>

Und JavaScript zum Initialisieren von Datentabellen wird sein (es wird die Sortierinformationen dynamisch aus der Tabelle selbst abrufen;)

$('.datatables').each(function(){
    var bFilter = true;
    if($(this).hasClass('nofilter')){
        bFilter = false;
    }
    var columnSort = new Array; 
    $(this).find('thead tr td').each(function(){
        if($(this).attr('data-bSortable') == 'true') {
            columnSort.push({ "bSortable": true });
        } else {
            columnSort.push({ "bSortable": false });
        }
    });
    $(this).dataTable({
        "sPaginationType": "full_numbers",
        "bFilter": bFilter,
        "fnDrawCallback": function( oSettings ) {
        },
        "aoColumns": columnSort
    });
});
Bhavesh B.
quelle
3
Sie sollten data-bSortableanstelle von verwenden bSortable. bSortableist kein gültiges HTML-Attribut.
James Donnelly
Ab DataTables 1.10.5 können jetzt Initialisierungsoptionen mithilfe von HTML5-Daten- * -Attributen definiert werden. Siehe stackoverflow.com/a/32281113/1430996
Jeromy French
15

columnDefsakzeptiert jetzt eine Klasse. Ich würde sagen, dies ist die bevorzugte Methode, wenn Sie Spalten angeben möchten, die in Ihrem Markup deaktiviert werden sollen:

<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th class="datatable-nosort">Actions</th>
        </tr>
    </thead>
    ...
</table>

Dann in Ihrem JS:

$("table").DataTable({
    columnDefs: [{
        targets: "datatable-nosort",
        orderable: false
    }]
});
dtbarne
quelle
10

Folgendes können Sie verwenden, um bestimmte zu deaktivierende Spalten zu deaktivieren:

 $('#tableId').dataTable({           
            "columns": [
                { "data": "id"},
                { "data": "sampleSortableColumn" },
                { "data": "otherSortableColumn" },
                { "data": "unsortableColumn", "orderable": false}
           ]
});

Alles was Sie tun müssen, ist das "orderable": false zu der Spalte hinzuzufügen, die Sie nicht sortieren möchten.

Constantin Stan
quelle
6
$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);
abhinav
quelle
Bhaveshs Antwort ist klug, aber übertrieben. Um die Sortierung zu deaktivieren, verwenden Sie einfach die Antwort von abhinav. Wenn Sie die Sortierung in der ersten Spalte deaktivieren, fügen Sie ein Spaltenziel in die Option aoColumnDefs ein:"bSortable": false, "aTargets": [0]
Matthew
5

Versuchen Sie für die Deaktivierung der Sortierung einzelner Spalten Folgendes:

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0 ] }
           ]
        });
    });                                         
</script>

Versuchen Sie für mehrere Spalten dieses Beispiel: Sie müssen nur die Spaltennummer hinzufügen. Standardmäßig beginnt es bei 0

<script type="text/javascript">                         
    $(document).ready(function() 
    {
        $("#example").dataTable({
           "aoColumnDefs": [
              { 'bSortable': false, 'aTargets': [ 0,1,2,4,5,6] }
           ]
        });
    });                                         
</script>  

Hier Column 3funktioniert nur

Siddhartha esunuri
quelle
5

Ab 1.10.5 einfach einschließen

'bestellbar: falsch'

in columnDefs und zielen Sie auf Ihre Spalte mit

'Ziele: [0,1]'

Tabelle sollte mögen wie:

var table = $('#data-tables').DataTable({
    columnDefs: [{
        targets: [0],
        orderable: false
    }]
});
Marko Bajlovic
quelle
5

Wenn Sie die orderableEigenschaft FIRST column auf false setzen, müssen Sie auch die Standardspalte festlegen, orderda dies sonst nicht funktioniert, da die erste Spalte die Standardreihenfolge ist. Das folgende Beispiel deaktiviert die Sortierung in der ersten Spalte, legt jedoch die zweite Spalte als Standardreihenfolge fest (denken Sie daran, dass die Indizes von dataTables auf Null basieren).

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
Moses Machua
quelle
Dies ist die Antwort, die für mich am 17. Juli 2020 funktioniert hat
Brian vor
3
"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

Hier 0ist der Index der Spalte. Wenn Sie möchten, dass mehrere Spalten nicht sortiert werden, geben Sie die durch getrennten Spaltenindexwerte ancomma(,)

Codierer
quelle
Ist es möglich, die Sortierung für alle Spalten zu deaktivieren?
Fidel Castro
Ja, es ist möglich, Sie können diesen Link besuchen, um zu erfahren, cbabhusal.wordpress.com/2015/08/18/…
Illusionist
3

Um Bhavishs Antwort zu aktualisieren (was meiner Meinung nach für eine ältere Version von DataTables gilt und für mich nicht funktioniert hat). Ich denke, sie haben den Attributnamen geändert. Versuche dies:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
Josh Mouch
quelle
Dies scheint ein netter Ansatz zu sein ... wenn es funktioniert hat, aber für mich nicht. Ist es dokumentiert?
AllInOne
1
@AllInOne: Ja, für data-orderable... siehe stackoverflow.com/a/32281113/1430996 . data-sortablefunktioniert auch, aber ich kann nicht finden, wo es dokumentiert ist.
Jeromy French
viel bessere Lösung
Washington Morais
2

Klasse verwenden:

<table  class="table table-datatable table-bordered" id="tableID">
    <thead>
        <tr>
            <th class="nosort"><input type="checkbox" id="checkAllreInvitation" /></th>
            <th class="sort-alpha">Employee name</th>
            <th class="sort-alpha">Send Date</th>
            <th class="sort-alpha">Sender</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="userUid[]" value="{user.uid}" id="checkAllreInvitation" class="checkItemre validate[required]" /></td>
            <td>Alexander Schwartz</td>
            <td>27.12.2015</td>
            <td>dummy@email.com</td>
        </tr>
    </tbody>
</table>
<script type="text/javascript">
    $(document).ready(function() {
        $('#tableID').DataTable({
            'iDisplayLength':100,
            "aaSorting": [[ 0, "asc" ]],
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': ['nosort']
            }]
        });
    });
</script>

Jetzt können Sie <TH> die Klasse "nosort" geben

Ghanshyam Gohel
quelle
2

Dies funktioniert bei mir für eine einzelne Spalte

 $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false 
 }]});
Amay Kulkarni
quelle
1

Wenn Sie bereits einige Spalten ausblenden müssen, wie ich Nachname Spalte ausblenden. Ich musste nur fname, lname verketten, also habe ich eine Abfrage gemacht, aber diese Spalte vor dem Frontend ausgeblendet. Die Änderungen in Sortierung deaktivieren in solchen Situationen sind:

    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ 3 ] },
        {
            "targets": [ 4 ],
            "visible": false,
            "searchable": true
        }
    ],

Beachten Sie, dass ich hier Funktionen zum Ausblenden hatte

    "columnDefs": [
            {
                "targets": [ 4 ],
                "visible": false,
                "searchable": true
            }
        ],

Dann habe ich es zusammengeführt "aoColumnDefs"

Pratik
quelle
1
  1. Verwenden Sie den folgenden Code, um die Reihenfolge in der ersten Spalte zu deaktivieren:

    $('#example').dataTable( {
      "columnDefs": [
        { "orderable": false, "targets": 0 }
      ]
    } );
  2. Um die Standardbestellung zu deaktivieren, können Sie auch Folgendes verwenden:

    $('#example').dataTable( {
         "ordering": false, 
    } );
Pushkaraj Bhandari
quelle
1

Sie können die Methode .notsortable () für die Spalte direkt verwenden

 vm.dtOpt_product = DTOptionsBuilder.newOptions()
                .withOption('responsive', true)
        vm.dtOpt_product.withPaginationType('full_numbers');
        vm.dtOpt_product.withColumnFilter({
            aoColumns: [{
                    type: 'null'
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'text',
                    bRegex: true,
                    bSmart: true
                }, {
                    type: 'select',
                    bRegex: false,
                    bSmart: true,
                    values: vm.dtProductTypes
                }]

        });

        vm.dtColDefs_product = [
            DTColumnDefBuilder.newColumnDef(0), DTColumnDefBuilder.newColumnDef(1),
            DTColumnDefBuilder.newColumnDef(2), DTColumnDefBuilder.newColumnDef(3).withClass('none'),
            DTColumnDefBuilder.newColumnDef(4), DTColumnDefBuilder.newColumnDef(5).notSortable()
        ];
Urvi_204
quelle
1

Es gibt zwei Möglichkeiten: Eine wird in HTML definiert, wenn Sie Tabellenüberschriften definieren

<thead>
  <th data-orderable="false"></th>
</thead>

Eine andere Möglichkeit ist die Verwendung von Javascript. Sie haben beispielsweise eine Tabelle

<table id="datatables">
    <thead>
        <tr>
            <th class="testid input">test id</th>
            <th class="testname input">test name</th>
    </thead>
</table>

dann,

$(document).ready(function() {
    $('#datatables').DataTable( {
        "columnDefs": [ {
            "targets": [ 0], // 0 indicates the first column you define in <thead>
            "searchable": false
        }
        , {
            // you can also use name to get the target column
            "targets": 'testid', // name is the class you define in <th>
            "searchable": false
        }
        ]
    }
    );
}
);
Null
quelle
0

Sie können auch einen negativen Index wie folgt verwenden:

$('.datatable').dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "aoColumnDefs": [
        { 'bSortable': false, 'aTargets': [ -1 ] }
    ]
});
Nurul Ferdous
quelle
0

Der Code sieht folgendermaßen aus:

$(".data-cash").each(function (index) {
  $(this).dataTable({
    "sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
    "sPaginationType": "bootstrap",
    "oLanguage": {
      "sLengthMenu": "_MENU_ records per page",
      "oPaginate": {
        "sPrevious": "Prev",
        "sNext": "Next"
      }
    },
    "bSort": false,
    "aaSorting": []
  });
});
Python
quelle
0

Hier ist die Antwort!

targets ist die Spaltennummer, sie beginnt bei 0

$('#example').dataTable( {
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
BumbuKhan
quelle
-2

setze die Klasse "no-sort" in die Tabelle und füge dann css .no-sort {Zeigerereignisse: keine! wichtig hinzu; Cursor: Standard! wichtig; Hintergrundbild: keine! wichtig; } Dadurch wird die Pfeilaktualisierung ausgeblendet und das Ereignis im Kopf deaktiviert.

Rahul
quelle