I have a legacy DataTable that has a range of hidden columns that the user can show, then edit the cell via editable, then hide again.
each cell has a hidden text input which editable populates when the value changes. I have foudn that in datatables 1.9.4 i can
var r = oTable.$('tr');
//loop through datatables rows
for (var i = 0; i < r.length; i++) {
//get current rows data
var c = r[i];
if (i === 0) {
//convert to jQuery object
jc = jQ(c);
var changed = jc.find('.rowChanged').val();
}
}
which gets me the current live data but only for columns that are showing.
I tried oTable.fnGetData(c) passing the current row but this give me the initial starting html for each cell and not the live html (some inputs may have changed)
is there a way to return a jQuery object similar to the oTable.$() api call that contains the entire rows live data and not just the visible rows?
i solved this by showing all columns, grabbing the data using the oTable.$('tr') and then hide the relevant columns again.
Related
I'm using datatables plugin to create a datatable. I've put a button to add new rows. The new inserted row can be anywhere depends on which column the table is sorted by. I need to set an event to the button inside the row once it is inserted. So I have to get the last inserted row to do so. But I can't find a way. I've tried below but it's not working. index() does not returning exact index where the row really is.
var row = table.row.add({...});
row.draw();
var tr = $('#datatable tbody tr').get(row.index());
Please help. Your answer is kindly appreciated and thank you in advance.
Take length of table and -1 and that number is the index of last
tr
var lastRowIndex = $('#datatable tr').length -1;
New rows will be appended onto the end of the row list, so you can do something like this
table.row(table.rows().count()-1)
See fiddle here.
Can't find a way to this using any plugin's provided function. But thank God there's a workaround.
Flag the inserted row in column rendering function. For example, I append a tag
datatable = $('#datatable').DataTable({columns : [{render : function(){... <last/> ...}}]});
On inserting new row, insert it with a data that indicate the flag inclusion. Get the row by the flag. And then remove the flag.
datatable.row.add({...}).draw();
var row = $('last').parents('tr');
$('last').remove();
For any other case which don't need to edit the <tr> explicitly, get the index of last inserted row. Get the datatable row and update the data. Set column render function to render the updated row accordingly.
var i = datatable.rows().count() - 1;
var data = datatable.row(i).data();
datatable.row(i).data(changeSomething(data)).draw();
And to remove the row
datatable.row(i).remove().draw();
i'm using wenzhixin bootstrap table, and I have a lot of tables in the same page and one button, and when the button is clicked i want to gather all the selected rows from all the different tables.
so,
in my JS code i did: (Ids is an array with all the tables IDs)
for (var i = 0; i < Ids.length; i++)
{
var domain = $.map($('#' + Ids[i] + '').bootstrapTable('getSelections'), function (row)
{
// do something with row object...
});
}
but it's not working...
please help!
it was my mistake, as some of the id's contain a vertical bar character | and it is not a valid character for id in JavaScript. the $.map function returned an error because of the id with the vertical bar.
Here is the scenario:
User clicks on a button and can add new row in table.
Select a value from any of the row and few fields will be added in only that row. It works fine.
But problem is here: When user again selects any different rows it append the cells in rows, but I want to delete the previous cells and add new selected cells. I am not able to do that.
I tried with deleteCell() but did not find required solution. here is the whole code. If any one could help please.
Another problem with code is when I run it the first time it does not count first row number.
for (i = 0; i < selectedvalue; i++) {
var x = Row.insertCell(-1);
x.innerHTML = "<td><select><option value=3>3</option><option value=4>4</option><option value=5>5</option><option value=6>6</option></select></td> </tr>";
}
Try this:
http://codepen.io/anon/pen/yeZrov?editors=1010
jQuery('#myTable tr').eq(rownum).find("td:gt(3)").remove();
I'm currently testing wijmo5. One thing I would like to do is after a FlexGrid is loaded, I would like to reload the grid with different columns. Note that I don't want to just hide columns. I want to actually load completely different columns. I've tried calling initialize again with the different desired columns, but that only appends the columns and causes duplicate columns to show up.
The secret here is to prevent the grid from creating the columns for you automatically. You can do that by setting the "autoGenerateColumns" property to false.
This fiddle shows how you can select a set of columns to display on command:
http://jsfiddle.net/Wijmo5/djL2ouk1/
The interesting code is the "showColumns" function which is implemented as follows:
// show the specified columns in the grid
$scope.showColumns = function(cols) {
$scope.flex.columns.clear();
cols = cols.split(',');
for (i = 0; i < cols.length; i++) {
var c = new wijmo.grid.Column();
c.binding = cols[i];
$scope.flex.columns.push(c)
}
}
I hope this helps.
I have a HTML table in which a few td's are fixed and the rest are dynamic. So as of now (when all fields are static), the table looks like this
label1 tb1 | label2 tb2 | label3 tb3 | label4 tb4
Label Names and corresponding textbox values would both be dynamic.I have fetched the dynamic values from the table and stored them in a Javascript array. I now need to display those stored values by appending them to the static table present above.
But there's a condition in this. The dynamic fields need to be appended at a specific position. They need to be added after tb3.
Since one row can contain max of 4 elements, so any additional fields need to be pushed to next row. For Eg: If I get 3 dynamic td's from the database, then the new table needs to look like
label1 tb1 |label2 tb2 |label 3 tb3 |dynalabel1 dynatb1
dynalabel2 dynatb2 |dynalabel3 dynatb3 |label4 tb4
The label 4 and its value is a static component and so needs to be pushed to the end.
I have searched a lot but i can't find HTML column creation at a specific location.
I have tried to insert the dynamic fields in the table using JS, but they don't generate at the desired position.
Here the code i have written
var table = document.getElementById("myTable");
for(var i = 0; i < val ; i++){
// val is the number of td's needed
var td1 = document.getElementById('td1'); // get id of tb3
var text = document.createTextNode("some text");
td1.appendChild(text);
table.appendChild(td1);
var newField = document.createElement('input');
newField.setAttribute('type', 'text');
var newTd = document.createElement('td');
newTd.appendChild(newField);
var newTr = document.createElement('tr');
newTr.appendChild(newTd);
table.appendChild(newTr);
}
The above code generates the textboxes and the label "Some text", but not at the desired position. Can anyone please suggest how to go about solving this.
[edited]
$('<td>new cell</td>').insertAfter('table tr td:nth-child(3)')
[previous answer]
You could always do it the dirty way...
$('<tr><td>one</td><td>two</td><td>three</td></tr>').insertAfter('table tr:nth-child(3)')