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.
Related
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);
I am using a Datatable plugin for using pagination on my HTML table. I have a checkbox to select different rows across different pages. Each row has a unique id. But when I need to update the row cells after ajax call, JS cannot recognize the element by ID if presently I am not on that row's page. It basically returns null when I do:-
document.getElementById('xyz').
The current page rows are updated but not the rows on other pages. Please help me with this.
DataTables row selector is optimised for IDs as it is natural to wish to select rows by unique information. This is distinct from a jQuery selector as DataTables can optimise this selector type so as to not involve the DOM - also allowing an id row selector to operate on rows which have not yet had their DOM nodes created (when using deferRender for extra speed).
With dynamically sourced data, the id assigned to the row is identifier using the rowId option. The data used as the id can be of any value, although it must be unique in the table.
To use an id selector, simply prefix the id value for the row you wish to select with a number sign: #. The value that follows is taken as the id. Unlike jQuery this value does not need to be escaped - although this means that an id selector must be used alone (e.g. a class name cannot also be used), it does make is much easier to use for complex data.
Select a single row by id:
var table = $('#example').DataTable();
var row = table.row('#row-42');
Select multiple rows by id:
var table = $('#example').DataTable();
var rows = table.rows( [ '#row-42', '#row-51' ] );
Source: https://datatables.net/reference/type/row-selector
I know that the practice is that every element has a unique id. I am curious about this case: I have a table (let's call it table1) that has many functions connecting its cells in various ways (ex: editing one cell changes other cells accordingly). Now, I need to have another table (let's call it table2), that will have exact same functions between its cells.
I would like to avoid changing the ids in the table2, and then copy pasting the js functions for the table1 and apply them for the ids from the table2.
The easiest thing for me would be to just copy-paste this table1 (so the cells in the table1 and table2 will have same ids), and adapt the js functions to make sure that whenever a change in table1 happens - only table1 is affected, and not cells in table2, and vice versa.
Example:
$('body').on('keyup', "input[id^='sub_']", function() {
$("[id^='top_']").val(5);
}
Now, I suppose if I have an id that begins with "top_" in both tables that the change in table1 will also change the value of the field "top_" in table2.
How can I make sure to avoid this?
I was thinking to do something like this:
$(this).closest("input[id^='top_']");
But this is not working, the values are changed in both tables... Does anyone have a suggestion?
Try the following code snippet:
$(this).closest("table").find("input[id^='top_']");
This will make sure the changes are made only within the table where the event occurred.
EDIT
Here is a small example that you can modify for your needs if you don't want to provide your HTML: https://jsfiddle.net/fjh0v6m4/10/
Maybe try
$('#sameid')[0].dosomething()
I am trying to make a table with antd that allows sorting and row selection (using checkboxes).
Right now I have both enabled, however, when I sort by ascending/descending order, the selection does not sort. The checked boxes just stay at the same index as before.
To fix this I tried making a custom sort function that could possibly sort the selectedRowKeys the same way it is sorting the table rows, but I am not able to retrieve the information I need in the callback function to do this.
Has anyone ever done this before?
Any help would be appreciated!
You have not set the key of rows.
You have two ways to do it:
in the objects of the columns array add the key properties (with a property that represents a row identifier)
set rowKey props for the table with the name of the property that represents a row identifier in the columns objects
I have a table populated with json data and an ng-repeat, as in
I need to add rows to the top with a button, as in the screenshot, but the added row(s) has to have editable cells where I have blank rows. The data in the existing rows cannot be editable.
I am adding the row with an ng-click handler on the "add" button on the page:
$scope.addRow = function () {
$scope.hsCodes.unshift({});
};
This works, but of course adds a row just like the others, with empty TDs.
How can I add input (text) controls only to the added row(s)?
It would be helpful to have a demo to more accurately answer, but generally what I would do is:
Add a boolean property to the row object such as isEditable.
Set a template for the cell using ng-if="row.isEditable"
If the row.isEditable property is not there, that would be false, so you don't have to worry about adding it if you are dealing with remote data.