Add id for rows in Datatable - javascript

I am using Datatable plugin. I am fetching data from server side. Now I want to assign unique id to each row. How do I do that?
It would be better if I can assign id from client side(by setting any option or property of datatable I guess).
Thanks.

You can do like
$('#myTable').DataTable( {
ajax: '/api/staff',
rowId: 'staffId'
} );
Here staffId is property from your data source.
Please check Document

Related

sapui5 JSON model and display in xml

I need help with setting JSON model into my main model. I have data stored in "http://localhost:9041/main-app-web/MyServiceName.svc/GetSurname?id=1&name='matt'&$format=json"
Now i want to set it into model, i'm trying
var oModelJs = new sap.ui.model.json.JSONModel("/main-app-web/MyServiceName.svc/GetSurname?id=1&name='matt'&$format=json");
this.getView().setModel(oModelJs, "model");
but it is giving me oData ={} ,
empty oData in debugger. How could i do that and then display my data eg. in table in xml?
Parameters stored in my json:
Id: "223",
MeterNumber: "1354-65498121"
Ty guys
this.getView().setModel(oModelJs, "model");
The above line of code is not needed.
Next yo have to get the table ID and set the model to the table.
this.getView().byId("tableId").setModel(oModelJs);
The way i solved this problem was adding correct items into <Table items="{/d/results}"> and in cells <Text text="{id}" /> Ty for ur response santosh.

Datatable client-side data change/redraw

I set up a datatables that initially gets from server some data and represents it, but then everything is left to the client. Some options are:
serverSide: false,
sAjaxSource: mySource,
My $.fn.DataTable.version is 1.10.2.
Then I need to change, client-side, the aaData under the table because some working on data is performed. I need to update the DT to show the client-altered temporary data without send another request to server (for two reason: prevent useless traffic and because that data is being altered).
I am looking for a way to edit the underlying DT databean to edit it, so then calling again
myTable.draw();
on my table I obtain a refresh realtime without sending another get to the server.
The question is, can I access DT data array, and can I edit it?
How is it done if is possible?
EDIT: I need to feed the table the full bean array as it initially took from the server, same format. So individual row/cell add/edit and client-side building functions are not suitable in my case, unless I manually cicle all objects.
SOLUTION
Use the code below:
// Retrieve data
var data = table.ajax.json();
// Modify data
$.each(data.data, function(){
this[0] = 'John Smith';
});
// Clear table
table.clear();
// Add updated data
table.rows.add(data.data);
// Redraw table
table.draw();
DEMO
See this jsFiddle for code and demonstration.

Refresh the DataTable plugin table in jquery

I used the Data Tables.
DataTables is a plug-in for the jQuery Javascript library.
I upload a set of files.that upload files are stored in a array.
I displayed that array value using in table format using the DataTables plugin. Then I delete some upload files. So now I have updated array. Now I want to refresh the Table and display the new array in the table format. Is there any option to refresh the table in the dataTable plugin or any other way is available or not.
Re-Initialization is the solution what you can have as alternate for your kind of functionality,i.e.,
For every update of your files and array clear() existing data, and destroy() dataTable and Initialize it with updated array dataset.
var table = $('#example').DataTable();
after updation of array
lets assume variable "updatedArray" is having updated values.then call
table.clear();
table.destroy();
now initialize
table = $('#example').DataTable({
"data": updatedArray,
"columns": columnArray
});

jqGrid - Submit Grid ID In POST Data

I have multiple grids on a single page so my PHP needs to know which jqGrid POST data came from. I thought I could easily use something such as:
jQuery('#grid1').jqGrid({
...
postData:
{
grid: function() { return $(this).attr('id'); }
},
...
});
POST certainly contains grid but the value is populated. For testing I put...
alert($(this).attr('id'));
...elsewhere in my code and it displayed the grid name. I'm not sure how/where to get the value into POST though.
Your help is appreciated, thank you.
I simply added a new field to the POST which contains the "type" of data being submitted so my API knows what it is being handed.

Using Jquery methods on Data Returned from Ajax, with out printing out the data

So I have a rather unique situation. I am using JQuery to gather some data based on two date ranges, what is returned as a response in the $data variable (I am using Ajax) I have set, is a html table.
Now I don't want the user to ever see this table, I want to use This jquery plugin to download the CSV file of that table. The question is, if the table sits inside of a $data and can be seen via the network tab in Chrom Dev Tools, under Response, is it possible to be manipulated with Jquery?
In our inhouse framework, we do the following to get Ajax Data:
// The following belongs to a JS class method.
data = {
startDate : $('.startDate').val(),
endDate : $('.endDate').val()
}
CT.postSynch('report/payRollReport/downloadPayRoleReport', {data : data}, function(data){
console.log(data);
});
We pass a data object to our Ajax wrapper, call a controller with an action (in this case downloadPayRoleReport translates to ajaxDownloadPayRoleReport()) which in turn returns an HTML table, which I can view via console.log(data)
I want to use the above linked plugin on data to then turn this html table into a csv and instant download.
Question is, can this be done?
You can create a jQuery object from the table. Then you can do anything to the jQuery object just like you could if it were actually on the DOM. You can always put the table on the DOM as well off screen, but I think any chance you have to not touch the DOM you should take it.
var myTable = $(data);
myTable.mySpecialTableMethodToExportToCSV();

Categories