We Keep Coding

jQuery: Detach table rows then append back to same position

I am trying to remove/append table rows using jQuery's detach() method. I'd rather use this method than jQuery's hide/show to keep certain css styles. The detach function is tied to a checkbox that will hide any rows that contain "No".
The problem I am having is my table has sortable headers, and if I sort any column before I use this function, the table rows do not get put back into the right position.
$(document).ready(function () {
var tablerows;
$('#indexTable tr').each(function(i) {
$(this).data('initial-index', i);
});
$('#customSwitch1').change(function () {
if (tablerows) {
$(tablerows).appendTo('#indexTable').each(function(){
var oldIndex = $(this).data('initial-index');
$('#indexTable tr').eq(oldIndex).before(this);
});
tablerows = null;
} else {
tablerows = $('#indexTable tr:contains(No)').detach();
}
});
});
How can I put the rows back into the position before detachment, or even back to the position when the table is first loaded?

How to refresh datatable column data

I use data table plugin with table as data source. I have to change some column value via javascript when the user types in some numbers into an input (this input is part of the table too and I have to export this values to). It is working well but when I want to export the table the columns witch was changed with javascript is not displayed in the exported file.
I think the problem is that I have not refreshed the datatable plugin. Is this correct? If yes how do I refresh the datasource? If no what can be the problem and how can I solve it?
I tried the refresh() method (var dataTableObject = $(this).parents('table').dataTable(); dataTableObject.refresh();) and the $(this).parents('table').dataTable() but is not working.
Edit: Here is how do I change the cell value:
$item.find('input.quantity-coefficient').each(function (i, d) {
$(d).off('change').on('change', function () {
var multiplier = $(this).val();
//var dataTableObject = $(this).parents('table').dataTable();
$($(this).data("row-price-info-class")).each(function (i, d) {
var priceContainer = $(d);
var price = parseFloat(priceContainer.data('price-value'));
var priceInfoRatioContainer = $(priceContainer.data("ratio-input-class"));
if (multiplier * price == 0) {
priceInfoRatioContainer.closest("td").addClass("no-euro");
priceInfoRatioContainer.html(" ");
} else {
priceInfoRatioContainer.closest("td").removeClass("no-euro");
priceInfoRatioContainer.html(localizeNumber(multiplier * price));
}
});
//TODO redrow the data
$(this).parents('table').dataTable().fnDraw();;
});
});

You can refresh the dataTable with fnDraw(). In your example:
$(this).parents('table').dataTable().fnDraw();

Thank you guys but I think I found the solution in this post: jquery DataTables - change value of a cell not just display value
When I tried it on the first time the problem was that I started the row numbering from 1 and not from 0.
So for the others who may have this issue to, I have to use something like this:
(this).parents('table').dataTable().fnUpdate("new value", 0, 2)
To update the cell value. Actually this is not what I asked because this is not refresh all the table, but this is a solution for me now.

Get column and row number of the selected cell of a Flexigrid

I'm currently using a Flexigrid and I would like to recover the column number and also the row number of the selected cell.
I managed to recover the content of the selected one by adding "process: procMe" in the column model and by writing the following function :
function procMe(celDiv, id){
$(celDiv).click(function(){
var content = this.innerHTML;
}
}
But I didn't find yet how to get the column and row numbers.
Thanks for any help !

celDiv is the div inside the table cell.
Firstly, get the table cell:
var td = $(celDiv).closest('td');
Now, we use jQuery's index() method to get the relative position of that td within it's siblings
var colIndex = td.index();
colIndex should now contain the zero-based column index of that cell/header cell.
You should be able to do something similar with the row by retrieving the row, and then getting its index within its siblings:
var tr = td.closest('tr');
var rowIndex = td.index();

Tablesorter can't apply search criteria on updateComplete

I've got a "tablesorter table" containing a category names in the first column. I filter the rows using shortcut buttons which trigger the specific "search" actions depending on which one is active:
function do_filtering() {
var category = $('#categories .active a').attr('data-filter-text');
var columns = [];
columns[0] = category;
$('table').trigger('search', [columns]);
}
Contents of the table may change. Until now I triggered on the table two events: "updateCell" and "search" and it got properly updated.
I need to separate these calls:
"updateCell" would be triggered by the cell editor (attached by a "sorter" for that specific columns' content)
"search" would be triggered after the cell is updated.
Unfortunately filtering in the "updateComplete" handler doesn't work, please see: http://jsfiddle.net/8cg4f/352/
How can I retain the search criteria after updating the table?

Well, the problem seems to be that since the filter inputs are empty, the filter widget is showing all rows after the update. I have two solutions, the second one probably being the better one because the first method causes flickering:
1) Add a setTimeout in the callback, with a time of 1 millisecond (demo):
$('td').click(function () {
resort = false;
$("table").trigger('updateCell', [$(this).closest('td'), resort, function(table){
setTimeout(function(){ do_filtering(); }, 1);
}]);
});
2) Update the filters, and hide the filter row (demo):
CSS
.tablesorter-filter {
display: none;
}
Code
function do_filtering() {
var category = $('#categories .active a').attr('data-filter-text');
$('.tablesorter-filter:first').val(category).trigger('search');
}
$('td').click(function () {
resort = false;
$("table").trigger('updateCell', [$(this).closest('td'), resort, function(table){
do_filtering();
}]);
});

Deleting rows in table Javascript

I'm printing table using function:
function findL(val){
var i;
//alert(splitted + " " + JSDate);
for(i=0;i<jsData.length; i++)
{
if(jsData[i].get_date() == val)
{
$('<tr>').append($('<td>').html(jsData[i].get_startT))
.append($('<td>').html(jsData[i].get_endT))
.append($('<td>').html(jsData[i].get_prow))
.append($('<td>').html(jsData[i].get_przedm))
.append($('<td>').html(jsData[i].get_sala))
.appendTo('#pzTbody');
}
}}
As an argument function takes date from datepicker, and when I pick another date it adds to the previously viewed rows.
My problem is that I tried plenty ways to cleaning/deleting old rows before next search.
I tried deleteRow(), .parentNode in loop etc. Anyone know how to delete appended rows?

From the code I assuem pzTbody is the id of your table. To clean the table body and remove all rows do this:
$("#pzTbody").empty();
If you just want to remove the last row, use this:
$("#pzTbody tr:last-child").remove();