web-dev-qa-db-de.com

deaktivieren Sie die Spaltensortierung mithilfe von Jquery-Datentabellen

Ich verwende das jQuery datatables plugin , um die Tabellenfelder zu sortieren. Meine Frage ist, wie kann ich die Sortierung für eine bestimmte Spalte deaktivieren? Ich habe den folgenden Code ausprobiert, aber es hat nicht funktioniert:

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

Ich habe auch folgenden Code ausprobiert:

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

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

147
usman

Das ist was Sie suchen: 

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

Ab DataTables 1.10.5 kann jetzt die Initialisierung definiert werden Optionen, die HTML5-Daten- * -Attribute verwenden.

- dataTables-Dokumentation: HTML5-Daten- * Attribute - Tabellenoptionen

Sie können also data-orderable="false" für die th der Spalte verwenden, die nicht sortierbar sein soll. Zum Beispiel 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>

Siehe ein Funktionsbeispiel unter https://jsfiddle.net/jhfrench/6yxvxt7L/ .

80
Jeromy French

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

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

Sortierung für eine Spalte in jQuery-Datatables deaktivieren

63
Paulraj

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

EDIT:

Sie können sogar deaktivieren, indem Sie die no-sort-Klasse in Ihrem <th> verwenden. 

und verwenden Sie diesen Initialisierungscode:

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

EDIT 2

In diesem Beispiel verwende ich Datables mit Bootstrap und folge einem alten Blogbeitrag. Jetzt gibt es einen Link mit aktualisiertem Material zum Styling von Datatables mit bootstrap .

60
Paulo Fidalgo

Ich verwende einfach ein benutzerdefiniertes Attribut in der Tabelle td und steuere die Sortierung, indem der attr-Wert automatisch überprüft wird.

Der HTML-Code wird also 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>

JavaScript zum Initialisieren von Datentabellen lautet .__ (es werden die Sortierinformationen dynamisch aus der Tabelle selbst abgerufen;).

$('.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
    });
});
27
Bhavesh B

columnDefs akzeptiert 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 Ihrer JS:

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

So können Sie die Deaktivierung bestimmter Spalten deaktivieren:

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

Sie müssen also nur "orderable": false zur Spalte hinzufügen, die nicht sortierbar sein soll.

10
Constantin Stan
$("#example").dataTable(
  {
    "aoColumnDefs": [{
      "bSortable": false, 
      "aTargets": [0, 1, 2, 3, 4, 5]
    }]
  }
);
6
abhinav

Ab 1.10.5 einfach einschließen

'bestellbar: falsch'

in columnDefs und zielen Sie Ihre Spalte mit 

"Ziele: [0,1]"

Tisch sollte mögen: 

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

Wenn Sie die FIRST-Spalte orderable-Eigenschaft auf "false" setzen, setzen Sie must auch die Standard-order-Spalte. Andernfalls funktioniert die Spalte nicht. Das folgende Beispiel deaktiviert die Sortierung für die erste Spalte, legt jedoch die zweite Spalte als Standardreihenfolge fest (Denken Sie daran, dass die Indizes der dataTables auf Null basieren).

$('#example').dataTable( {
  "order": [[1, 'asc']],
  "columnDefs": [
    { "orderable": false, "targets": 0 }
  ]
} );
4
Moses Machua

Zum Deaktivieren der Einzelspaltensortierung versuchen Sie folgendes Beispiel:

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

Für mehrere Spalten versuchen Sie dieses Beispiel: Sie müssen nur die Spaltennummer hinzufügen. Standardmäßig beginnt es mit 0

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

Hier funktioniert nur Column 3

4

Um Bhavishs Antwort zu aktualisieren (was meiner Meinung nach für eine ältere Version von DataTables gilt und für mich nicht funktionierte) 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>
3
Josh Mouch
"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

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

3
coder

Dies funktioniert für mich für eine einzelne Kolumne

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

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>[email protected]</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 die Klasse "nosort" an <TH> vergeben

2
Ghanshyam Gohel

Sie können die .notsortable () -Methode direkt für die Spalte 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()
        ];
1
Urvi_204

Es gibt zwei Möglichkeiten, eine ist in html definiert, wenn Sie Tabellenköpfe definieren

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

Eine andere Möglichkeit ist die Verwendung von Javascript, zum Beispiel haben Sie 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
        }
        ]
    }
    );
}
);
1
Zero
  1. Verwenden Sie den folgenden Code, um die Reihenfolge für die erste Spalte zu deaktivieren:

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

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

Wenn Sie bereits einige Spalten ausblenden müssen, z. B. die Spalte "Nachname". Ich musste nur fname, lname verketten. Also habe ich eine Abfrage gemacht, aber diese Spalte vor dem Frontend ausgeblendet. Die Änderungen in Disable sorting in einer solchen Situation sind: 

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

Beachten Sie, dass ich hier die Funktion zum Ausblenden hatte

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

Dann habe ich es in "aoColumnDefs" zusammengeführt.

1
Pratik C Joshi

sie können den negativen Index auch so 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 ] }
    ]
});
0
Nurul Ferdous

Hier ist die Antwort!

targets ist die Spaltennummer, sie beginnt bei 0

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

Der Code sieht so 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": []
  });
});
0
Python