Could you please tell me how to update the selected row in the jquery data tables?
In the below code I am trying to set a cell. Looks like it is set but not reflecting in the table.
var datatable = $('#table').DataTable();
datatable.row('.selected').cell(':eq(1)').data("1234");
alert(datatable.row('.selected').cell(':eq(1)').data());
Here able to alert the changed value but the same is not reflecting in the data table UI. Can you help me?
Official documentation
draw() Since: DataTables 1.10 Redraw the table.
Description When you perform an action such as adding or deleting a
row, changing the sorting, filtering or paging characteristics of the
table you'll want DataTables to update the display to reflect these
changes. This function is provided for that purpose.
your code is correct but datatables won't apply changes automatically, just call the draw() function.
datatable.row('.selected').cell(':eq(1)').data('123').draw();
You have to redraw the table using .draw() method as mentioned in the documentation of cell().data() method:
Note that when used as a setter, this method sets the data to apply to the table, storing it in the data source array or object for the row, but does not update the table's internal caches of the data (i.e. the search and order cache) until the draw() method is called.
datatable.row('.selected').cell(':eq(1)').data("1234").draw();
Check the documentation
For me, this was the solution:
var t = $('#myTable').DataTable();
t.cell('.selectedRow', ':eq(0)').data('something data');
t.cell('.selectedRow', ':eq(1)').data('something data');
t.cell('.selectedRow', ':eq(2)').data('something data');
t.draw();
// selectedRowIndex should be global
var selectedRowIndex = oTable.row(this).index();
// At the time of updating data in the selected row, do this
oTable.cell(selectedRowIndex,2).data("xyz"); // where 2 is the cell index
// it will reflect the data in the grid. :)
https://datatables.net/reference/api/row().index()
Related
I am trying to figure out a way to fetch only the filtered values from a table if a filter is active in Office-JS API.
Right now the only way I have figured to fetch all the table data is from the table range values property:
var table = tables.getItemAt(0);
var tableRange = table.getRange();
tableRange.load("values");
ctx.sync().then(function () {
// This returns all the values from the table, and not only the visible data
var values = tableRange.values;
});
Any ideas on how I can proceed to fetch only the visible values from the table if a filter is active?
From previous experience with Office Interop I have achieved the same by looping through the different Areas of the table range, but I am unable to find the equivalent to Areas in Office-JS.
The upcoming next wave of features as part of Excel JS APIs 1.3 will include a new object "RangeView" that allows you to read only the visible values off the Range object.
Here's a link to the open spec on GitHub - https://github.com/OfficeDev/office-js-docs/tree/ExcelJs_1.3_OpenSpec/excel.
Note that this isn't available just yet, but will be in the near future.
Usage for your case off a table would look like this:
var table = tables.getItemAt(0);
var visibleView = table.getRange().getVisibleView();
ctx.load(visibleView);
ctx.sync().then(function () {
var values = visibleView.values;
});
One way to get only filtered data is through the Binding.getDataAsync method, which takes a filterType parameter.
Office.select("bindings#myTableBinding1").getDataAsync({
coercionType: "table",
filterType: "onlyVisible"
},function(asyncResult){
var values = (asyncResult.value.rows);
});
This code assumes you have already created a binding to the table. If not, you can run the following code first, which uses the table name to call Bindings.addFromNamedItemAsync:
Office.context.document.bindings.addFromNamedItemAsync("Table1","table",{
id: "myTableBinding1"
},function(asyncResult){
// handle errors and call code sample #1
});
Note that the solution above is supported as far back as Excel 2013 because it uses the shared APIs. The Excel-specific API set doesn't yet have the capability to return only unfiltered data.
-Michael Saunders, PM for Office add-ins
I have a jquery datatable which has large number of data. I am performing an action that selected(checkbox checked) rows will only be binded inside it. Now I have to reset the jquery datatable i.e all the records should be displayed again. So what should be the approach? whether I need to store data into global variable and then clear it and assign this data again to Datatable or some another approach.
////////// on document.ready/////////
$('#mytable').DataTable();
GlobalTable = $('#mytable').DataTable();
GlobalTab = GlobalTable.data();
/////////the below code is for Binding the data again/////////
var table = $('#mytable').DataTable();
table.clear().draw();
for (i = 0; i < GlobalTab.toArray().length; i++) {
table.row.add(GlobalTab.toArray()[i]).draw();
}
table.draw();
These above lines I have tried which is not working properly as expected.
I'm not sure what was not working about your code (couldn't reproduce with your snippets), but I can suggest a couple of things:
Store only the data in the variables: GlobalTab = GlobalTable.data().toArray()
You do not need to redraw after clearing the table, or after adding each row, you only need to redraw when you are finished changing the data
You don't need to iterate over the rows, you can add them all in a single call
So to bind the data again you would do something like:
var table = $('#mytable').DataTable();
table.clear();
table.rows.add(GlobalTable);
table.draw();
You can see a working example in this jsfiddle
Tried to remove rows using following method
table.DataTable().row().remove().draw();
I tried add using the following methods
1) table.dataTable().fnAddData(jsonObject);
2) table.DataTable().row.add(jsonObject).draw();
Add is not working, it is removing the old data and again after redraw it is showing old data in that row.
At first i am making ajax call and fetching data from database after that i need to add data in client side without making ajax call.
this.updateTableandMap=function(jsonObject){
if(jsonObject!=null){
var curTimeStamp=$('tr#'+jsonObject.trackeeId+'>td:eq(0)>a').attr('data-date-time-stamp');
if(jsonObject.dateAndTime>curTimeStamp){
$('#records-short').DataTable().row( $('#records-short>tbody>tr#'+jsonObject.trackeeId+'')).remove().draw();
// $('#records-short').DataTable().row.data(jsonObject).draw();
// $('#records-short').dataTable().fnAddData(jsonObject);
}else if(curTimeStamp==undefined){
$('#records-short').DataTable().row( $('#records-short>tbody>tr#'+jsonObject.trackeeId+'')).remove().draw();
$('#records-short>tbody>tr#'+jsonObject.trackeeId+'').remove();
$('#records-short').DataTable().row.add(jsonObject).draw();
}
}
};
you can try this way in your script
var row = $(this).closest('tr');
$('.dataTable').dataTable().fnDeleteRow(row);
I'm a newbie to Knockout.js. I implemented the Knockout.js by loading data from ajax source and use foreach loop to create a table of the data. The tutorial i followed is here
http://www.dotnetcurry.com/ShowArticle.aspx?ID=933
My issue here is, due to the nature of my application, I find that the first load is better served from the server side using a grid component and I only want Knockout.js to take care of "Add" row, "Update" a row and "delete" a row.
My question is,
1) how do I replace the "first" load and populate the lookupCollection :ko.observableArray() in the article with the default data in the html table?
2) Related to #1. If the first load, the table layout with data is constructed from the server side, then how do I bind "foreach" to the grid so "add" can be performed on lookupCollection?
Thanks and again, I'm a newbie, I must be missing some key concepts here.
One way would be to pass your initial data into your view model. Since you are using asp.net it would look something like this:
//Dump raw data into javascript variable
var data = #Html.Raw(ViewBag.Data);
function ViewModel(data) {
var self = this;
//Unpack raw data
self.lookupCollection = ko.observableArray(data.lookupCollection);
}
//initialize view model
var viewModel = new ViewModel(data);
ko.applyBindings(viewModel);
I hope I am describing my issue enough.. here goes:
I have a YUI data table, get a server side set of records via JSON, and then populates the data.
Users can click on the headers to sort the data in three of the 6 columns, (which are using a custom sort function for each column). The sorting is done client-side.
When a user sorts the data, I need to be able to get a complete list of the values from one of the columns being shown. I need all the data available, not just what's rendered to the page. The data hidden via pagination must be included.
Any ideas? I've tried the handleDataReturnPayload and doBeforeLoadData methods of the DataTable but both give the original, unsorted data.
I'm really stuck here and I've got a client depending on a feature that depends on me getting this sorted list.
Thanks in advance.
Satyam, over at the YUI Forums answered my question perfectly.
The data is actually stored in the
RecordSet. At any time you can go and
look at it, and it will be sorted as
shown on the screen, but it will have
all the data, whether shown or not.
Method getRecordset() will give you a
reference to it and then you can loop
through its records.
You can listen to the columnSortEvent
to be notified a sort has occurred.
I just subscribed to the columnSortEvent event and looped through the array returned by datatable.getRecordSet().getRecords().
I'd recommend posting this to the YUI forums -- http://yuilibrary.com/forum/ -- that's a great place to get support on DataTable issues.
I stumbled upon this question looking for information on how to retrieve information from a dataset that was NOT displayed in the datatable. IF you place the hidden data in the datasource before any field you wish to be displayed, it will be rendered blank, but if you place it after your last field that will be rendered (as defined by the columns object), then they will not render but still be accessible through the record).
var columns = [
{key:"Whatchamacallits", children:[
{key:"name" },
{key:"price" }
]}
];
var ds = new YAHOO.util.DataSource('index.php...');
oDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
oDataSource.responseSchema = {
fields:["name","price","id"]
};
var dt = new YAHOO.widget.DataTable("dt-id", columns, ds, {});
dt.subscribe("rowClickEvent", dt.onEventSelectRow);
dt.subscribe("rowSelectEvent", function(p){ alert(p.getData('id'); });