Export DataTables return [object Object] value - datatable

I want to export my datatable as CSV file. Unfortunately the Order History returns [object Object] value in CSV File. I have tried by looking this forum https://datatables.net/forums/discussion/50304/datatable-is-showing-object-object-in-columns#Comment_133450 but I'm not sure how should apply on my code.
Below the csv file, that give output [object Object] for Order History.
As for the datatables, it return the value that I wanted.
Here's my code: LIVE JS BIN DEMO
The Server_Processing.php JSON
{
"draw": 1,
"recordsTotal": 238633,
"recordsFiltered": 183514,
"data": [
[
"6789",
"North City"
],
[
"5325",
"South City"
]
]
}
Output console.log(result) for fetch_total.php ajax call
{"data":[[6]]}
{"data":[[1]]}
Basically I've pass the ID_No value to ajax call, and it will return the readable value to the cell.
I've tried by using JSON.stringify to the additionalData, it still return [object Object] value when I export as CSV file.
Any help would be greatly appreciated

Solution
The simplest way to fix this is to add an exportOptions section to your DataTable buttons option.
So, instead of this:
buttons: [ 'csv' ],
you can use this:
buttons: [
{
extend: 'csv',
exportOptions: {
format: {
body: function ( inner, rowidx, colidx, node ) {
return node.innerText;
}
}
}
}
],
And you can repeat the { extend: ... } section for additional buttons (e.g. Excel).
This logic ensures you take the value loaded into the DOM node (the HTML table cell) instead of the value stored in the DataTable (an object).
Explanation
In your logic, you are using this:
"createdCell": function(cell, cellData, rowData, rowIndex, colIndex) { ... }
This is documented here.
The key point is:
cell: The TD node that has been created.
In other words, this <td> element is what you see displayed in the web page - the HTML. It is not what is stored in the underlying DataTable (which is the createdCell function used to create the contents of that <td> element).
So, when you try to export your data, DataTables will use the data it has stored in its internal data structures. It does not use the data you added to the HTML table.
My exportOptions function solves that by telling DataTables to look at the data in the HTML table directly (node.innerText) instead of using its internal data.
This is a very basic solution. It looks in every <td> cell in the HTML table, not just the third column. In your case, this is probably fine. But you may need to refine this, if there are other cases where you do not want to use the cell contents.
Also, I agree with the comments made in the question by #mark_b:
You're making a separate Ajax call for each row of your data in order to populate the Order History column? Surely there is a more efficient way to get all the data you need in a single request?

Related

JQGrid local search multiple columns

I'm using JQGrid with local search (inside the columns header).
I have 2 columns that I want to merge the search for them -
so, when I write a value inside the search input this value will be searched in 2 columns at the same time.
Is it possible to implement this? and if so, HOW ??
Thank's In Advance.
If I understand your question correctly you use filterToolbar for searching in a grid which has datatype: "local". In the case jqGrid fills postData.filters parameter in the form described here, which corresponds searching via dialog with multipleSearch: true.
You can implement your requirements inside of beforeSearch callback of filterToolbar method. Inside of the callback you can use
var postData = $(this).jqGrid("getGridParam", "postData");
to get the reference on postData object. Then you can use JSON.parse(postData.filters) to convert filter created by filterToolbar to object. It will be object like
{
"groupOp": "AND",
"rules": [{
"field": "someColumnName",
"op": "cn",
"data": "data entered by user"
}]
}
You can modify the object by adding one more item in "rules" and setting postData.filters to new value JSON.stringify(modifiedFiltersObject). Finally beforeSearch callback should return false to continue filtering. In the way, you will be able implement your requirements.
If you use Guriddo jqGrid, you can use filterInput method. This method allow to search on all fields in grid data using single input value. Here is description of the method
Here is a demo

Angulajs dynamic form data with dynamic layout

I have a form which is built as a directive. I am providing the data for layout in my controller.
MyController.js
[{
"type":"selectbox",
"name":"name_one",
"label":"Name One"
}]
This data is then passed to my form_directive which then loads the template.
Then I am getting the actual data to be populated from an ajax call, inside MyController.js
eg:
$http.get('url/location').success(function(data) {
}).error(function(data) {
});
The data that is coming from the ajax will be like this:
[{
"id":"090986735",
"name":"option_1"
},{
"id":"78645679",
"name":"option_2"
}]
Now my question is how to bind this data to the selectbox?
Please note that there will be many such controls. But I have shown only one select box
Try to change the model of select.
https://docs.angularjs.org/api/ng/directive/select - the example with colors should be useful for you.

Setting data attribute on each row of a jqgrid table

