Is there a way to delete all rows in one function call? and not by looping through all rows and deleting row by row.
Thank's In Advance.
If you mean remove all rows from the grid you can just do this..
$('#grid1').jqGrid('clearGridData');
It's depend on what you exactly mean under "deleting of all rows". The method GridUnload could be very helpful in many cases, but it delete more as only grid contain.
Another method used intern in jqGrid is:
var trf = $("#list tbody:first tr:first")[0];
$("#list tbody:first").empty().append(trf);
Probably it is what you need. It delete all grid rows excepting of the first one. You can overwrite the code also as the following
var myGrid = $("#list"); // the variable you probably have already somewhere
var gridBody = myGrid.children("tbody");
var firstRow = gridBody.children("tr.jqgfirstrow");
gridBody.empty().append(firstRow);
If you're going to remove all rows and insert grid data back, you may use $('#grid1').jqGrid('GridUnload');
Otherwise, you can use old answer suggested by Oleg
Related
How come this works:
alert(document.getElementById("tableId").rows[7].cells[7].innerHTML);
But not this:
alert($("#tableId").rows[7].cells[7].innerHTML);
For context, I had used .append to add in cells to the table, and I want to be able to manipulate each cell further in the future (such as using .data, which is why I want to use jQuery.
Alternatively, are there other ways to access the individual cells in the table? Thank you.
The former works because getElementById() returns an HTMLTableElement object which has the rows property. The latter uses a jQuery object which does not have the rows property, so you get an error.
You could solve this by retrieving the underlying Element from the jQuery object in one of two ways:
console.log($("#tableId")[0].rows[7].cells[7].innerHTML); // access by index
console.log($("#tableId").get(0).rows[7].cells[7].innerHTML); // get(0)
Alternatively you could use jQuery selectors to select the cell you want directly:
let html = $('#tableId tr:eq(7) td:eq(7)').html();
For context, I had used .append to add in cells to the table, and I want to be able to manipulate each cell further in the future
If this is the case you can save a reference to the content you add so that you can use it again without having to perform a DOM access operation. In pseudo-code it would look something like this:
let $content = $('<tr><td>Foo</td></tr').appendTo('#tableId');
// in some other function later in the page execution...
$content.find('td').text('bar').data('lorem', 'ipsum');
If you are looking to loop over each row
$('#tableId tr').each(function() {
if (!this.rowIndex) return; // to skip first row if you have heading
console.log(this.cells[0].innerHTML);
});
I have this jQuery to get the 5th column text in a table and change the text of a textbox
$('textbox').val($(e.target).closest("tr").find('td:eq(4)').text());
However, lets say another developer moved the index of the columns (Yes I could comment to say don't move around or use the correct index, but I guess this is the lazy way) then it would incorrectly select the wrong column's text. So how could I change eq(index) to use a static column name instead?
Thanks
Give the cell a class, then select by class:
$('textbox').val($(e.target).closest("tr").find('td.myClass').text());
Or to use the attribute you mentioned in comments:
$('textbox').val($(e.target).closest("tr").find('td[aria-describedby="yourValue"]').text());
An alternative approach that would not depend on any specific implementation like jqGrid would be to keep an array with the column names like:
var columnNames = [];
$('table').find('th').each (function () {
columnNames.push($(this).text().trim());
});
Then you can get an index of a column with a O(1) operation:
var index = columnNames.indexOf("Inv No");
And you can use that index in your existing expression:
$('textbox').val($(e.target).closest("tr").find('td:eq(' + index + ')').text());
This would give you the flexibility to switch to another table/grid plugin without changing the code!
Here is an example applied to HTML rendered by jqGrid:
http://jsfiddle.net/fukt548f/1/
this may help you
$('textbox').val($(e.target).closest("tr").children().eq(4).text());
I am using jQuery DataTables 1.10.3 to create a table with JSON data fetched from a web service. The data is linked to other elements on the page of my application such that when a user selects data points in one element, the DataTable should update and 'select' the complimentary rows (simply by adding the active class to the rows <tr> tag). Given the documentation, it would appear that this could be easily accomplished with something like this:
var table = $("#my-table").DataTable();
table.rows().each(function(r){
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
But this does not work, since .rows() returns an array of row indexes instead of row objects. Instead, I have implemented this:
var table = $("#my-table").DataTable();
table.rows().indexes().each(function(i){
var r = table.row(i);
if (r.data().category == 'XYZ'){
r.node().to$().addClass("active");
}
});
This works, but is incredibly slow, considering the relatively small number of records in the table (~3 seconds for 3000 rows). Is there a better way to iterate through DataTable rows that I am missing? Or is it possible to make a row selection based on data values? Are the documents incorrect about .rows() returning API objects?
Well, I found an answer to my second question:
Or is it possible to make a row selection based on data values?
var table = $("#my-table").DataTable();
table.rows(function(idx, data, node){
return data.category == 'XYZ' ? true: false;
}).nodes().to$().addClass("active");
This run almost instantly, so it handles my use case, but I'd still like to know what the best way is to iterate through rows in a more general way.
I have one table where I have 2 columns that get hidden by the dataTables api. From which when I delete a row from the table I need to pass the data in these columns via ajax so that it gets removed from the database as well..
I have been deleting my rows prior that didn't have data I need in them directly, without any issue. Now I need to change it up for this need and catch those values. Problem is no matter how I have tried to spin it one thing or another breaks.
delete_row = $(this).closest("tr").get(0);
This is what I used to catch the row I want to delete to pass it along when confirmation of deleting the row is made. And that works fine. Now I need to match the logic in creating two new vars that can be read if confirmation is made to pass through my ajax call.
Which I have tried:
var aPos = throttleTable.fnGetPosition($('td:eq(0)', delete_row));
var aData = throttleTable.fnGetData(aPos[0]);
Along with a few different spins to catch the column I want to get the data from. The above breaks the script altogether. The thought came from
var aPos = throttleTable.fnGetPosition(throttle_delete_row);
var aData = throttleTable.fnGetData(aPos[0]);
Which does work but only in returning every column in that row as a string. Which isn't desired. I would run a loop over it but that is problematic as a loop can be expensive, and also there is no distinct method of splitting the data up, as one of the values in one of the hidden columns is a CSV in it of itself. So the loop would be invalid for the need there as well if I split and delimited it by ,
So my ultimate question is, how can I break it down to get column specific?
Well, alright then. Apparently the problem was I was attempting to do to much when all I needed was the fnGetData() bit.
Turns out after playing around with whats actually going on and dumping it all into the console.log() I was able to sort out that all I truly needed to do was throttleTable.fnGetData(throttle_delete_row, 0) for sake of example, to get the hidden column(s) I seek.
$(document).ready(function() {
$('#example tbody td').click( function () {
// Get the position of the current data from the node
var aPos = oTable.fnGetPosition( this );
// Get the data array for this row
var aData = oTable.fnGetData( aPos[0] );
});
返回的都是数组，获取数组对应的下标就可以了！
I've a jqgrid and a getCell method which returns the value of a cell depending of id. It works only for the first row of the grid, in others identifyImg = false:
var ids = jQuery("#myGrid").getDataIDs();
for(var i=0;i<ids.length;i++){
var identifyImg = $('#myGrid').jqGrid('getCell', i, 'idState');
alert(identifyImg); // return false after first row
if(identifyImg == '1'){
//DO SOMETHING
}
}
the column is defined as the follow:
{name:'idState',index:'idState', width:55}
And is correctly populated with numbers. How can I solve this?
you should use
$('#myGrid').jqGrid('getCell', ids[i], 'idState');
instead of
$('#myGrid').jqGrid('getCell', i, 'idState');
I want additionally to mention that in the most cases one don't need use loop over ids returned from getDataIDs. It was a good approach in customizing of jqGrid inside of loadComplete or gridComplete in old versions of jqGrid. Now there are more better (from the performance point of view) alternatives. For example if you need to change some style or other attribute of one cell based on the content of one column you can use cellattr (see the answer, the answer, the answer, the answer or other). If you need to change some attributes of the whole row based on the content of one column you can use rowattr (see the answer). In other cases if you need to change content of the cell (not an attribute) based on the content of another cell you can use custom formatter.