We Keep Coding

problem with vue draggable width in table?

I'm using vuedraggable inside a Bulma table, but it creates a styling problem:
It's not a problem of the Bulma table. I used this in my own table, and the same issue occurs.
Here is my code:
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<draggable v-model="furds" :options="{group:'furds'}" #start="drag=true" #end="drag=false" #change="onChnage">
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</tbody>
</table>

Instead of wrapping tr with draggable,pass tbody as draggable element.
<draggable element="tbody" v-model="furds">
See the link for better understanding:
https://jsfiddle.net/dede89/L54yu3L9/ (Example with table) (found in vue draggable official doc)
[[Update: full code(based on question)]]
<table class="table is-fullwidth is-bordered">
<thead>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>brand</th>
<th>Date Created</th>
<th colspan="2">Actions</th>
</tr>
</tfoot>
<draggable element="tbody" v-model="furds"> <!-- change here -->
<tr>
<td colspan="5" v-if="featureds.length == 0">0 Models Found</td>
</tr>
<tr class="dragndrop" v-for="featured in furds">
<td class="drag-icon"><i class="fa fa-arrows"></i></td>
<td>{{ featured.name }}</td>
<td>{{ featured.brand.name }}</td>
<td>{{ featured.created_at | moment("MMMM Do, YYYY") }}</td>
<td><a :href="`/manage/featured/${featured.id}`">View</a></td>
<td><a :href="`/manage/featured/${featured.id}/edit`">Edit</a></td>
</tr>
</draggable>
</table>
<script>
import draggable from "vuedraggable";
export default {
components: {
draggable
},
...
}
</script>

The styling issue occurs because vuedraggable uses a <div> as its root element by default, and that <div> (along with its contents) is stuffed into the first column of the table.
Solution: vuedraggable allows changing its root element with the tag property, so you could set it to tbody, replacing the existing <tbody> in the <table>:
<table>
<!-- FROM THIS: -->
<!--
<tbody> 👈
<draggable> 👈
<tr v-for="featured in furds">
...
</tr>
</draggable>
</tbody>
-->
<!-- TO THIS: -->
<draggable tag="tbody">
<tr v-for="featured in furds">
...
</tr>
</draggable>
<table>

Fetch the row from html table on button click

So, I have a table with update button, and I want to be able to fetch a column from the row button was clicked on.
Below is the html code for table
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData()">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
So, when I click update, i want to fetch "J001" (first column of the update button row).
I tried below, but it's not fetching.
function updateData(){
var $item = $(this).closest("tr")
.find(".nr")
.text();
alert($item);
}
Any help or suggestion will be appreciated.

You have to pass this in your update function call,
Your Html should be,
<table class="table table-hover" style="width: 99%">
<thead class="thead-dark" align="center">
<tr>
<th>ID</th>
<th>Trainee Class</th>
<th>Start Date</th>
<th>Edit</th>
<th>Trainees</th>
</tr>
</thead>
<tbody align="center">
<tr>
<td class="nr">J001</td>
<td>Java Stream</td>
<td>01-April-2018</td>
<td><button onclick="updateData(this)">Update</button>
<button>Remove</button></td>
<td><button>View</button></td>
</tr>
<table>
Jquery function should be,
function updateData(e){
var $item = $(e).closest("tr")
.find("td:first")
.text();
alert($item);
}

How to refresh DataTables sort and filter info

For simplicity of the example I have a DataTable which I load from HTML.
This DataTable is having parts of its content updated through jQuery BUT the updated content while visible in the table, does not reflect when sorting or filtering.
See html code below
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
and javascript
$(document).ready(function() {
var dt = $('#example').DataTable({});
$("#entry2_votes").text(60);
});
So if you try sorting Votes column or try filtering by the new value 60 set through jQuery it wont work
See this working example https://jsfiddle.net/bpali/d97bpqvs/3/
Obviously, my question is how to make it work as in my real life situation I have to update parts of the DataTable constantly through different Ajax requests of different page sections and I cannot just put an ajax source on the table and reload the table.

