JQuery DataTable get row index after sorting - javascript

I have a table with data and a button that when clicked should do something with the row index. I've done this like so:
$("#tblData tBody").on('click', '.updateButton', function() {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
alert(updateButtonRowIndex);
});
This works but when I apply sorting to one of the columns, it no longer takes the actual row number but restarts from 0. This means that if I sort on ID and click on the button for 182 (now at the top) it will show that the row index is 0 and it will draw a value in the wrong row (the actual row 0).
Any solution for this?

You need to store the value for the original row index, you can always use an attribute for that like this:
$("#tblData tBody").on('click', '.updateButton', function() {
if ($(this).closest('tr').attr('originalRowIndex')) {
alert("This is the original value: "
$(this).closest('tr').attr('originalRowIndex'));
} else {
updateButtonRowIndex = $(this).closest('tr').prevAll().length;
$(this).closest('tr').attr('originalRowIndex', updateButtonRowIndex)
alert(updateButtonRowIndex);
}
});

Related

How to delete an item from object

I'm using datatables and importer CSV file to fill a table and fill a hidden input
I'm trying to delete an item when I press the delete button from the table, at the moment I have this
$('#task-place-table tbody').on('click', '.deleted', function () {
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});
this code can delete the item from the table, but not from the hidden input
for example, this is the input
[{"url":"http://www.restaurant.com","businessTypeId":"1"},{"url":"http://www.hotel.com","businessTypeId":"2"},{"url":"http://www.test.com","businessTypeId":"3"}]
In the example, I deleted restaurant and test item, but in the hidden input, the items still remain there (NOTE: businessTypeId is not the row ID)
I would like to have this when I delete an item from the table
[{"url":"http://www.hotel.com","businessTypeId":"2"}]
IMPORTANT NOTE: businessTypeId is not the row ID or Item ID, number 2 is coincidence (that number is the ID in database)
how can I delete items?
Get a reference to the hidden input.
Modify the value array for that hidden input.
i.e:
// "3" being the 'id' of the deleted item(s)
hiddenInputHandle.value = hiddenInputHandle.value.filter(i->i.businessTypeId !== "3")
Solution, with splice and a for, to loop through the array, I can clear the data taking url as reference
$('#task-place-table tbody').on('click', '.deleted', function () {
let value = $(this).closest('tr').find('td').eq(1).text();
for (let i = 0; i < placesArray.length; i++) {
if (placesArray[i].url == value) {
placesArray.splice(i, 1);
break;
}
}
$('#places').val(JSON.stringify(placesArray));
dataTable
.row($(this).parents('tr'))
.remove()
.draw();
itemCounter--;
document.getElementById('item-counter').value = itemCounter;
});

Datatables deleting a row where column value equals something

I have tried the following and I am unable to find a match. What am I doing wrong?
var table = $('#mytable').DataTable();
//hide the row where text in column 1 equals 202733001010
var index = table.row().eq( 0 ).filter( function (rowIdx) {
return table.cell( rowIdx, 0 ).data() === '202733001010' ? true : false;
} );
What i get is a convoluted empty array that does not seem to have any values in it. My end purpose is to delete a row where a column cell (in this case 0) equals a certain value but I think I may be using an incorrect approach. Many thanks in advance for your suggestions. Datatables documentation : https://datatables.net/reference/type/row-selector
If your goal is to actually remove the row (filter and search just hides/shows matching data), the logic below can do it fairly straight forward. I use a text box to enter a value to get ride of out of the first column. If found, I remove it.
See it work here http://live.datatables.net/natejiju/1/edit
$(document).ready( function () {
var table = $('#example').DataTable();
$("#btnGo").on("click", function(){
var s = $("#txtSearch").val();
table.rows().nodes().each(function(a,b) {
if($(a).children().eq(0).text() == s){
table.rows(a).remove();
}
} );
table.rows().invalidate();
table.draw();
});
});

bootstrap -table hide all rows except the clicked row

var $table = $('#table');
$table.on('expand-row.bs.table', function (e, index, row, $detail) {
$detail.html('Carregando os dados...');
});
I would like to capture all the rows except the clicked row , and close them.
I suppose that expand-row is a class...
I also assume that the actual display value of your rows is table-row...
But it may be inline too.
Try this:
var $table = $('#table');
$table.on("click", '.expand-row.bs.table', function (e, index, row, $detail) {
$('.expand-row.bs.table').each(function(){ // iterates all rows.
$(this).css({"display":"none"}); // Here, "this" is row element.
});
$(this).css({"display":"table-row"}); // Here, "this" is the clicked element.
$detail.html('Loading data ...');
});

on button click delete from datatable and also from array

foreach row in my table i've a delete button , on click this button i've the following function :
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
$(jQtable).closest('tr').remove();
openHour.splice(row.rowIndex,1);
// openHour is my array ,which i also want to delete from
}
the problem with this code it does delete the corret row from the table when clicking on delete but it removes the wrong row in the array . (one above of the selected row)
how can i fix it ?!
If, like you say, the correct row is removed, then you make the correct traversal to the table row here:
$(jQtable).closest('tr').remove();
Meaning, to get the rowIndex property of our table row, we can use the same jQuery object together with .prop():
function deleteBussDay(jQtable) {
var $row = $(jQtable).closest('tr'), rowInd = $row.prop('rowIndex');
$row.remove();
openHour.splice(rowInd ,1);
}
'rowIndex' counted for each table.
'rowIndex' changed when you sort table.
As alternative you can use some 'data' attribute as mark.
function deleteBussDay(jQtable)
{
var row = $(jQtable).closest('tr');
var id = row.data('rowIndex');
row.remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}
or
function deleteBussDay(jQtable)
{
var row = jQtable.parentNode.parentNode;
var id = row.rowIndex;
$(row).remove();
openHour.splice(id, 1);
// openHour is my array ,which i also want to delete from
}

easyui datagrid insertrow get input value

I mean I want to insert a new row in datagrid to use insertrow method.
but the rows parameter is fixed ,i want to get the new values when i click save button
code belows.
$("#insertRow").click(function(){
var row = $('#dg').datagrid('getSelected');
if (row){
var index = $('#dg').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#dg').datagrid('insertRow', {
index: index,
row:{long:row.long} //I mean this place must be the value i typed ,like row.long
});
$('#dg').datagrid('selectRow',index);
$('#dg').datagrid('beginEdit',index); });
you can try like this if you want to set the blank value
$('#dg').datagrid('insertRow', {
index: index,
row:{long:''}
});
and row:{long:'long1'} to set the value to the field
** if this is not helping, please provide your datagrid code and please more explicit of your code row:{long:row.long}

Categories