I have a datatable with data loaded by AJAX. I want to modify it, so when the users visit mypage/ the datatable would highlight the according row and move it to the top of the table. I've already achieved highlighting the row with this code:
"rowCallback": function( row, data, index ) {
if ( data.id == given_id ) {
$(row).addClass('success');
console.log(index);
}
}
and it works, but the problem appears when this row is on, say, 10th page. The datatables displays only first page when user enters the webpage. I want to programatically change the pagination to desired page or move the row to the top of the table, so when the user enters he would see 'his' row on the top. How to achieve this?
I've fixed my problem. The solution was as follows:
I've added additional <th> in the html table structure.
Then I've added the following code in the datatable rendering code:
var table = $("#table_placeholder").dataTable( {
"ajax": Routing.generate('myAjaxUrl'),
"columns": [
{
"visible": false,
"data":"user_id",
"render": function ( data, type, full, meta ) {
return data == displayUserId ? 1 : 0;
}
},
//-rest of the code-
where the user_id is the id imported from the database and displayUserId is the ID that has been passed via url argument and stored in a hidden html input.
I've added the following lines at the end of the datatable rendering code:
"rowCallback": function( row, data, index ) {
if ( data.user_id == displayUserId ) {
$(row).addClass('highlighted-row');
console.log(index);
}
},
"order":[[0,'desc']]
The rowCallback function allows me to highlight the row and then I user order on the hidden column from 2. This brings the desired row to the top.
Might be worth adding a timestamp column, and ordering by it on select,
Or you could get the sortid of the top row, increment all sortid's in your database, then inserting your new row and setting its sortid to the one that old top row had previously.
Related
I have a table generated by open data tables it generates perfectly. I need to isolate the last four cells on each row, store those values in a variable, and then make a link using the text in each cell (url + “/“ + text variable + “>” text variable + “</a>”). This link will be unique to each cell and needs to overwrite current cell text in all of last 4 cells of each row in the table. It will eventually be called on an onload event but onclick event is fine for now (testing etc). This needs to be a JavaScript function or jQuery.
I have searched for a long time trying every possible way to do this and can come close but I can’t seal the deal. Any help would be greatly appreciated. The url for the table I’m working with is: http://mak-a-key.com/wp-content/themes/theme49645/tables/table-links.html
When you create the table, you can use the callback function createdCell and modify the cell's DOM.
cellData: gives you the actual data in the current cell
rowData: gives you the actual array of data in the current row
if you need the last 4 in one, just concatenate :
rowData.nameCell2 + rowData.nameCell3.... and use it in the URL part.
Example:
$('yourTable').DataTable({
columns: [
{data: 'dataCell1'},
{data: 'dataCell2',
createdCell: function(td, cellData, rowData, row, col){
// rowData contains all information for the actual row
// cellData contains information in your actual cell
$(td).html("");
}
}
]
});
**edited to account for the zero in the sorting logic. It now works on the first row but the rows it sorts seems to be random. Maybe there is a problem accessing the right data from the selection? The row selection structure looks like this:
I have a table that is drawn according to a list of objects. When I click on the headers of my table, I want to sort the data by that column and then redraw the table. I am using array.sort and I have no errors when I click on the header, use array.sort() or redraw the table, but, it is not sorting the table correctly. It doesn't move the first row values at all and is not sorting as it should. The data element that is used to redraw the table has an array of values that match the header names so I pass the name as 'd' to the sorter function. This is what I have:
sorter(d, i) {
this.tableElements.sort(function(a, b) {
if (a.d > b.d) {
return 1;
}
if (a.d < b.d) {
return -1;
} else { return 0; }
});
console.log(this.tableElements);
this.updateTable();
Any advice would be really helpful!
My datatable by default sorting for 1 column. Dynamically I am adding row to the table, row is adding sometimes in middle of table, sometime add to 2 page .. etc because first column is name.
But I want add top of the table or last of the table. Can we do that? How?
var t = $('#tblRoster').DataTable();
t.row.add( [memberCustomerName, memberPosition,memberMasterCustomer,
memberCustomerEmail, endDate,'<a href="#" class="linkbutton
padding-left-20" id="addCancelButton">Remove</a>']).draw( false );
Position of newly added data in entirely based on the ordering condition applied to the DataTable.
Suppose you want to add Row at last of the DataTable. So you need to take following steps:
Add New Row in DataTable.
Draw DataTable with specified order.
Move the page focus to last page of the DataTable (optional).
So you can achieve it this way.
$('#AddRow').on('click', function() {
var row = ['testing', 'testing', 'testing', 'testing', 'testing', 'testing'];
table.row.add(row).draw(false);
table.order([1, 'asc']).draw();
table.page('last').draw(false);
});
Here is its Demo
How can I add another(two) child(ren) to a responsive datatable.
If the table is too narrow and I click the + button this does nothing
Any thoughts on this?
function format ( d ) {
return '<div class="player"></div>';
}
https://jsfiddle.net/v1xnj3u4/
This seems to work though it doesn't create another row as such but just adds to the created row the div you specified:
"responsive": {
"details": {
"renderer": function ( api, rowIdx ) {
// Select hidden columns for the given row
var data = api.cells(rowIdx, ':hidden').eq(0).map(function(cell){
var header = $(api.column(cell.column).header());
return $("<tr></tr>").append($("<td></td>",{
"text": header.text()+':'
})).append($("<td></td>",{
"text": api.cell( cell ).data()
})).prop('outerHTML');
}).toArray().join('');
return data ?
$('<table/>').append( data ).prop('outerHTML') + $("<div></div>", {"class":"player"}).prop('outerHTML') :
false;
}
}
},
Working example on JSFiddle, thanks for the challenge, I enjoyed learning about that ;-)
You can make (+) icon stay all the time if you make one of the columns hidden, you can create a dummy column for that purpose and use one of the Responsive plugin special classes none as 'className: 'none' for that dummy column.
In the example below I used last column for that purpose because in the row details it will also be displayed last.
Then when enumerating the columns in custom renderer you can display what you want for that column if that special column header matches some predetermined value (I used 'Extra 10' which is the header of the last column).
See this JSFiddle for demonstration.
PS: I used excellent answer and example by #annoyingmouse as a base for this answer so my vote goes to him as well.
After a long exhausting search, I have found no answer to my question anywhere. Basically I have dynamically creating a table based on inputs by a user and also inserting a row with only a button after every 4th entry in the table. What I need is for the sorting function to ignore the rows with the button and leave them in place while sorting the rest of the table. Does anyone know if this is even possible?
You don't - what to do is use DataTables fnDrawCallback to insert your fourth row on each draw. DataTables will always empty the <tbody> element on each draw, so this would be required anyway.
"fnDrawCallback": function (oSettings) { }
var rows = $('.searchResultRow');
rows.each(function (index) {
if (index == 4 || index == 9) {
var insertLearn = $("<tr></tr>").addClass("searchResultRow ");
insertLearn.append(buildCell().attr('colspan', 9).html("<img src='../img/LearnMoreAnimated_v1-1.gif' />"));
$("#results_table > tbody > tr").eq(index).after(insertLearn);
}
});
}
was how I was able to get it....thanks for the help in pointing me in the right direction.