This is the correct way:
$(document).ready(function() {
var dt = $('#example').DataTable({});
dt.cell( $("#entry2_votes") ).data(60) ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Votes</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<tr>
<th>John</th>
<th>Doe</th>
<th id="entry1_votes">50</th>
<th>London</th>
</tr>
<tr>
<th>Hill</th>
<th>Vaught</th>
<th id="entry2_votes">120</th>
<th>Berlin</th>
</tr>
<tr>
<th>Charles</th>
<th>Roy</th>
<th id="entry3_votes">78</th>
<th>Liege</th>
</tr>
</tbody>
</table>
Fiddle: https://jsfiddle.net/HappyiPhone/d97bpqvs/7/

Check online demo
You have to reinitialize data table after updating with jquery or you can update by datatable in-built methods/api
$('#example').DataTable().destroy();
$('#example').DataTable().draw();

Get all <tr> ID in table?

I want to get all tr id and register it to jQuery array,
this is my table code:
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1"><td></td>
<tr id="2"><td></td>
</tbody>
</table>
</div>
How to get that all id and assign them to jQuery array?
I want to use it for check what value is exist in table row?
So what I want is get all tr id and assign them to jQuery array.

Iterate over tr in tbody and push it to an array
var arr = [];
$("#tbodytmpitem tr").each(function() {
arr.push(this.id);
});
console.log(arr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>

Use .map() to iterate over all the tr and return their IDs. Then use $.makeArray() to convert the result into an array.
var array = $.makeArray($('tbody tr[id]').map(function() {
return this.id;
}));
console.log(array);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive" style="margin-top: 10px">
<table class="table table-striped table-bordered" id="tabletmpitem">
<thead>
<tr>
<th>EAN</th>
<th>Item Name</th>
<th>Old Price</th>
<th>New Price</th>
</tr>
</thead>
<tbody id="tbodytmpitem">
<tr id="1">
<td></td>
<tr id="2">
<td></td>
</tbody>
</table>
</div>

AngularJS Somehow sorting two tables with one click

I have two tables on an angular page, both with clickable headers for sorting. Somehow, clicking headers in either table sorts BOTH tables, even though they have different column names, and different 'orderByField' variables.
First Table:
<table class="table table-striped table-bordered table-hover" style="width: 100%;">
<thead>
<tr>
<th class="clickable colored_text span7 textLeft" ng-click="flagOrderByField='FlagName'; reverseSort = !reverseSort">Flag Name</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='DateAdded'; reverseSort = !reverseSort">Date Added</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='Expires'; reverseSort = !reverseSort">Expires</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="flag in FlagList | orderBy:flagOrderByField:reverseSort" style="border-top: 1px dashed rgb(200, 200, 200);">
<td ng-class="flag.SystemFlag ? 'text-error' : 'text-success'">{{::flag.FlagName}}</td>
<td>{{::flag.DateAdded | date:'MM/dd/yyyy' }}</td>
<td>{{::flag.Expires | date:'MM/dd/yyyy' }}</td>
</tr>
</tbody>
</table>
Second Table:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="clickable colored_text" ng-click="orderByField='CourseNumber'; reverseSort = !reverseSort">Course #</th>
<th class="clickable colored_text" ng-click="orderByField='ClassName'; reverseSort = !reverseSort">Course Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="class in classes | orderBy:orderByField:reverseSort | startAt:(currentPage-1)*pageSize | limitTo:pageSize">
<td>{{::class.CourseNumber }}</td>
<td>{{::class.ClassName }}</td>
</tr>
</tbody>
</table>
How can I get these two tables to sort separately? (This page also has a bunch of other tables, in tabs that load on tab-click, that all share this same strange behavior.)

Aha - In a bit of quick intuiting, I noted that both tables used the same 'reverseSort' variable. I changed it for the first table to 'flagReverseSort', and set the default in the controllers.js to false; voila! it works as it should. So not only do the tables need their own orderBy variable, but they need their own, unique, reverseSort variable.