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

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.

Das suchen Sie:

$('#example').dataTable( {
      "aoColumnDefs": [
          { 'bSortable': false, 'aTargets': [ 1 ] }
       ]
});

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/ .

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

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 .

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
    });
});

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
    }]
});

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.

$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 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

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
    }]
});

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 }
  ]
} );

"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(,)

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>

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

Dies funktioniert bei mir für eine einzelne Spalte

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

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"

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, 
   } );

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()
        ];

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
        }
        ]
    }
    );
}
);

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 ] }
    ]
});

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": []
  });
});

Hier ist die Antwort!

targets ist die Spaltennummer, sie beginnt bei 0

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

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.