HTML table DnD event not triggered on border - javascript

I have this table on my html page:
<div class="col-sm-6 col-md-6 col-lg-6">
<label class="control-label" for="myTable">My Table</label>
<div id="myTable" class="table-border" ondragover="event.preventDefault()">
<table class="table table-hover table-condensed">
<thead>
<tr>
<th class="text-muted">File Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
When I try to drag and drop draggable elements into this table, drop event is only triggered when I drop over table headers (File Name in this case), or the child rows if table is not empty:
$('#myTable').on('drop', function (e) {
e.preventDefault();
alert('dropped');
});
Any idea how can I make the entire border area droppable?
Thanks!

Related

Load the data to table and remove the old rows

i'm using a bootstrap table and need to load new data each time I click on a button, I don't want to keep old data.
I could load data using this below code but old data still there, I tried "load" instead of append like this $('#matable tbody').load(rows); it doesn't work
var rows = $("<tr><td style=\"display:none;\">1</td><td>E</td><td>E</td><td>E</td></tr>");
$("#Mybutton").click(function()
$('#matable tbody').append(rows);
});
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table id="matable" class="table table-striped table-bordered first">
<thead>
<tr>
<th style="display:none;">ID</th>
<th>Date</th>
<th>Flux name</th>
<th>Description</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="display:none;">ID</th>
<th>Date</th>
<th>Flux name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>

How to delete column in html from javascript

I have a table and I want to delete a column when Variables.Product.URUN_KOD == '310' I can delete this row first get to 310 but get the second time it deletes automatically first column's last element you can see in the picture. Thanks
$("#SigortaliCustomerDataTable tr").find('td:eq(5),th:eq(5)').remove()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group form-group-sm">
<div class="col-sm-12">
<hr />
<table class="table table-striped table-bordered" id="SigortaliCustomerDataTable">
<thead>
<tr>
<th>Müşteri No</th>
<th>Ad Soyad</th>
<th>TCKN/VKN</th>
<th>Yazışma Adresi</th>
<th>İletişim</th>
<th style='width:50px'>Pay</th>
<th style='width:50px'></th>
<th style='width:50px'></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
You can remove the remove by using this code. No need of any iteration:
$("#SigortaliCustomerDataTable tr").find("th:eq(5), td:eq(5)").remove();
Please check this fiddle I created for you: https://jsfiddle.net/2cqow1y5/

DataTable not refreshing in angular

<div class="row-fluid padTop5">
<div class="col-12">
<div class="row" *ngIf="showFiles">
<div class="col-12 colBorder">
<table datatable class="table table-striped centerAlign">
<thead>
<tr>
<th class="centerAlign">Select All<input type="checkbox" [(ngModel)]="fileSelectAll" name="fileSelectAll" class="d-block" (change)="selectAll($event,fileSelectAll)"></th>
<th>TestCase Name</th>
<!-- <th>Provision Name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let file of fileList;let i =index">
<td>
<input type="checkbox" [(ngModel)]="file.selected" [checked]="isSelected" (change)='checkClicked($event,file)' name="cb">
</td>
<td>{{file.name}}</td>
<!-- <td>PE</td> -->
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I am using angular datatables ..the table is forming when the user selects the file from local.works fine for the first time..but when the user again selects the file previous records are not gone..how to. Refresh the table

jQuery Datatables, editing selected row's td with text box

