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
Related
How can I create extra cells in my Excel export? I use groupHeaderDownload, this works but it only generates a string in the first column in the Excel sheet.
I am searching for a way to generate an extra cell, and an extra row.
I tried to pass arrays and an object but everything gets transformed to a single string.
Example:
groupHeaderDownload: function(value, count, data, group){
return [{ Nr:data[0].nr},{ Description:data[0].om}];
},
If you want to add extra rows of data to your download then i would suggest that you add them to your table using the addRow function before your then trigger the download function, you could then remove it after if you dont want it available generally:
var row = table.addRow({name:"Billy Bob", age:"12"}, true); //add new row to the top of the table
table.download("xlsx", "data.xlsx"); //download table
row.delete(); //remove row after download
If you want a column to only show up in a download then in the columns definition you should set the visible option to false and the download option to true, which will cause the column to only show up in downloads:
{title:"Example", field:"example", visible:false, download:true},
Im writing a small google script for an excel sheet which appends a row on a POST request: depending on the POST parameters I either append the row to the end, or I insert it in between rows.
One of the columns of the is actually a boolean that Im trying to represent as a checkbox.
The problem is when I try to append a row
sheet.appendRow([e.parameter.parameter1, e.parameter.parameter2, "FALSE"]);
It simply writes false in that column.
On the other hand when I insert a row in between other rows:
sheet.insertRows(position);
sheet.getRange("A" + (position)).setValue(e.parameter.parameter1);
sheet.getRange("B" + (position)).setValue(e.parameter.parameter2);
sheet.getRange("C" + (position)).setValue("FALSE");
The checkbox column (takes the format from the surrounding rows?) and becomes a checkbox.
Is there a simple solution to append a row with a column as a checkbox?
Thank you.
You need to create a checkbox first with data validation
Sample:
var checkbox = SpreadsheetApp.newDataValidation().requireCheckbox().build();
sheet.getRange("C" + (position)).setDataValidation(checkbox).setValue("FALSE");
I'm using the Tabulator javascript table:
http://tabulator.info/docs/4.3/print
Is there a way to just print selected rows:
var table = new Tabulator("#example-table", {
printAsHtml:true, //enable html table printing
printVisibleRows:false, // print all rows in the table
});
What i am looking for is an option like "printSelectedRows: true) or some sort of work-around i can use to accomplish this.
There is no such option. One work around I can think of is a filter that results in only the rows you want being visible and not using printVisibleRows:false. Then only those rows would print. This of course depends on the row selection having some common element. For ad-hoc selection work around's I can think of are:
1) Moveable rows:
http://tabulator.info/docs/4.3/move#rows
Move the rows you want to the visible part of the table.
2) Move between tables:
Move rows to another table for printing.
http://tabulator.info/docs/4.3/move#rows-table
I have two tables that are placed side by side and i would to append selected row on the first table to the second tab
i managed to get the data from a selected row and convert it to an array. I tried using the v-bind tag to bind the data values in the second table and its not working
I expect to click a row in a table and that row is added to another table that is just placed on the side of the other table
What I understood from you question is that you are looking for a jquery code that makes the rows from the two tables to move from one table to the other whenever the user clicks on a row in any of the tables.
for example if you click on a row in first table, it moves to the second table and if you click on a row in second table, it moves to the first table.
if it is so, then the jquery code could be:
// identify the two tables with IDs for easier access
var tbl1=$('#table_1_id'), tbl2=$('#table_2_id');
// use tbody selector to make sure that you don't bind this event to table heading rows
$('#table_1_id,#table_2_id').find('tbody tr').on('click', moveRow);
function moveRow() {
// find on which table this row is
var row = $(this);
var table_current = row.closest('table');
// If current table ID equals to first table ID then it means we are in first table
if (table_current.prop('id')==tbl1.prop('id')) {
// Then we move the row to second table
tbl2.find('tbody').append(row);
} else {
// The row was in second table so we move it to first table
tbl1.find('tbody').append(row);
}
return;
}
I would like to append a row that should be the last row of the table. In my code it appears to work the first time a row is added dynamically. But It doesn't become the last row when other rows are added.
I always want the "subtot" row to be the last row but when I append other rows it doesn't change to be the last row. It stays where it is even though other rows are appended.
//make sure that subtot is only appended once
if($('.subtot').length < 1){
$('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>').insertAfter('table tbody>tr:last');
}
you have to scroll down the jsfiddle a bit to see the code.
Thank you
Every time you add new row to the table run following code.
$('table').find('.subtot').detach().appendTo('table');
replace 'table' with any selector that identify table element. What it does is it will remove subtot row from table and append it back to the table. By that you can always be sure that subtot is always the last row.
To insert a whole new row, but you have to remember the implicitly inserted <tbody element
So how about
$('.tableClass > tbody').append('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>');
to keep it sticky at the bottom, after adding any other rows run
$('.tableClass').find('.subtot').detach();
$('.tableClass > tbody').append('<tr class = "subtot"><td></td><td></td><td></td><td>test</td></tr>');