Skip to content

Instantly share code, notes, and snippets.

@nayosx

nayosx/delete_row_datatable.js

Last active August 29, 2015 14:23
Show Gist options
  • Save nayosx/420d03c2b950a038f152 to your computer and use it in GitHub Desktop.
Save nayosx/420d03c2b950a038f152 to your computer and use it in GitHub Desktop.
Download ZIP
Eliminar elemento de dataTable
Raw
delete_row_datatable.js
var oTable = null;
$(document).ready(function(){
oTable = $("#tabla1").DataTable({
columnDefs: [{
width: "5%",
targets: [0],
sClass: "text-center"
}, {
width: "50%",
targets: [1],
visible: !0,
searchable: !1
}, {
targets: [2],
visible: !0,
searchable: !1,
orderable: !0,
sClass: "text-center"
},
{
targets: [3],
visible: !0,
searchable: !1,
orderable: !1,
sClass: "text-center"
}],
});
$('#tabla1 tbody').on( 'click', '.deleterow', function () {
var row = $(this).closest("tr").get(0);
if ($(row).hasClass('selected') ) {
$(row).removeClass('selected');
}
else {
oTable.$('tr.selected').removeClass('selected');
$(row).addClass('selected');
}
$("#modal-delete-user").modal();
});
$("#btn-delete-client").click(function(){
oTable.row('.selected').remove().draw( false );
$("#modal-delete-user").modal('hide');
});
});
Raw
modal_to_delete.html
<div id="modal-delete-user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header background-red">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><h4><i class="fa fa-times-circle white"></i></h4></button>
<h4>Dar de baja al cliente</h4>
</div>
<div class="modal-body">
<p>¿Está seguro que desea desactivar el cliente <strong><span id="span-delete-portal"></span></strong>?</p>
<form id="darBajadeCliente" name="darBajaCliente" method="POST" action="">
<fieldset>
<label for="dir_empresa" class="control-label">Razon por la que se desactivara a el cliente</label>
<textarea name = "dar_baja_commit" id= "dar_baja_commit" class="form-control" rows="3" required=""></textarea>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancelar</button>
<button id="btn-delete-client" class="btn btn-danger"><i class="fa fa-trash-o"></i> Desactivar cliente</button>
</div>
</div>
</div>
</div>
Raw
table_to_use.html
<div class="table-responsive" id="poblate_table">
<table id="tabla1" class="table table-striped table-bordered table-hover" >
<thead>
<tr>
<th>Nº</th>
<th>Nombre de clientes</th>
<th>Tipo de cliente</th>
<th>Acciones</th>
</tr>
</thead>
<tbody>
<tr >
<td>1</td>
<td>
<input type="hidden" value="13" />
<h4>Advance Tecnology</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="Advance Tecnology" data-id ="MTMsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>2</td>
<td>
<input type="hidden" value="7" />
<h4>Angeles de Dios</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="Angeles de Dios" data-id ="NywyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>3</td>
<td>
<input type="hidden" value="18" />
<h4>ATB</h4>
</td>
<td>
Open </td>
<td>
<a data-name="ATB" data-id ="MTgsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>4</td>
<td>
<input type="hidden" value="12" />
<h4>Bar la iglesia</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="Bar la iglesia" data-id ="MTIsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>5</td>
<td>
<input type="hidden" value="1" />
<h4>beastcode</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="beastcode" data-id ="MSwyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>6</td>
<td>
<input type="hidden" value="4" />
<h4>CoffieMake</h4>
</td>
<td>
Open </td>
<td>
<a data-name="CoffieMake" data-id ="NCwyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>7</td>
<td>
<input type="hidden" value="9" />
<h4>Converge Solution</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="Converge Solution" data-id ="OSwyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>8</td>
<td>
<input type="hidden" value="10" />
<h4>Dispose Online</h4>
</td>
<td>
Primiun </td>
<td>
<a data-name="Dispose Online" data-id ="MTAsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>9</td>
<td>
<input type="hidden" value="17" />
<h4>Gun N Roses</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="Gun N Roses" data-id ="MTcsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>10</td>
<td>
<input type="hidden" value="16" />
<h4>Luisiana</h4>
</td>
<td>
Open </td>
<td>
<a data-name="Luisiana" data-id ="MTYsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>11</td>
<td>
<input type="hidden" value="5" />
<h4>Luxos</h4>
</td>
<td>
Primiun </td>
<td>
<a data-name="Luxos" data-id ="NSwyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>12</td>
<td>
<input type="hidden" value="6" />
<h4>Motos San</h4>
</td>
<td>
Open </td>
<td>
<a data-name="Motos San" data-id ="NiwyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>13</td>
<td>
<input type="hidden" value="14" />
<h4>Navios del sur</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="Navios del sur" data-id ="MTQsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>14</td>
<td>
<input type="hidden" value="11" />
<h4>NovaCorp</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="NovaCorp" data-id ="MTEsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>15</td>
<td>
<input type="hidden" value="15" />
<h4>RebeTux</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="RebeTux" data-id ="MTUsMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>16</td>
<td>
<input type="hidden" value="19" />
<h4>Serpento</h4>
</td>
<td>
Open </td>
<td>
<a data-name="Serpento" data-id ="MTksMjg-" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>17</td>
<td>
<input type="hidden" value="3" />
<h4>The beastcode</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="The beastcode" data-id ="MywyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
<tr >
<td>18</td>
<td>
<input type="hidden" value="2" />
<h4>Variedades Matt</h4>
</td>
<td>
Advance </td>
<td>
<a data-name="Variedades Matt" data-id ="MiwyOA--" title = "Desactivar el cliente" class="btn btn-danger btn-delete deleterow" href="javascript:void(0)"><span class="glyphicon glyphicon-remove-sign"></span></a>
</td>
</tr>
</tbody>
</table>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment