DataTables

DataTables Examples

by daraii

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<div class="">

<table id="sampleTable" class="table table-striped table-bordered display" cellspacing="0">
    <thead>
    <tr class="heading-row text-center">
        <th colspan="3">
            <a href="#" id="submitBtnUpdate2" data-toggle="modal" data-target="#submitModal" data-container="body" title="Actualizar datos" class="add-update text-info submitBtnUpdate2">
                <i class="fa fa-sync"></i>
            </a>
        </th>

        <th colspan="14" class="center historicPeriodClass">
            <div class="part1">Periodo Histórico</div>

            <div class="part2"></div>
        </th>
        <th colspan="2">Oferta en JDE</th>
        <th colspan="3">Oferta a Otorgar</th>
        <th colspan="2">Reembolso</th>
        <th colspan="4">
            <span href="#" data-toggle="tooltip" data-container="body" title="Volumen:  Resultados vendiendo las mismas cajas que el periodo seleccionado">
                Basado en Histórico de Ventas
            </span>
            <span>
                <a class=" add-volume fas text-info fa-edit checkDates" data-toggle="tooltip" data-container="body" title="Transferir a Decisión">
                </a>
            </span>
        </th>
        <th colspan="4">
            <span href="#" data-toggle="tooltip" data-container="body" title="Margen: Cajas que debemos vender para mantener el mismo margen de las promociones pasadas">
                Manteniendo Margen Actual
            </span>
            <span>
                <a class="add-margin fas text-info fa-edit checkDates" data-toggle="tooltip" data-container="body" title="Transferir a Decisión">
                </a>
            </span>
        </th>
        <th colspan="5">
           ...

JavaScript

table//does not work
//var table = $('#table').dataTable();

//works
var table = $('#sampleTable').DataTable();

$('#table tbody').on('click',"input[type='button']",function() {
    console.log(table.row($(this).parents('tr')));
                
    table
        .row( $(this).parents('tr'))
        .remove()
        .draw();
});