I have a jQuery datatable with only one column. When a row is selected, it opens a panel with a text box. This text box is automatically filled in with the name of the td that's selected. I'm attempting to accomplish changing that selected row's name with the text box. Ex: I select the second row (named test), and I go over to the textbox and I enter "Apples", test will now be Apples. How can I accomplish this editing feat? I've tried the inline editing feature, but would prefer this method if possible.
Table:
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
Panel with text box:
<div class="panel-body">
<form class="form-horizontal" action="/" method="POST">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<input type="text" id="groupname" class="form-control" value="Name"/>
</div>
</div>
</div>
</div>
Script that autofills selected row's td into textbox:
(function () {
var table = document.querySelector('#data-table');
var number = document.querySelector('#groupname');
table.addEventListener('click', onTableClick);
function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);
var data = [];
for (var td of tr.children) {
data.push(td.innerHTML)
}
number.value = data[0];
}
})();
Store the clicked td on click of row in global variable & add form submit event then assign the value of input that stored variable.
var row = null;
$("#data-table tr td").click(function() {
$("#groupname").val($(this).text());
row = $(this);
});
$("#updateBtn").click(function() {
if (row != null) {
row.text($("#groupname").val());
}
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>All</td>
</tr>
<tr class="odd gradeX">
<td>Test</td>
</tr>
<tr class="odd gradeX">
<td>Test3</td>
</tr>
</tbody>
</table>
<div class="panel-body">
<legend>Settings</legend>
<div class="form-group">
<label class="col-md-4 control-label">Name:</label>
<div class="col-md-8">
<div class="input-group">
<input type="text" id="groupname" class="form-control" value="" />
<span class="input-group-btn">
<button id="updateBtn" class="btn btn-default" type="button">
Update
</button>
</span>
</div>
</div>
</div>
</div>

DataTable columns don't line up with Scroll Bars

I recently switched my DataTables plugin to use scroll bars instead of pagination. I realized that once I switched it, two strange issues happened. A second row appeared below the column headers with just the sorting arrows and the column headers no longer lined up with the columns. On the first tab its just a little bit off but on subsequent tabs it is really off.
The only way to fix it is by sorting one of the columns after its loaded, where this fixes the issue with the alignment.
I am looking for some assistance in finding where the issue is in my code that is causing this to happen.
Javascript:
<script>
$(document).ready(function()
{
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );
$('table.table').DataTable({
responsive: true,
"order": [[ 7, "desc" ]],
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"bInfo" : false
});
$('#dt-players-all2').DataTable().search( '' ).draw();
});
</script>
HTML:
#extends('layouts.default')
#section('content')
<div id="page-wrapper">
<div class="row">
<div class="col-lg-12"> </div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<!-- Panel Header -->
<div class="panel-heading">
Players Overview
</div>
<!-- /Panel Header -->
<!-- Panel Body -->
<div class="panel-body">
<div class="dataTable_wrapper">
<ul class="nav nav-tabs" role="tablist">
<li class="active">All</li>
<li>QB</li>
<li>RB</li>
<li>WR</li>
<li>TE</li>
<li>FLEX</li>
<li>DST</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab-all">
<table class="table table-striped table-bordered table-hover" id="dt-players-all">
<thead>
<tr>
<th>Position</th>
<th>Player</th>
<th>Team</th>
<th>Opponent</th>
<th>Game</th>
<th>Opp. Rank</th>
<th>FPPG</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
#foreach ($players as $player)
<tr class="odd gradeX">
<td>{{$player->position}}</td>
<td>{{$player->name}}</td>
<td>{{$player->team}}</td>
<td>{{$player->opponent}}</td>
<td>{{$player->status}}</td>
<td class="center">0</td>
<td class="center">{{$player->fppg}}</td>
<td class="center">${{$player->salary}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="tab-pane" id="tab-qb">
<table class="table table-striped table-bordered table-hover" id="dt-players-all2">
<thead>
<tr>
<th>Position</th>
<th>Player</th>
<th>Team</th>
<th>Opponent</th>
<th>Game</th>
<th>Opp. Rank</th>
<th>FPPG</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
#foreach ($players as $player)
<tr class="odd gradeX">
<td>{{$player->position}}</td>
<td>{{$player->name}}</td>
<td>{{$player->team}}</td>
<td>{{$player->opponent}}</td>
<td>{{$player->status}}</td>
<td class="center">0</td>
<td class="center">{{$player->fppg}}</td>
<td class="center">${{$player->salary}}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
<!-- /Panel Body -->
</div>
</div>
<!-- /.panel -->
</div>
</div>
</div>
#stop
SOLUTION
Your code works fine, just make sure you're using the latest DataTables version.
Also if you're using Responsive extension you need to use responsive.recalc() API method to recalculate the widths used by Scroller extension after a change in the display.
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
$.each($.fn.dataTable.tables(true), function(){
$(this).DataTable()
.columns.adjust()
.responsive.recalc();
});
});
DEMO
See this jsFiddle for code and demonstration.
LINKS
See jQuery DataTables – Column width issues with Bootstrap tabs for solution to the most common problems with jQuery DataTables and Bootstrap Tabs.

Categories