Tablas de datos Seleccionar todas las casillas de verificación

Sé libre de divulgar nuestro sitio y códigos en tus redes sociales, necesitamos de tu ayuda para ampliar nuestra comunidad.

Solución:

Esto debería funcionar para usted:

let example = $('#example').DataTable(
    columnDefs: [
        orderable: false,
        className: 'select-checkbox',
        targets: 0
    ],
    select: 
        style: 'os',
        selector: 'td:first-child'
    ,
    order: [
        [1, 'asc']
    ]
);
example.on("click", "th.select-checkbox", function() 
    if ($("th.select-checkbox").hasClass("selected")) 
        example.rows().deselect();
        $("th.select-checkbox").removeClass("selected");
     else 
        example.rows().select();
        $("th.select-checkbox").addClass("selected");
    
).on("select deselect", function() 
    ("Some selection or deselection going on")
    if (example.rows(
            selected: true
        ).count() !== example.rows().count()) 
        $("th.select-checkbox").removeClass("selected");
     else 
        $("th.select-checkbox").addClass("selected");
    
);

Sin embargo, he agregado al CSS:

table.dataTable tr th.select-checkbox.selected::after 
    content: "✔";
    margin-top: -11px;
    margin-left: -4px;
    text-align: center;
    text-shadow: rgb(176, 190, 217) 1px 1px, rgb(176, 190, 217) -1px -1px, rgb(176, 190, 217) 1px -1px, rgb(176, 190, 217) -1px 1px;

Trabajando JSFiddle, espero que ayude.

Puede usar la extensión Checkboxes para jQuery Datatables.

var table = $('#example').DataTable(
   'ajax': 'https://api.myjson.com/bins/1us28',
   'columnDefs': [
      
         'targets': 0,
         'checkboxes': 
            'selectRow': true
         
      
   ],
   'select': 
      'style': 'multi'
   ,
   'order': [[1, 'asc']]
);

Vea este ejemplo para código y demostración.

Consulte la página del proyecto Casillas de verificación para obtener más ejemplos y documentación.

Puedes usar esta opción proporcionada por dataTable sí mismo utilizando botones.

dom: 'Bfrtip',
 buttons: [
      'selectAll',
      'selectNone'
 ]'

Aquí hay un código de muestra

var tableFaculty = $('#tableFaculty').DataTable(
    "columns": [
        
            data: function (row, type, set) 
                return '';
            
        ,
        data: "NAME"
    ],
    "columnDefs": [
        
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        
    ],
    select: 
        style: 'multi',
        selector: 'td:first-child'
    ,
    dom: 'Bfrtip',
    buttons: [
        'selectAll',
        'selectNone'
    ],
    "order": [[0, 'desc']]
);

Comentarios y valoraciones del tutorial

Si te gustó nuestro trabajo, tienes el poder dejar una crónica acerca de qué le añadirías a este ensayo.

---

---

Utiliza Nuestro Buscador