X-Editable javascript - javascript

I am using this plugin called X-Editable.
A little stuck on how to accomplish this so I figured I would see if anyone else has used it or knows what to do.
Here is what my Page looks like:
screenshot http://imageshack.us/a/img850/4817/yko7.png
You can simply click on the text and it will allow you to edit it right there and there.
Now, as my end result, all I am trying to do is get the values from each of the rows but cant seem to figure it out.
Per the doc, I set my code up like the section here: "Creating new record". I just dont know how to get the values or the object when I click on my button.
Anyone had any experience with this?

Here you go.
http://jsfiddle.net/8vTPL/1/
This should at least get you going in the right direction. This example uses basic jQuery concepts to loop through collections. In your case, you want to loop through all of your table rows (line 7):
$('#tbl_values tbody tr').each(function(ix,obj...
get the id of each row/record (line 8):
$(obj).attr('id')
then loop through each table-data and x-editable element per that row (line 9):
$(obj).children('td').children('.editable').each(function(e_ix,e_obj...
get the id of each column/field (line 10):
$(e_obj).attr('id')
and get the value of each x-editable element in the row (line 11):
$(e_obj).editable('getValue')[$(e_obj).attr('id')]
Alternatively, you could just get the object that X-editable stores as the value:
$(e_obj).editable('getValue')
Hope this helps.

Related

get all rows of a pagination table

I'm using datatable in bootstrap4 and I've a pagination table (10 itens per pag).
I made a function to get values in table, but
when I tring to get all rows values, I've one problem because I only get the values show in a screen.
I tryed used in js ,
document.getElementById("myTable).tBodies[0].rows;
and tried Jquery
but always I get only the values in screen.
Has anyone had such a problem?
I used
$('#table').DataTable().data().row() ;
and it works but when I iterate this bring me a values like a "innerHTML" but I have functions in a rows(), so I need get values like a "innerText" because this is a values show in screen.
Thanks guys, I appreciate your help.

How to add empty data row in Datatable using angular2+?

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();
}

Mottie jQuery Tablesorter reset button inside table header

I'm using Mottie's Tablesorter, and it's ideal for what I need!
However I can't figure out how (or if it's even possible) to put the "reset search" button inside one of the table headers (where a filter would usually be).
I have a jsfiddle here of it working with the reset button outside of the table: http://jsfiddle.net/OPSJono/1dpd1a6y/4/
This is the part of the JS that determines what goes into the filter table header row. But I can't seem to find a way to put a button in there.
This code currently returns nothing into that cell (as filter_reset doesn't exist)
6: function ($cell, indx) {
return $.filter_reset;
}
However I would like the reset button inside the "actions" header.
I've looked around and can't find anyone else who's put the reset button inside of a filter header before.
Any help or a point in the right direction would be appreciated!
Through trial and error I found a way to do it!!
6 : function($cell, indx) {
return $cell.html('<button type="button" class="reset">Reset Search</button>');
}
Just returning HTML code into the Cell.
Seems pretty obvious now that I've figured it out!

jqgrid hide() row issue

I'm using latest version of JqGrid, and I've learned here that there is now build-in hding method. I figured out how to hide rows using
$("#"+rowid).hide();
But here I faced the very big issue. My jgrid is limited to display not more than 10 rows per page, and often happen that after using the above code, my items starting to be displayed at i.e. 10th page.
Thanks in advance .
The hide method is not part of jqGrid, but rather is part of jQuery itself:
Hide the matched elements.
So that probably explains why it is not working the way you expect. What exactly are you trying to do?
jqgrid allows to delete rows. See "Live data manipulation - Delete row" example on examples page.
$("#dedata").click(function() {
var gr = jQuery("#delgrid").jqGrid('getGridParam','selrow');
if( gr != null )
jQuery("#delgrid").jqGrid('delGridRow',gr,{reloadAfterSubmit:false});
else
alert("Please Select Row to delete!");
});
See also delGridRow method documentation.
Another option is to change data source (it depends on method was used for filling the table), delete rows from it and re-fill the table.

Find exact value with jquery or javascript?

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 ....

Categories