javascript - sweet - desactivar una clasificación de columna usando tablas de datos jquery

sweet alert javascript

Question

Estoy usando el plugin jQuery datatables para ordenar los campos de la tabla. Mi pregunta es ¿cómo desactivo la clasificación para una columna en particular? Lo intenté 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 aún no produjo los resultados deseados.

Answer 1

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

- documentación de dataTables: atributos de datos HTML5 * - opciones de tabla

Entonces puede usar data-orderable="false" en el th de la columna que no desea ser ordenable. Por ejemplo, la segunda columna "Avatar" en la tabla a continuación no será ordenable:

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

Answer 2

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

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

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

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

Answer 3

¡Aquí está la respuesta!

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

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

Answer 4

A partir de 1.10.5 , simplemente incluye

''ordenable: falso''

en columnDefs y apunte a su columna con

''objetivos: [0,1]''

La tabla debería gustarle:

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

Answer 5

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

Answer 6

Esto es lo que estás buscando:

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

Answer 7

Esto es lo que puede usar para deshabilitar cierta columna para ser deshabilitada:

 $(''#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 que se pueda ordenar.

Answer 8

Esto funciona para mí para una sola columna

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

Answer 9

Lo que uso es simplemente agregar un atributo personalizado en thead td y controlar la ordenación verificando ese valor attr 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 datatables será (obtendrá dinámicamente la información de clasificación de la tabla;)

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

Answer 10

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>

Answer 11

Para deshabilitar la clasificación de columna individual prueba este ejemplo:

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

Para columnas múltiples pruebe este ejemplo: solo necesita agregar el número de columna. Por defecto está comenzando desde 0

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

Aquí solo funciona la Column 3

Answer 12

Para deshabilitar la ordenación de una primera columna, intente con el código siguiente 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

Answer 13

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

Answer 14

Si configura la propiedad de primera columna que se puede ordenar como falsa, también debe configurar la columna de order predeterminada order contrario no funcionará, ya que la primera columna es la columna de ordenamiento predeterminada. El siguiente ejemplo deshabilita la ordenación en la primera columna, pero establece la segunda columna como columna de orden predeterminada (recuerde que los índices de tablas de datos están basados ​​en cero).

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

Answer 15

Si ya tiene que ocultar algunas columnas, como ocultar la columna del apellido. Solo tuve que concatenar fname, lname, así que realicé la consulta pero oculté esa columna del front end. Las modificaciones en Deshabilitar ordenamiento en tal situación son:

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

Tenga en cuenta que tenía la función Ocultar aquí

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

Luego lo "aoColumnDefs" en "aoColumnDefs"

Answer 16

Usando Datatables 1.9.4 he desactivado la clasificació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 clase no-sort en su <th> ,

y use este código de inicialización:

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

EDIT 2

En este ejemplo, estoy usando Datables con Bootstrap, siguiendo una vieja publicación de blog. Ahora hay un enlace con material actualizado sobre el estilo de Datatables con bootstrap .

Answer 17

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

Ahora puedes dar clase "nosort" a <TH>

Answer 18

establece la clase "no-sort" en la parte superior de la tabla y agrega css .no-sort {pointer-events: none! important; cursor: predeterminado! importante; imagen de fondo: ninguno! importante; } con esto ocultará la flecha hacia arriba y el evento de inestabilidad en la cabeza.

Answer 19

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

Answer 20

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

Answer 21

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

Aquí 0 es el índice de la columna, si desea que no se clasifiquen varias columnas, mencione los valores de índice de columna separados por comma(,)

Answer 22

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