Scribd
Upload
62 views4 pages

Data Tables

The document describes various methods for formatting and manipulating data tables using JavaScript and jQuery, including: 1. Adding different table styles like borders, compact view. 2. Adding and deleting rows directly or by column name. 3. Selecting multiple rows and getting row information. 4. Adding sub-details to rows with additional information. 5. Dynamically adding a numbering column and hiding/showing columns.

Uploaded by

Hugo N. Rosario Bautista
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
62 views4 pages

Data Tables

The document describes various methods for formatting and manipulating data tables using JavaScript and jQuery, including: 1. Adding different table styles like borders, compact view. 2. Adding and deleting rows directly or by column name. 3. Selecting multiple rows and getting row information. 4. Adding sub-details to rows with additional information. 5. Dynamically adding a numbering column and hiding/showing columns.

Uploaded by

Hugo N. Rosario Bautista
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

.- table class="cell-border" -> muestra la tabla con bordes.

.- table class="display" -> muestra tabla por defecto

.- table class="display compact" -> muestra vista compacta, ajusta todo.

.- table class="row-border" -> muestra bordes horizontales.

AGREGAR FILAS
.- directo
var t = $('#example').DataTable();
t.row.add([
'1-'+contador,
'2-'+contador,
'3-'+contador,
'4-'+contador,
'5-'+contador,
'6-'+contador
]).draw();

.- por nombre columna


table.row.add( {
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$3,120",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
} ).draw();

.- seleccionar varias filas


$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 
    $('#button').click( function () {//cuenta los seleccionados
        alert( table.rows('.selected').data().length +' row(s) selected' );
    } );
} );

.- Seleccionar una fila y eliminar


$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('#example tbody').on( 'click', 'tr', function () {
        if ( $(this).hasClass('selected') ) {
            $(this).removeClass('selected');
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
        }
    } );
 
    $('#button').click( function () {
        table.row('.selected').remove().draw( false );
    } );
} );
.- información adicional de fila (sub detalle)
/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
        '<tr>'+
            '<td>Full name:</td>'+
            '<td>'+d.name+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extension number:</td>'+
            '<td>'+d.extn+'</td>'+
        '</tr>'+
        '<tr>'+
            '<td>Extra info:</td>'+
            '<td>And any further details here (images etc)...</td>'+
        '</tr>'+
    '</table>';
}
 
$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "../ajax/data/objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );
.- agregar una columna como contador (de 1 ……… n)

$(document).ready(function() {
    var t = $('#example').DataTable( {
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
        } ],
        "order": [[ 1, 'asc' ]]
    } );
 
    t.on( 'order.dt search.dt', function () {
        t.column(0, {search:'applied',
order:'applied'}).nodes().each( function (cell, i) {
            cell.innerHTML = i+1;
        } );
    } ).draw();
} );

.- Ocultar columna de forma dinamica.


$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );
 
    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();
 
        // Get the column API object
        var column = table.column( $(this).attr('data-column') );
 
        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

You might also like