I am using jqGrid and I'm trying to add a data- attribute to each tr. I'm firing the loadComplete event, but I'm unsure of how to modify each row. Any code samples?
You can use rowattr to assign any additional attribute to <tr> elements (see the answer and this one for code examples). For example you can use
rowattr: function (rd) {
return {"data-mydata": JSON.stringify(rd)};
}
to save full input row data as data-mydata attribute. I recommend you to use rowattr``in combination withgridview: true` option to have the best performance results ()
The demo uses above rowattr cade and you can see that rows of grid have additional data-mydata attribute:
In my cases, I set the first column of grid by an identity. And in all my cases, id of each data row of my grids is the value of that identity column.
jqGrid column:
colModel: [
{
name:'ID',
label:'...',
width:1,
index:'ID'
...
Rendered :
<tr role="row" id="10777" ... > // in retrieved data: ID = 10777
So, if you have similar declarations like me, this could be a useful selector for you and you can simply add your data- attrib to these rows like this:
$('#trId').prop('data-whatever', 'value');
And if you want the above line to be performed automatically to all rows, you should change it slightly and put it into the gridComplete event of your grid:
gridComplete: function() { $("tr[role='row']").prop('data-whatever', 'value'); }

jqGrid 4.2 Custom search with non-grid fields

I'm using jqGrid 4.2 with the filterToolbar, which works great. I'd like to add some type of custom search to query (server-side) fields that are not part of the colModel.
Prior to 4.0 I would have used filterGrid along the lines of this:
$('#keyword').jqGrid('filterGrid', '#ticket-grid',
{
gridModel: false,
filterModel: [
{ label: 'Keyword', name: 'keyword', stype: 'text'},
{ label: 'Inclued Closed?',name : 'includeClosed', stype: 'checkbox'}
]
});
I understand that this is no longer supported, and an stype: 'checkbox' doesn't work anyway.
How do I do this with the new search module/mechanism?
If I understand you correct you have already on the page, for example above the grid, some controls (text input, selects, chechboxes) which allow the user to define additional criteria of the results which the user want see in the grid. In the case you can use postData with methods (functions) in the way described in the old answer.
If any kind of grid refreshing: request to filter the data from the searching toolbar, changing of the page or the page size, changing of sorting and so on will always follow to the Ajax request to the server. In the case the properties from postData option of jqGrid will be added like other standard parameters (sidx, sord, page, ...). If one from the properties of the postData is defined as function (if a method of postData) then the function will be called to construct the parameter which will be sent to the server. So the current information from you custom searching controls (text input, selects, chechboxes) will be send to the server. In the way you need only use the parameters on the backend to filter the results.
So you have to define fields yourself. For example the text input with id="keyword-input" and checkbos with id="includeClosed" and then use postData in about the following form:
$('#keyword').jqGrid(
// ... other jqGrid options
postData: {
keyword: function () { return $('#keyword-input').val(); },
includeClosed: function () { return $('#includeClosed')is(':checked'); },
}
});

How do i automatically append column names to post data sent to php when grid loads or refreshes?

I'm new to jqGrid and jquery and i'm learning as fast as i can but i still am a little lost about how to some things like how to append addition information to the post data in jqgrid that gets sent to php.
It would be nice for the php script to know what columns the grid wants when it initially loads or you press the jqgrid refresh/reload button.
I know i can use the postData option: postData:{name:val,,,}, but i was hoping to just automatically pull the column names from the colModel definitions using this function...
postData: function(){
colmodel = $('#tab4-grid').jqGrid('getGridParam','colModel');
colarray = '{';
for (var i in colmodel) {colarray += '"'+colmodel[i].name+'":"'+colmodel[i].name+'",';}
colarray += '}';
return colarray;
},
so i would not have to spell them out manually again. However, while the function produces the correct code, it's not getting posted. I can't seem to figure out the problem. Can someone help please?
thanks.
The first thing which you have to do is to rewrite
postData: function() { ... }
to
postData: {
myColumnsName: function() { ... }
}
jqGrid already send some standard parameters to the server (page, rows ,...). With the code above you will add and additional parameter with the name myColumnsName which you can fill in any way inside of the function body.
You current implementation is very dirty. You don't define local variables colmodel and colarray. Moreover you try to serialize array of strings as object ('{}') and not as array ('[]'). You should not use for (var i in colmodel) construction if you enumerate array items for (var i=0; i<colmodel.length; i++) is better. Additionally 'colModel' contain some column names ('rn', 'cb', 'subgrid') which you should skip in the enumeration. You can define as var colNames = []; and use colNames.push to fill it. Then you can use standard JSON.stringify method from json2.js to convert array to the JSON string.

Resources