I have a table that is able to sort the columns and it is working fine.
The rows in the table consists of parent and child rows which when click on the parent row will show the child rows. Otherwise the child rows will remain hidden.
I intend to sort the rows based on the parent rows but not the child rows result or else the table will be a mess. I try to use jQuery to remove all the child rows before sorting and append them after the sorting function but the sorting function for the column wont work for the second time. This could be the row indexes had messed up. I suspect this happened because when I remove and store child rows in a variable, the row indexes still remain. So when I re-insert the child rows based on the parent rows, the row indexes of those child rows will remain same.
Is there anyway to explicitly modify the row index of the rows without swapping their positions?
Tried to use jQuery in such way as:
$('tr.child-row')[0].rowIndex = 3
But it just wont work.
You can change the order of two rows in a table.
http://jsfiddle.net/4v2owx37/2
This is a simple code that changes order of two rows.
function swap_position(first_index, second_index){
if(second_index > first_index){
$("tr").eq(first_index).insertBefore($("tr").eq(second_index));
$("tr").eq(second_index).insertBefore($("tr").eq(first_index));
}
else if(first_index > second_index){
$("tr").eq(second_index).insertBefore($("tr").eq(first_index));
$("tr").eq(first_index).insertBefore($("tr").eq(second_index));
}
}
swap_position(1,4);
swap_position(5,3);
Related
I am using tabulator in Angular.I wanted to add new blank row on a button click,
so I am adding a new row by using this.table.addRow({});
But every time I click on button, its adding blank row. But I don't want multiple blank rows to be added in Table.
Can I prohibit adding blank row if already one blank row is added?
How I can find out number of blank rows in table ?
Tabulator itself has no concept of a "blank row" all, rows are just objects and the table will visualize the data contained in those objects.
But you could use the searchRows function with a custom filter to retrieve the empty rows and check this before triggering the addRow function:
var emptyRowCount = table.searchRows((data) => { return Object.keys(data).length }).length
I have a container in which there are five rows with multiple columns. When you click on a row the entire row should move downwards so the first row should become the second row. I searched for this but what I found didn't work for me, could you point me to some articles or give me an idea to help me solve this.
Yes, you can do that with jquery using click event and then get the previous or next row element and manipulating their indexes, using the index method present in jquery
use the index method to get their position and then apply +1/-1 logic for changing the index
I have specific requirement for datatable using query. I am looking for solution.
I have datatable with rows , each row is either parent row of any other row or child row of other parent row.
I want to Implement button as one of the column, when it is clicked it should scroll me to the parent row. Each row has its own guid and holds value of its parent row's guid.
Open for all kind of solution.
Thank you for your time.
I have a custom sort on a few columns of data in my grid. I'm trying to hide some of the rows of data based on their value while I'm doing the sort. In the function, I have the cell value and the row object, but I don't see the row ID which is what I was going to use to hide that row of data. Is there a way to get the row ID, or is there a better way to attack hiding rows while sorting?
The grid content will be reloaded during sorting. So you can use rowattr to set some attributes on the rows. Inside of rowattr callback you have access to the object which represent the data of the row. Look at the answer. It adds CSS class myAltRowClass to some rows based on the content from one specific column. You can do the same. You need just defines display: none to CSS class myAltRowClass. Alternatively rowattr callback can return {"style": "display: none"}; on some rows.
In JQuery, we can cache almost any objects returned by a selector, and in my case, I cache the children (<tr>s) of a selected element (<tbody> in a table) in a variable called rows.
I then call JQuery methods on this rows, which manipulate individual rows. For example, if there are 5 rows in total and I want to swap the first and the last row:
rows.eq(4).after(row1);
rows.eq(0).before(row5);
However, this does not work. The first row gets to the bottom but the bottom row does not get to the top.
What does it work is to get a fresh copy of the children on each manipulation. For comparision, please see: http://jsfiddle.net/QNS5G/
What is causing problems for the cached approach here?
After you change the row order in the DOM, the order in the jQuery object does not change.
So t1_rows.eq(4).after(t1_row1); moves the first row to the bottom (row 1 goes after the fifth row in the jQuery object). Then t1_rows.eq(0).before(t1_row5); tries to place the last row before row 1. Since it's already there, you don't see any changes.
Perhaps you are thinking el.after(something) places el after something, but it's the other way around, it actually places something after el.
Let me translate your code into english.
First, take row 1 and insert it after row 5
Then, take row 5 and insert it before row 1
The second operation does nothing because row1 has moved to the bottom of the list. It's already right before row5.
var tbody = $(document.getElementById('t1_parent')),
first_row = tbody.find('tr:eq(0)'),
last_row = tbody.find('tr:eq(4)');
last_row.prependTo(tbody);
first_row.appendTo(tbody);
EDIT:
Never mind. Another solution was found.