Deshabilite la ordenación para una columna en particular en jQuery DataTables

Estoy usando el complemento jQuery DataTables para ordenar los campos de la tabla. Mi pregunta es: ¿cómo deshabilito la ordenación para una columna en particular? He intentado con el siguiente código, pero no funcionó:

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

También probé el siguiente código:

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

pero esto todavía no produjo los resultados deseados.

Esto es lo que estás buscando:

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

A partir de DataTables 1.10.5, ahora es posible definir opciones de inicialización utilizando los atributos HTML5 data *.

-desde el ejemplo de DataTables - atributos de datos HTML5- * - opciones de tabla

Por lo tanto, puede usar data-orderable="false"en la thcolumna que no desea que se pueda ordenar. Por ejemplo, la segunda columna "Avatar" en la tabla a continuación no se podrá ordenar:

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

Vea un ejemplo de trabajo en https://jsfiddle.net/jhfrench/6yxvxt7L/ .

Para deshabilitar la ordenación de la primera columna, intente con el siguiente código en datatables jquery. El nulo representa la habilitación de clasificación aquí.

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

Deshabilitar la ordenación en una columna en jQuery Datatables

Usando Datatables 1.9.4 he deshabilitado la ordenación de la primera columna con este código:

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

EDITAR:

Puede deshabilitar incluso utilizando la no-sortclase en su <th>,

y usa este código de inicialización:

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

EDITAR 2

En este ejemplo, estoy usando Datables con Bootstrap, siguiendo una publicación de blog anterior. Ahora hay un enlace con material actualizado sobre el diseño de tablas de datos con bootstrap .

Lo que uso es simplemente agregar un atributo personalizado en el td y controlar la clasificación al verificar ese valor de atributo automáticamente.

Entonces el código HTML será

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

Y JavaScript para inicializar tablas de datos será (obtendrá dinámicamente la información de clasificación de la tabla misma;)

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

columnDefsAhora acepta una clase. Yo diría que este es el método preferido si desea especificar columnas para deshabilitar en su marcado:

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

Entonces, en tu JS:

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

Esto es lo que puede usar para deshabilitar cierta columna para deshabilitarla:

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

Entonces, todo lo que tiene que hacer es agregar el "ordenable": falso a la columna que no desea ordenar.

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

Para deshabilitar la clasificación de una sola columna, pruebe este ejemplo:

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

Para varias columnas, pruebe este ejemplo: solo necesita agregar el número de columna. Por defecto comienza desde 0

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

Aquí solo Column 3funciona

A partir de 1.10.5 , simplemente incluya

'ordenable: falso'

en columnDefs y apunte su columna con

'objetivos: [0,1]'

La tabla debería gustar:

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

Si establece la orderablepropiedad FIRST column en false, también debe establecer la ordercolumna predeterminada , de lo contrario no funcionará, ya que la primera columna es la columna de pedido predeterminada. El siguiente ejemplo deshabilita la clasificación en la primera columna pero establece la segunda columna como la columna de orden predeterminada (recuerde que los índices de dataTables están basados ​​en cero).

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

"aoColumnDefs" : [   
{
  'bSortable' : false,  
  'aTargets' : [ 0 ]
}]

Aquí 0está el índice de la columna, si desea que no se ordenen varias columnas, mencione los valores de índice de la columna separados porcomma(,)

Para actualizar la respuesta de Bhavish (que creo que es para una versión anterior de DataTables y no funcionó para mí). Creo que cambiaron el nombre del atributo. Prueba esto:

<thead>
    <tr>
        <td data-sortable="false">Requirements</td>
        <td data-sortable="false">Automated</td>
        <td>Created On</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>

Usando clase:

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

Ahora puede dar la clase "nosort" a <TH>

Esto me funciona para una sola columna

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

Si ya tiene que ocultar algunas columnas, como Ocultar columna de apellido. Solo tenía que concatenar fname, lname, así que hice una consulta pero oculté esa columna del front-end. Las modificaciones en Deshabilitar la ordenación en tal situación son:

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

Tenga en cuenta que tenía la funcionalidad de Ocultar aquí

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

Luego lo fusioné en "aoColumnDefs"

1. Use el siguiente código para deshabilitar el pedido en la primera columna:

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

2. Para deshabilitar el pedido predeterminado, también puede usar:

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

Puede usar directamente el método .notsortable () en la columna

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

Hay dos formas, una se define en html cuando define encabezados de tabla

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

Otra forma es usar JavaScript, por ejemplo, tiene una tabla

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

luego,

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

También puedes usar un índice negativo como este:

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

El código se verá así:

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

Aquí está la respuesta!

targets es el número de columna, comienza desde 0

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

establezca la clase "no-sort" en la tabla y luego agregue css .no-sort {pointer-events: none! important; cursor: predeterminado! importante; imagen de fondo: ninguna! importante; } con esto ocultará la flecha hacia arriba y el evento de deshabilitación en la cabeza.