Add class to all <tr> by clicking checkbox - javascript

With this code, i get all the checkboxes checked:
$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
});
With this, i add a class to the element, where the checkbox is in.
$(function()
{
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
});
How can i add that class, in my first code, to all the elements, by clicking select all checkboxes?
Sorry, i dont mean that.
My generated table code looks like:
<table class="table table-hover table-bordered list">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>
In the first , theres the select all checkbox.

$(".checkAllCheckboxes").click(function()
{
$('input:checkbox').not(this).prop('checked', this.checked);
$('input:checkbox').each(function() {
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});;
});
$('.table_row_checkbox').on('change',function(){
if($(this).is(":checked"))
{
$(this).parents('tr').addClass("checkbox_checked_row");
}
else
{
$(this).parents('tr').removeClass("checkbox_checked_row");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-bordered list">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Név</td>
<td class="left">E-mail</td>
<td class="left">Telefonszám</td>
<td style="text-align: center;">Dátum</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor55">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="55" /></td>
<td style="text-align: center;">55</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="55" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
<tr id="sor54">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="54" /></td>
<td style="text-align: center;">54</td>
<td class="left">Nagy Andrea</td>
<td class="left">andi99#gmail.com</td>
<td class="left">06 70 8382 11</td>
<td style="text-align: center;">2016-08-13 20:33</td>
<td style="text-align: center; color:#ff0000">Új üzenet</td>
<td class="right"><span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span> <a id="54" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a></td>
</tr>
</tbody>
</table>

Or, slightly shorter, see here fiddle (edited):
$(".checkAllCheckboxes").click(function()
{
$(this).closest('table').find('input:checkbox').prop('checked', this.checked)
.closest('tr').toggleClass('selected',this.checked)
});
The function does both, set the tickmarks and assigns/removes the classname to the parent-trs. As it turns out, the .not(this) and later .addSelf() were not even necessary to achieve the intended effect. I therefore removed them again ("Write less, do more").
.closest() is advantageous in cases where there might be nested tables (.parents() would find all parent tables)
.closest('tr') gets the trs you want to work on.
Well, the above does not quite do everything. It does not do the tr-class-handling when clicking on a "normal" checkbox. The following does:
$('input:checkbox').click(function()
{ var jqobj=$(this);
if (jqobj.hasClass('checkAllCheckboxes')) // extend the selection
{ jqobj=jqobj.closest('table').find('input:checkbox'); }
jqobj.prop('checked', this.checked).closest('tr')
.toggleClass('selected',this.checked);
});

this can also be used to acheive the same
$(".checkAllCheckboxes").click(function(){
if($(this).is(':checked')){
$(this).parents('tr').addClass('checked');
$('tbody tr').addClass('checked')
$('tbody input[type="checkbox"]').prop('checked',true)
}
else{
$(this).parents('tr').removeClass('checked');
$('tbody tr').removeClass('checked')
$('tbody input[type="checkbox"]').prop('checked',false)
}
});

Related

Show and Hide elements That are not

I'm trying to hide all the tr that dont have the type selected.
I managed to show them. How do I hide the other ones?
changeTableType();
$('#type').change(function() {
changeTableType();
});
function changeTableType() {
var type = $('#type').val();
console.log(type);
$('.' + type).closest('tr').show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="type" id="type">
<option>UI</option>
<option>TELLER</option>
<option>PROFILE</option>
</select>
<table class="table center-aligned-table table-striped dataTable no-footer" id="dataTable" role="grid" aria-describedby="dataTable_info">
<thead>
<tr role="row">
<th class="text-center select-checkbox sorting_disabled" rowspan="1" colspan="1" aria-label="&nbsp;" style="width: 55px;"> </th>
<th class="text-center sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 359px;">Name</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 234px;">Type</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Creation Date: activate to sort column ascending" style="width: 459px;">Creation Date</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Created By: activate to sort column ascending" style="width: 345px;">Created By</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 586px;">Action</th>
</tr>
</thead>
<tbody>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">2erw</td>
<td class="UI">UI</td>
<td>05/01/2018 15:17:33</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-2erw" name="2erw">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-2erw" name="2erw">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">czxcz</td>
<td class="UI">UI</td>
<td>05/01/2018 15:16:45</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-czxcz" name="czxcz">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-czxcz" name="czxcz">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">czxczxcz</td>
<td class="UI">UI</td>
<td>05/01/2018 15:10:06</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-czxczxcz" name="czxczxcz">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-czxczxcz" name="czxczxcz">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">da</td>
<td class="UI">UI</td>
<td>05/01/2018 15:20:12</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-da" name="da">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-da" name="da">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">fbffgb</td>
<td class="UI">UI</td>
<td>05/01/2018 15:21:13</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-fbffgb" name="fbffgb">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-fbffgb" name="fbffgb">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">profilesadasd</td>
<td class="PROFILE">PROFILE</td>
<td>05/01/2018 15:03:31</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-profilesadasd" name="profilesadasd">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-profilesadasd" name="profilesadasd">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">sdad</td>
<td class="UI">UI</td>
<td>05/01/2018 15:09:12</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-sdad" name="sdad">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-sdad" name="sdad">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">tellerdasdasdas</td>
<td class="TELLER">TELLER</td>
<td>05/01/2018 15:03:16</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-tellerdasdasdas" name="tellerdasdasdas">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-tellerdasdasdas" name="tellerdasdasdas">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">xczxcxzc</td>
<td class="UI">UI</td>
<td>05/01/2018 15:21:31</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-xczxcxzc" name="xczxcxzc">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-xczxcxzc" name="xczxcxzc">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">xzxc</td>
<td class="UI">UI</td>
<td>05/01/2018 14:56:44</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-xzxc" name="xzxc">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-xzxc" name="xzxc">Delete</button>
</td>
</tr>
</tbody>
</table>
You need negation for checking if the specific attribute, and then use the function hide.
Here is the example of the code:
$( "tr[type!='selected']" ).hide();
Here is the link of the official documentation about negation in jQuery
Just add $("tbody tr").hide(); to hide ALL rows within the table's body... Then show the ones that fit the selection.
;)
changeTableType();
$('#type').change(function() {
changeTableType();
});
function changeTableType() {
var type = $('#type').val();
console.log(type);
$("tbody tr").hide();
$('.' + type).closest('tr').show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control" name="type" id="type">
<option>UI</option>
<option>TELLER</option>
<option>PROFILE</option>
</select>
<table class="table center-aligned-table table-striped dataTable no-footer" id="dataTable" role="grid" aria-describedby="dataTable_info">
<thead>
<tr role="row">
<th class="text-center select-checkbox sorting_disabled" rowspan="1" colspan="1" aria-label="&nbsp;" style="width: 55px;"> </th>
<th class="text-center sorting_asc" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Name: activate to sort column descending" style="width: 359px;">Name</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Type: activate to sort column ascending" style="width: 234px;">Type</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Creation Date: activate to sort column ascending" style="width: 459px;">Creation Date</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Created By: activate to sort column ascending" style="width: 345px;">Created By</th>
<th class="text-center sorting" tabindex="0" aria-controls="dataTable" rowspan="1" colspan="1" aria-label="Action: activate to sort column ascending" style="width: 586px;">Action</th>
</tr>
</thead>
<tbody>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">2erw</td>
<td class="UI">UI</td>
<td>05/01/2018 15:17:33</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-2erw" name="2erw">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-2erw" name="2erw">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">czxcz</td>
<td class="UI">UI</td>
<td>05/01/2018 15:16:45</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-czxcz" name="czxcz">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-czxcz" name="czxcz">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">czxczxcz</td>
<td class="UI">UI</td>
<td>05/01/2018 15:10:06</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-czxczxcz" name="czxczxcz">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-czxczxcz" name="czxczxcz">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">da</td>
<td class="UI">UI</td>
<td>05/01/2018 15:20:12</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-da" name="da">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-da" name="da">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">fbffgb</td>
<td class="UI">UI</td>
<td>05/01/2018 15:21:13</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-fbffgb" name="fbffgb">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-fbffgb" name="fbffgb">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">profilesadasd</td>
<td class="PROFILE">PROFILE</td>
<td>05/01/2018 15:03:31</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-profilesadasd" name="profilesadasd">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-profilesadasd" name="profilesadasd">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">sdad</td>
<td class="UI">UI</td>
<td>05/01/2018 15:09:12</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-sdad" name="sdad">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-sdad" name="sdad">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">tellerdasdasdas</td>
<td class="TELLER">TELLER</td>
<td>05/01/2018 15:03:16</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-tellerdasdasdas" name="tellerdasdasdas">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-tellerdasdasdas" name="tellerdasdasdas">Delete</button>
</td>
</tr>
<tr class="text-center odd" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">xczxcxzc</td>
<td class="UI">UI</td>
<td>05/01/2018 15:21:31</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-xczxcxzc" name="xczxcxzc">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-xczxcxzc" name="xczxcxzc">Delete</button>
</td>
</tr>
<tr class="text-center even" role="row">
<td class=" select-checkbox"></td>
<td class="sorting_1">xzxc</td>
<td class="UI">UI</td>
<td>05/01/2018 14:56:44</td>
<td>admin</td>
<td>
<button type="button" class="btn btn-primary-outline" id="viewTestCase-xzxc" name="xzxc">View</button>
<button type="button" class="btn btn-danger-outline" id="delete-xzxc" name="xzxc">Delete</button>
</td>
</tr>
</tbody>
</table>
Vanilla.JS
document.querySelector('#type').addEventListener( "change", changeTableType );
function changeTableType( event ){
var type = document.querySelector("#type").value;
var $$toShow = document.querySelectorAll( "#dataTable tr:has(> td." + type + ")" );
var $$toHide = document.querySelectorAll( "#dataTable tr:has(> td:not(." + type + "))" );
$$toShow.forEach( function( $el ){
$( $el ).show();
});
$$toHide.forEach( function( $el ){
$( $el ).hide();
});
}
document.querySelector('#type').dispatchEvent( new Event( "change" ) );
JQuery
$('#type').change( changeTableType );
function changeTableType( event ){
var type = $("#type").val();
var toShow = $( "#dataTable tr:has(> td." + type + ")" );
var toHide = $( "#dataTable tr:has(> td:not(." + type + "))" );
toShow.each( function( el ){
$( el ).show();
});
toHide.each( function( el ){
$( el ).hide();
});
}
$('#type').trigger( "change" );

Keep style of <tr> while dragging

I have a table where I use JqueryUI and when I make a drag of a row the style of this disappear, that's normal cause when you make a drag of the row, this pass to be outside of table.
The element created while dragging is a <tr>and have the class .placeholder-style I want to keep the padding of the fields in the row created while drag.
How can I do this?
$("#tabs").tabs();
$("#tbodyproject").sortable({
items: "> tr",
appendTo: "parent",
helper: "clone",
placeholder: "placeholder-style",
start: function(event, ui) {
var cantidad_real = $('.table thead tr th:visible').length;
var cantidad_actual = $(this).find('.placeholder-style td').length;
if (cantidad_actual > cantidad_real) {
var cantidad_a_ocultar = (cantidad_actual - cantidad_real);
for (var i = 0; i <= cantidad_a_ocultar; i++) {
$(this).find('.placeholder-style td:nth-child(' + i + ')').addClass('hidden-td');
}
}
ui.helper.css('display', 'table');
},
stop: function(event, ui) {
ui.item.css('display', '')
},
update: function(event, ui) {
let newOrder = $(this).sortable('toArray');
$.ajax({
type: "POST",
url: '/admin/projects/updateOrder',
data: {
ids: newOrder
}
})
.done(function(msg) {
location.reload();
});
}
}).disableSelection();
img {
width: 100px;
}
.hidden-td {
display: none !important;
}
.table {
background-color: green;
border: 0;
}
.trdrag {
background-color: yellow;
}
.thcenter {
background-color: grey !important;
}
.ui-sortable-helper {
left: 0px!important;
}
.idrow {
width: 5%;
}
.tdvisible {
width: 5%;
}
.tdslug {
width: 10%;
}
.tdimg {
width: 15%;
}
.tdorder {
width: 20%;
}
.tdacciones {
width: 40%;
}
#media (max-width: 500px) {
.ocultarid {
display: none;
}
.tdslug {
width: 15%;
}
}
#media (max-width: 350px) {
.ocultarvisible {
display: none;
}
.accionesvisible {
display: none;
}
.ordenvisible {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
<div id="tabs">
<div class="col-md-12">
<div id="table1">
<table class="table">
<thead>
<tr>
<th class="thcenter ocultarid">ID</th>
<th class="thcenter ocultarvisible">Visible</th>
<th class="thcenter slug">Nombre</th>
<th class="thcenter header">Header</th>
<th class="thcenter home">Home</th>
<th class="thcenter ordenvisible">Orden</th>
<th class="thcenter accionesvisible"><span class="glyphicon glyphicon-cog"></span>Acciones</th>
</tr>
</thead>
<tbody id="tbodyproject">
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td class="hidden-td" style="display:none;">Testing</td>
<td class="hidden-td" style="display:none;">Testing2</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">2</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">3</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">1</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id1" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">4</p>
</td>
<td style="display:none;">Testing</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 1</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 1">Delete
</form>
</td>
</tr>
<tr id="id2" class="trdrag">
<td class="idrow tdcenter ocultarid">
<p id="margindata">5</p>
</td>
<td class="tdcenter tdvisible ocultarvisible">
Yes
</td>
<td class="tdslug slug">
<p id="margindata">Slug</p>
</td>
<td class="tdimg header"><img src="http://via.placeholder.com/350x150" class="sizeheader"></td>
<td class="tdimg home"><img src="http://via.placeholder.com/350x150" class="sizehome"></td>
<td class="tdcenter tdorder ordenvisible">
<p id="margindata">Order 2</p>
</td>
<td class="tdacciones accionesvisible">
<form method="POST" action="{{route('admin.projects.destroy',$project->id)}}" onsubmit="return ConfirmarBorrar()">
Edit
<input type="submit" value="Delete" class="btn btn-danger btn-sm" id="margindata">
<input type="hidden" name="_token" value="Token 2">Delete
</form>
</td>
</tr>
</tbody>
</table>
<br><br>
</div>
</div>
https://jsfiddle.net/3g3bt80e/9/
Try defineing the td / tr tags the css to a certain height & width this may resolve ur problem.

sorting doesn't work, datatable in bootstrap

I've got a problem with sorting my table. When I click on my table header, my table data don't sort. Even with using the "show 10/25/50 entries" and also the search bar.
I tried very long but seems not working. Here is my code. I don't is sit the plugin problem or my coding problem. I've tried many ways from the internet but all dont work. I'm running xampp locally with internet connection.
$(".contentContainer").css("min-height", $(window).height());
$("textarea").css("height", $(window).height() - 110);
$("textarea").keyup(function() {
$.post("updatediary.php", {
diary: $("textarea").val()
});
});
$(document).ready(function() {
$('#example').DataTable();
});
.navbar-brand {
font-size: 1.8em;
}
#topContainer {
background-image: url("background.jpg");
height: 400px;
width: 100%;
background-size: cover;
}
#topRow {
margin-top: 80px;
text-align: center;
}
#topRow h1 {
font-size: 300%;
}
.bold {
font-weight: bold;
}
.marginTop {
margin-top: 30px;
}
.center {
text-align: center;
}
.title {
margin-top: 100px;
font-size: 300%;
}
#footer {
background-color: #B0D1FB;
padding-top: 70px;
width: 100%;
}
,
marginBottom {
margin-bottom: 30px;
}
.appstoreImage {
width: 250px;
}
.table {
table-layout: fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse">
<ul class= "navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Date</td>
<th>Subject</th>
<td>Details</td>
<td>Status</td>
<td>ticket id</td>
<td>Actions</td>
</tr>
</thead>
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tbody method="post">
<td class="col-md-1"><?php print_r($date); ?></td>
<td class="col-md-1"><?php print_r($subject); ?></td>
<td class="col-sm-2"><?php print_r($detail); ?> </td>
<td class="col-md-1"><?php print_r($status); ?></td>
<td class="col-md-1"><?php echo $tickid ; ?></td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tbody>
<?php } ?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
</body>
Change td elements to th in thead
Take tbody out of while loop
Add table row tr element inside while loop to enclose table cells
I think you must clean up your code a little bit like #Gyrocode.com said. Code below works.
$(document).ready(function() {
$('#example').DataTable();
});
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- start to loop here -->
<tr>
<td class="col-md-1">10/04/2017</td>
<td class="col-md-1">ABC</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">1546546</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">11/04/2017</td>
<td class="col-md-1">DEF</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5646156</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">12/04/2017</td>
<td class="col-md-1">ZXY</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">454658</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">OPQ</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">56446</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">ggg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtr</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">2577</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtfe</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7254</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rggthg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">frgbf</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52727</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">grege</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">gtehtehte</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<!-- end loop -->
<tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
Cleanup you your code:
$(document).ready(function() {
$('#example').DataTable();
});
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody method="post">
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tr>
<td class="col-md-1">
<?php print_r($date); ?>
</td>
<td class="col-md-1">
<?php print_r($subject); ?>
</td>
<td class="col-sm-2">
<?php print_r($detail); ?> </td>
<td class="col-md-1">
<?php print_r($status); ?>
</td>
<td class="col-md-1">
<?php echo $tickid ; ?>
</td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

