Scribd Logo
Upload

Welcome to Scribd!

  • 29 views

    Data Tables

    Uploaded by

    Hugo N. Rosario Bautista
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Data Tables

    Uploaded by

    Hugo N. Rosario Bautista
    29 views4 pages
    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.

    Original Description:

    Original Title

    DataTables

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    29 views4 pages

    Data Tables

    Uploaded by

    Hugo N. Rosario Bautista
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    of 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