Ive got a problem to solve. With .append() I do add new rows which have input fields. But the problem is, that after appending new rows no methods work on them. No methods like search, responsive button etc.
I tried a lot but I couldnt figure it out...After clicking on a button a new Row gets added to the #table.
var poAddRowTable = $('#table').DataTable();
$('button').on('click', function () {
addRowFunc(true)
});
addRowFunc = function () {
var previousRow = $('#table tr:last');
var newRow = $(previousRow).clone(true, true);
$('#table tbody').append(newRow);
$("html, body").scrollTop($(document).height());
}
You should consider to use DataTable.row.add() for adding a new row to the data table.
Your addRowFunc should be updated like this
addRowFunc = function () {
// Clone data from last row
var lastRow = $('#table tr:last');
var newRowdata = [];
$('#table tr:last').find('td').each(function() {
newRowdata.push($(this).text());
});
// Add new row to table
poAddRowTable.row.add(newRowdata).draw();
$("html, body").scrollTop($(document).height());
}
I guess you have to refresh your table after appending, the following link can help :
How to refresh a simple Datatables table when adding new rows with jQuery
Related
I have multiple table (tbUser, tbRole, tbJob) and i want to make my code simple.
this is what i done before:
var userTable = $('#tbUser').DataTable();
var roleTable = $('#tbRole').DataTable();
var jobTable = $('#tbJob').DataTable();
Each tables has different options, columns and have one thing in common has column [action] to put View/Edit/Remove button. Is there a simple way to do jquery event click action button in each table.
This is my code:
$('#tbUser tbody').on('click', '#btn_edit', function (e) {
let index = $(this).parents('tr');
let data = userTable.row(index).data();
/** Something */
});
/** REPEAT EACH TABLE */
and I've tried :
$('table tbody').on('click', '#btn_edit', function (e) {
let index = $(this).parents('tr');
let data = userTable.row(index).data(); //===> But how to change table dynamicly on this line
/** Something */
});
Firstly your edit button needs to be targetted using a class not an ID, otherwise it will only ever find the first button.
Create an object that holds a reference to each of your tables. I'm using the table id as the key, and the instantiated datatable as the value.
const tables = {
tbUser: userTable,
tbRole: roleTable,
tbJob: jobTable
}
Then with your button click, identify which table it is part of and use that to grab the table instantiation from the object you created earlier
$('table tbody').on('click', '.btn_edit', function (e) {
const tableId = this.closest('table').id;
const datatable = tables[tableId];
const index = $(this).parents('tr');
const data = datatable.row(index).data();
/** Something */
});
I created a html table and filled it dynamically. So I want to alert the data inside a cell of the table when i clicked it. Here is the code for the table
JSP
<table id="load-opt"></table>
I'm filling the data inside dynamically like this
var fillTable = function($element, data) {
var t_head = $("<tr></tr>");
for(var ind=0; ind<data.length; ind++) {
//name is the name and desc is the description for each option
var $option = $("<tr></tr>");
$option.html("<td>"+name+"</td><td>"+desc+"</td>");
}
};
I tried this but it's not working, it's giving "undefined".
var choice = $('table#load-opt tr td');
choice.click(function(){
alert(choice); // also tried alerting choice.textContent, choice.innerHTML and choice.firstChild
});
you are actually trying to alert the 'td' object not value of from that object so you can use following to solve the query.Here i am using on instead of direct click function because of dynamically added data.
var choice = $('table#load-opt tr td');
choice.on('click', function(){
alert($(this).text());
});
You can use $(this).text() to fetch the data in table cell.
This is a link.
I found posts with similar titles but I still cannot resolve my issue. Definitely I am doing something wrong.
In Kendo grid configuration have some function which take context (grid) and read selected row:
change: function (e) {
refresh(this);
}
This is how I configured "change" event.
In function "refresh(grid)" I am getting selected row on following way:
refresh: function (grid) {
var selectedRows = grid.select();
var selectedRow = grid.dataItem(selectedRows[0]);
var id = selectedRow.Id;
}
This approach works perfect when I select grid row manually. But when I select row programatically "selectedRow" variable is null.
I am selecting programatically on following way:
var grid = $("#grid").data("kendoGrid");
var rows = grid.dataSource.data();
var row = rows[rows.length - 1];
grid.select(row);
As I sad in above, in previous "refresh(grid)" method variable selectedRow will be null.
Does anybody have some opinion about that? Why is it happened?
Thanks
According to the Grid documentation the "select" method accepts "string" parameter (selector) or jQuery element. That why if you need to correctly select the row you should modify your current code as follows:
var grid = $("#grid").data("kendoGrid");
//if you are using the "pageable" option of the grid
//you should get the visible rows using the .view() method
var models = grid.dataSource.data();
var model = models[models.length - 1];
var lastRowUid = model.uid;
//find the target row element:
var row = grid.table.find("[data-uid=" + lastRowUid + "]");
grid.select(row);
I need to get the row id or index of user selected rows from jquery datatables without using the TableTool. Once I get the indexes or the Ids, I will use them to select these rows after the user comes back to the same page. How do I get the row Id or index of the select rows? Many thanks !
JSP code:
// when a row is selected, I want to get the row id or index
$('#userTable tbody tr').on('click', function()
{
var oTable = $('#userTable').dataTable();
var data = oTable.fnGetData(this);
selectedRowId = data[4];
alert(selectedRowId); // this printed "undefined"
var rowIndex = oTable.row(this).index();
alert(rowIndex); // this alert didn't even get invoked.
});
var rowIndex = oTable.row(this).index();
The above will work but you have to use:
var oTable = $('#userTable').DataTable();
which will return the API and should allow you to use row(this).index()
Instead Of:
var oTable = $('#userTable').dataTable();
However without seeing a working copy of the code (JSFiddle maybe) I am unsure why the fnGetData() is not working.
I am using JS to append array data to a table.
I am trying to add a button that removes the appended data, and puts its own data in instead. I can get the data to be added, but I cant get the data removed.
I have tried these with no luck -
.children().last().remove();
&
.removeChild() ;
I have a fiddle but I cant get the original data remove when new added (button now works! -thanks) - http://jsfiddle.net/2waZ2/37/
What code do I add so when the new line from the array is added the old data is removed?
Code to append on load:
var row = document.createElement('tr');
row.innerHTML = displayArrayAsTable(QR4, 24, 25);
document.getElementById('mytable').appendChild( row ) ;
Button code to add data:
function addNewRow() {
var row = document.createElement('tr');
row.innerHTML = displayArrayAsTable(QR4L, 24, 25);
document.getElementById('mytable').appendChild( row ) ;
}
http://jsfiddle.net/2waZ2/47/
Removing the 1st child row:
var table = document.getElementById('mytable');
table.removeChild(table.children[1])
I have updated the fiddle and it works fine now.
You can use something like this before adding the new row:
var last = document.getElementById('mytable').lastChild ;
document.getElementById('mytable').removeChild(last);
A trivial answer with jQuery: http://jsfiddle.net/guard/2waZ2/48/