How to Move selected table tr's to another table?

I have got two tables mytable1 and mytable2
I am trying to move the checked tr rows (from table mytable1) to different table mytable2
I have tried as following
$(document).ready(function() {
$(document).on("click", ".movemultiple", function(event)
{
$('.mytable1 > tbody > tr').each(function() {
$(this).find('td:eq(0) .updatecheckboxvalueindb:checked')
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
Could you please let me know how to do this ?
http://jsfiddle.net/o2gxgz9r/1879/
You could use jQuery .closest() to get the closest table row (or table cell) and jQuery .remove() to remove the table cell with the checkbox from DOM:
$(document).ready(function () {
$(document).on('click', '.movemultiple', function() {
var $myTable2Body = $('.mytable2 tbody');
$('.mytable1 .updatecheckboxvalueindb:checked').each(function(index, item) {
var $checkbox = $(item);
$myTable2Body.append($checkbox.closest('tr'));
$checkbox.closest('td').remove();
});
});
});
.fa fa-check
{
background-color:red!importnt
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="mytable1 table table-bordered table-hover" id="videosfromtagstable">
<thead>
<tr class="existingvideos">
<th>Action</th>
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
</tr>
</thead>
<tbody class="connectedSortable ui-sortable">
<tr video-id="37" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>crunches</td>
<td>ht4_970_979.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr video-id="38" title="" class="newvideos exercises-add-table-content">
<td class="removecheckboxtd" style="vertical-align: middle ; display:block;"><label class="mt-checkbox mt-checkbox-outline"><input class="new-checkbox updatecheckboxvalueindb" value="new_flag" type="checkbox"><span></span></label></td>
<td>Sit Ups</td>
<td>ht4_970_345.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td><i class="fa fa-check"></i></td>
</tr>
</tbody>
</table>
<br><br>
<button type="button" class="btn red default movemultiple">Move </button>
<br><br>
<table class="mytable2 table table-bordered table-hover" id="videosexistingtable">
<tbody class="connectedSortable ui-sortable">
<tr class="existingvideos">
<th>Name</th>
<th>File</th>
<th>Badge</th>
<th>Equipments</th>
<th>Action</th>
</tr>
<tr class="existingvideos" video-id="34">
<td>Push Ups</td>
<td>ht4_970_285.mp4</td>
<td>
<span class="btn btn-sm btn-success btn-circle">Push Ups</span>
</td>
<td>
<i class="fa fa-check"></i>
</td>
<td class="deletevidetd"><a data-videoid="34" class="fa fa-trash remove-delete-icon deletevideo" title="Delete"></a></td>
</tr>
</tbody>
</table>
JSFiddle
like this?
$(document).on("click", ".movemultiple", function(event){
$('.updatecheckboxvalueindb:checked').parents('tr').appendTo('.mytable2').find('.removecheckboxtd').remove();
});
check out the fiddle : http://jsfiddle.net/h9q8o340/

Renumber the rows in table after drag and drop

In a php generated table, i use drag and drop on the rows, to change the sorting. (first image, second image....)
If i drop the 4th row as first, it will be first, but the row i dropped, it stays as 4th, the rows wont renumber them.
How can i renumber the rows, and put the index in the hidden input named sorrend_hidden?
<table class="table table-hover table-bordered list" id="table_2">
<thead>
<tr>
<td style="width: 1px; text-align: center;"><input type="checkbox" class="checkAllCheckboxes" /></td>
<td style="text-align: center;">ID</td>
<td class="left">Kép</td>
<td class="left">Megnevezés</td>
<td style="text-align: center;">Sorrend</td>
<td style="text-align: center;">Státusz</td>
<td class="right">Műveletek</td>
</tr>
</thead>
<tbody>
<tr id="sor24">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="24" /></td>
<td style="text-align: center;">24</td>
<td class="left"><img width="200" src="images/homepage_slideshow/89-FIFA_17_B4jlEln.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">2</td>
<td style="text-align: center;">Intaktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="24" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor31">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="31" /></td>
<td style="text-align: center;">31</td>
<td class="left"><img width="200" src="images/homepage_slideshow/503-WatchDogs2_FarCrayPrimal_1_.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">2</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="31" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor30">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="30" /></td>
<td style="text-align: center;">30</td>
<td class="left"><img width="200" src="images/homepage_slideshow/324-DeadRising4_megjelent.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">3</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="30" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor32">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="32" /></td>
<td style="text-align: center;">32</td>
<td class="left"><img width="200" src="images/homepage_slideshow/492-PS-VR_.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">4</td>
<td style="text-align: center;">Aktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="32" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
<tr id="sor23">
<td class="left"><input class="table_row_checkbox" type="checkbox" name="selectedRows[]" value="23" /></td>
<td style="text-align: center;">23</td>
<td class="left"><img width="200" src="images/homepage_slideshow/90-konzolkiraly_sl_1467362325.jpg" class="img-responsive" /></td>
<td class="left"></td>
<input type="hidden" value="" name="sorrend_hidden" />
<td style="text-align: center;">5</td>
<td style="text-align: center;">Intaktív</td>
<td class="right">
<span class="btn btn-sm button"><span class="glyphicon glyphicon-pencil"></span></span>
<a id="23" href="#" class="deleteLink"><span class="btn btn-sm btn-danger "><span class="glyphicon glyphicon-remove"></span></span></a>
</td>
</tr>
</tbody>
</table>
Jquery:
$("#table_2").tableDnD(
{
onDrop: function(table, row)
{
var rows = table.tBodies[0].rows;
var RowID = row.id.substr(3);
var RowIndex = $(row).index() + 1;
// name = sorrend_hidden
$.ajax({
data: { RowID:RowID, RowIndex:RowIndex },
type: 'POST',
url: 'files/update_slide_index.php',
success: function(data)
{
var result = $.trim(data);
$('#newsletterResult').html(result);
$('#newsletterModal').modal('show');
},
complete: function()
{
setTimeout(function()
{
location.reload();
}, 3000 );
}
});
}
});
Sql update:
<?php
include_once("../../files/connect.php");
if(isset($_POST['RowID']))
{
$RowID = intval($_POST['RowID']);
$RowIndex = intval($_POST['RowIndex']);
$sql = "UPDATE slideshow SET slide_sorrend = '$RowIndex' WHERE slide_id = '$RowID'";
/*if(mysqli_query($kapcs, $sql))
{
mysqli_query($kapcs, "UPDATE slideshow SET slide_sorrend = slide_sorrend + 1 WHERE slide_id != '$RowID'") or die(mysqli_error($kapcs));
}
else
{
die(mysqli_error($kapcs));
}*/
echo 'A kép sorrendje sikeresen megváltozott.';
}
else
{
echo 'Nincs ID';
}
?>
I had a similar issue months ago. I ended up using the sortable feature included in jQuery UI.

Categories