I have a table that has a hidden column that contains ids. I use the value in this column and send it to the server so I can grab the correct record.
I am not using datatables.net and I allow the user to update the row. So they click on an edit button and a dialog pops up and they edit it. Once they hit update I send all the values back including the id(stored in a hidden text field).
So I need to update the datatable and the fast way I found is use a plugin for it that allows you to take an html row and pass it to the datatable(instead of passing each column value in an array).
So first I need to delete the row then add the newly update row.
I have one problem though I don't know how to figure out which row to delete.
I could have some global variable that would store the row object and when it is time to delete it use that object. However I really don't want to do this as I don't want a global variable just flying around if I can help it.
So the hidden column with the value has a class name that I use as a slector(class ="hidden").
So I am wondering how could I do a search to filter down to only table cells that have this class name, has the exact value(say 55 that I can use from the hidden textbox).
I was thinking of using jquery contains but that might get stuff that might have that number. I want an exact match.
I'd suggest:
$('td.hidden:contains("55")')
This will find any td of class 'hidden' that contains the string '55', this is slightly problematic since it will also match the string '555', '055' etc.
Edited to refine the above a little, to make it specific to the required value:
$('td.hidden:contains("55")').filter(
function(){
return $(this).text() == '55';
}).closest('tr').addClass('highlight');
JS Fiddle demo.
Revised JS Fiddle demo, allowing searching.
While filter() would work perfectly well without the :contains() pseudo-selector I retained the :contains() in order to reduce the number of elements that jQuery has to work through.
References:
:contains().
filter().
Well, something like
$('body').find('.hidden').filter(function(elem) { ... } ).remove();
with whatever appropriate test in ....
Related
Say I want to put a button in an HTML table that gives me the value of the neighbor cell upon clicking it.
I have this sample JQuery code: console.log($(this).parent().parent().children('.name-cell').get(0).innerText);
In which $(this) is a button in a table cell, the rest of the line gets a neighbor cell with a specific class name name-cell and returns its value or text.
This one works but since I'm new to JS I don't know if it's the correct way to do it since it looks very clumsy.
Is there any other way I'm not aware of?
JQuery .siblings() is what you need
$(this).siblings('.name-cell').text();
I want to add empty data row. My requirement is like columns are dynamic. I have tried using dtInstance to add the row. it's throwing some error.
here is the link
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-gvfose?file=app/app.component.ts
Please let me know if more details required.
I dont think that's possible with Angular-datatables out of the box, but you can use Angular-xeditable to achieve that as in this question. A better way to do it in my humble opinion would be, when the user clicks the 'add' button, we show a pop-up, they fill the data, we update the back-end or the reference table and rerender the table.
You gave the Data table wrong model. you are mixing between different models in your code.
I've fixed it as well adding two empty rows, make sure to align with the model defined by columnsDataObj
https://stackblitz.com/edit/how-to-replace-all-the-columns-dynamically-in-data-table-zemuq2?file=app/app.component.ts
There is a simple demo for your requirement that puts the other button to save the empty column you want to access the data.
For easy to use, add DATA button that would be shown the blank row with input, the style you desire to set up the CSS and don't forgot the CSS scope for your by Encapsulation.
DEMO
If the operation field is superfluous, rid it off and place the event for three columns after entering with your logical condition.
Annoying Button
The add DATA could be replaced with the below code, setup the life hook instead for insert the method in the constructor.
ngAfterViewInit (){
this.addData();
}
I have tried many things but none seem to work.
What I am trying to do is create a database that will store serial numbers for all the stock I receive, I can get the basic functions to work.
Within the HTML I have a Javascript function that adds extra serial number fields according to the qty input.
My only problem is that when I add another product field to the table and change its qty field, it adds the extra fields to all of the serial number cells.
All I need is help with finding the right selector for the next div with the class ".serials".
jsFiddle:
http://jsfiddle.net/AvKRW/10/
$(".serials").append("<input type='text' name='serial[]' id='serial-number' /><br />");
The issue is that you are finding all elements with the specified class and appending to all of them.
Are you looking for:
$(".serials").last ()
Alternatively you could use
$(".serials").eq (INDEX)
The latter should enable you to append to only one of the serial boxes based on index.
It appears that parsing the dom tree of html elements would allow you to filter your selection of html elements to just the few you require. please see changes I have made to your jsfiddle:
http://jsfiddle.net/AvKRW/7/
I am following this example http://directwebremoting.org-demo/reverseajax/peopleTable.html
Here it is adding the rows to the end of the table.
But my requirements is i have to add at the top. Every new row should be a first row.
please help me, i was struggling since 2days to get it out.But No use.
Thanks in advance.
It seems that addRows is only adding at the top.
The quickest solution would be to call [in Java] the Util.setValue [after the Util.AddRow] and pass an id of an hidden HTML element. I suggest to use something like current timestamp so it will change byt itselft. This is the method inside Util.Java [have a look at the DWR sources]:
public static void setValue(String elementId, Object value)
Then in javascript you can "watch" for changes in the hidden field and in case push the last row in the first position.
Otherwise if you want to have a cleaner solution without the hidden field, you would have to override the addRows in JS but then one day you want also to add the row ad the end...
But I guess that the solution with the hidden field is fairly simpler
I'm trying to implement 2 things:
Adding edittype:'password' to one of my columns so I will be able to see *** instead of the actual value itself. The problem here is that I see *** only when I edit the row, but when I select another row, I save the old row, and disable it from editing mode, but now when it's not an input I can see the actual value - so it's like I never used password input. What do I need to do in order to see the value as password also when I'm not in edit mode??
I want to condition the password column not to be on all rows of this column, is that possible to do? I want to check another value from the row and only if it equals a certain value I want to set the field as password, and if it's not equals to leave it as a regular field. How can this be done?
1) When you select another row and change the old row to disable edit mode, replace all characters in the textbox with a '*' after saving the row. Since it's saved you don't need to maintain the value since it's not an input anymore.
2) use jquery selectors to selectively place the password attribute based on the value of the other row, also selected using a jquery selector. Since it seems like a grid you are working with all cells should have a unique identifier to use for selection.
The conditioning of the column would probably be easiest to set after rendering. Without having more information about the grid layout and specifics about the columns some of this is guess work.