I am trying to export data as excel from dynamic data tables, but in excel the numeric value of a column gets change.
The Original Value showing in table in web application is like 1031001746692014 But upon exporting to Excel it becomes
$(document).ready(function(){
$('#tracker_list').DataTable({
dom: 'ZBflrtip',
'processing': true,
'serverSide': true,
'pageLength': 25,
'serverMethod': 'post',
'lengthMenu': [[10,25,50,100, -1], [10,25,50, 100, "All"]],
'order': [ 0, 'desc' ],
'ajax': {
'url':'ajax/url_to_method'
},
'columns': [
{ data : 'id'},
{ data: 'account_number' },
],
'columnDefs': [{
'targets': [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19], /* column index */
'orderable': true, /* true or false */
'order': [ 1, 'desc' ]
}],
//'buttons': [ 'copy', 'csv', 'excel', 'pdf', 'print' ]
});
Trying to find problem, either in datatables export mechanism or in excel ?
Found the reason.
The problem is in Excel itself. Excel cells have a limit to a specific range.
Therefore added one Apostrophe at the start of the number so it reflects in the results but in excel we can manage it by replacing it to the correct number easily.
Related
I'm using http://datatables.net/extensions/tabletools/ in my local-host ( wamp server ). It's working fine, but when I put the same code on my online server, it isn't working.
I am using all latest version of datatables
tableTools: {
"sSwfPath": "https://datatables.net/release-datatables/extensions/TableTools/swf/copy_csv_xls_pdf.swf",
"sRowSelect": "os",
"sRowSelector": 'td:first-child',
// "aButtons": [ "copy", "csv", "xls","pdf","print","select_all", "select_none" ]
"aButtons": [
"copy",
"print", {
"sExtends": "collection",
"sButtonText": "Save", // button name
// "aButtons": [ "csv", "xls", "pdf" ]
"aButtons": [
"csv",
"xls", {
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "List of product."
},
"print"
]
}
]
}
Firstly there was no click on copy, pdf, csv, xls button. Hence I taught my path or swf is not working hence I replaced the link with online link. Hence now I get click, but when I click Copy button it gives me a message ... but when I past in my notepad it's giving me "blank ". Also my pdf, csv, xlsx is not working. Only Print is working perfect. Please let me know what is the issue as in my localhost all is working fine. Its creating issues in my online server.
I am pretty sure that datatables.net actively is blocking for use of the .swf. Allan Jardine has commented the direct use of the .swf files several times :
datatables.net is not a CDN server and should not be used as such. It
is not designed to be, and I might add throttling for hotlinking in
future as a huge amount of bandwidth is being used and causing
unnecessary load. You'll get much better performance from using a
proper CDN or even a locally hosted file.
However, with the introduction of 1.10.x there is finally established a real CDN server, including all the TableTools resources -> http://cdn.datatables.net/tabletools/2.2.2/
So replace the sSwfPath with :
http://cdn.datatables.net/tabletools/2.2.2/swf/copy_csv_xls_pdf.swf
I meant you should post it as a completely new question, since it in fact is a new question! :) Anyway. The problem is, that you'll need to render the data, when you produce a PDF. Otherwise you will just get some $(element).text() output, including the select and its options. Like this :
"aButtons": [
"copy",
"csv",
"xls",
{ "sExtends": "pdf",
"fnCellRender": function ( sValue, iColumn, nTr, iDataIndex ) {
//extract the value of the select
if ( iColumn === 7 ) {
var val=$(sValue).find('select').val();
return (val!=='') ? val : 'not set';
}
//create a dummy text for the HTML-link
if ( iColumn === 8 ) {
return 'click';
}
return sValue;
}
},
"print",
"select_all",
"select_none"
]
see your code here (as close I can get) -> http://jsfiddle.net/3F8ZJ/.
However, you still have a problem caused by your mRender rendering, so the column positions is messing up. It breaks the internal <table>-structure. Why are you inserting extra <td>..</td>? But have not time to look into this at the moment.
As i want to show proper code format hence post as new answer
# DAVIDKONRAD : i got to know when i remove columnDefs from below code then my PDF shows proper records ... btw my csv , excel , print diplay proper record with columnDefs .. only pdf is not showing proper record with "columnDefs"
and i got to know the word which is seen " select " is because of that only ..as i have use dropdown in columndefs
dt = $('#example').DataTable( {
"dom": '<"clear">T<"clear"><"clear">lfrtip',
"pagingType": "full_numbers",
"scrollY": "440px",
"scrollX": "100%",
"scrollCollapse": true,
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "includes/db/server_processing.php",
"deferRender": true,
"aaSorting":[[0, "desc"]],
"aoColumns": [
{ className: "center", },
{ className: "center", },
{ className: "center", },
{ className: "center", },
{ className: "center", },
{ className: "center", },
{ className: "center", },
],
"columnDefs": [
{
"aTargets":[7],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) {
return '<td><select id="dynamic_select_'+full[0]+'" name="dynamic_select_'+full[0]+'">\n\
<option id="0" value="">Select</option/>\n\
<option id="1_'+full[0]+'" value="test.php?id='+full[0]+'">10</option/>\n\
<option id="2_'+full[0]+'" value="test2.php?id='+full[0]+'">12</option/>\n\
<option id="3_'+full[0]+'" value="test3.php?id='+full[0]+'">13</option/>\n\
</select></td>';
//return '<button>Click!</button>';
}
},
{
"aTargets":[8],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function(data, type, full){
//return '<button>Click!</button>';
return '<div id="container">Click</div>';
}
}
]
} );
I am using Datatables to print HTML tables,here i am stuck with something like:
table is dynamically created (printed with while loop) due to which I don't know how many columns will it have. After that I applied datatables on
$('#table').dataTable( {
"bDestroy":true,
"sScrollY": temp_fh,
"bPaginate": false,
"bScrollCollapse": true,
"bProcessing": true,
"bFilter":true,
"bSort":true,
});
So now how do I apply sorting for only 2nd column?
Since I referred bSortable from Datatables which allows us to disable sorting for particular column but in this case we don't known how much columns will table have.
Thanks.
how about this?
$('#table').dataTable( {
"bDestroy":true,
"sScrollY": temp_fh,
"bPaginate": false,
"bScrollCollapse": true,
"bProcessing": true,
"bFilter":true,
"bSort":true,
aoColumnDefs: [
{ aTargets: [ '_all' ], bSortable: false },
{ aTargets: [ 0 ], bSortable: true },
{ aTargets: [ 1 ], bSortable: true }
]
Update
ok, overriding _all seems not possible. maybe you can disable sorting on columns by css like this in your while-loop:
<th class="no-sort">
and use this initialization code:
// Disable sorting on the no-sort class
"aoColumnDefs" : [ {
"bSortable" : false,
"aTargets" : [ "no-sort" ]
} ]
see: disable a column sorting using jquery datatables
hello can any one tell me the json format for local data containing the subgrid values.
i used following format but subgrid data is not loading into the subgrid table.
var data=[{"Left_ssr_id":CaGM33098,"Mismatches":"6","Gaps":"1","AlignLen":"1119","Identity":"99.37","right_ssr_start":17308507,"Qstart":"33","query":"AB-Contig743","subject":"Ca7","Send":"17305359","Score":"2113","Evalue":"0.0","Left_ssr_end":17293825,"right_ssr_end":17308542,"right_ssr_id":CaGM33099 ,"Sstart":"17304241","Qend":"1150","Left_ssr_start":17293811,subgrid:[{"Right_ssr_start":17308507,"Right_ssr_end":17308542},{"Right_ssr_start":17308506,"Right_ssr_end":17308543}]}]
code used to upload the data . The Grid is getting the data but subgrid showing only the header and the blank rows.
$(document).ready(function(){
$("#blastform").submit(function(){
jQuery.ajax({
data: $(this).serialize(),
url: this.action,
type: this.method,
dataType: "json",
error: function() {
$(thistarget).html("<span class='error'>Failed to submit form!</span>");
},
success: function(res) {
var data=res;
$("#datatable").jqGrid({
datatype:"local",
data:data,
colNames:['QueryID','SubjectID', . . . 'Right_nearest_distance'],
colModel:[ {name:'query',index:'query', width:55},
{name:'subject',index:'subject', width:80},
.,
.,
{name:'right_near_dist',index:'right_near_dist', width:50, sortable:false}, ],
rowNum:100,
rowList:[100,200,500],
pager: $('#pager2'),
sortname: 'QueryID',
viewrecords: true,
sortorder: 'desc',
loadonce: true,
altRows: true,
pgbuttons: true,
subGrid : true,
subGridUrl: 'local',
subGridRowExpanded: function(subgrid_id, row_id)
{
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id+"_t";
pager_id = "p_"+subgrid_table_id;
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table><div id='"+pager_id+"' class='scroll'></div>");
jQuery("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames: ['ssr_start','ssr_end'],
colModel: [ {name:"Right_ssr_start",index:"Right_ssr_start",width:80,key:true},
{name:"Right_ssr_end",index:"Right_ssr_end",width:130},
],
rowNum:20,
pager: pager_id,
sortname: 'ssr_start',
sortorder: "asc",
height: '100%' });
jQuery("#"+subgrid_table_id).jqGrid('navGrid',"#"+pager_id,{edit:false,add:false,del:false}) },
caption: 'Blast Results'
});
$("#datatable").jqGrid('navGrid','#pager2', {position: 'right'});
jQuery("#datatable").jqGrid('navGrid','#blastresults',{edit:false,add:false,del:false});
}
})
return false;
}
);
);
You need to configure the localReader settings
see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#array_data
I don't recommend you to make separate ajax call and to use datatype: "local", data: data. You will have many disadvantages. jqGrid provide datatype: "json" type for the case. One can use additional options like jsonReader and jsonmap to inform jqGrid how to get information about grid data from the server response.
The value for var data which you posted provide wrong data. You use variables CaGM33098 and CaGM33099 which are undefined. If you used cut&pased from the server response, then you generate wrong JSON response on the server. Moreover it's strange that subgrid if the item from data array isn't enclosed in ". Probably the server returns from this.action (??? what is this here???) the following data
[
{
"Left_ssr_id": "CaGM33098",
"Mismatches": "6",
"Gaps": "1",
"AlignLen": "1119",
"Identity": "99.37",
"right_ssr_start": 17308507,
"Qstart": "33",
"query": "AB-Contig743",
"subject": "Ca7",
"Send": "17305359",
"Score": "2113",
"Evalue": "0.0",
"Left_ssr_end": 17293825,
"right_ssr_end": 17308542,
"right_ssr_id": "CaGM33099",
"Sstart": "17304241",
"Qend": "1150",
"Left_ssr_start": 17293811,
"subgrid": [
{
"Right_ssr_start": 17308507,
"Right_ssr_end": 17308542
},
{
"Right_ssr_start": 17308506,
"Right_ssr_end": 17308543
}
]
}
]
The old answer and the answer shows how one can implement displaying nested data as subgrid. Another answer shows how to use userdata to load nested data directly from the server. I recommend you to use the last approach.
I've been trying to implement a simple subgrid within jqgrid to show line items for an invoice. I finally got the subgrids to populate but each subgrid is showing the same list of line items, which is actually all of the entries in the data set.
I'm not quite sure how to debug this but here are some of my potential ideas-
Is it a problem with the way the json store is (not) responding to the GET queries?
Is it because nowhere I define what field within the subgrid data is the "foriegn key" so to speak.
Do I need the subGridUrl to point to json data with only the appropriate data (not every line item)
Example JSON for line items:
order_id points to the id of the order
{
"total": 1,
"records": 6,
"rows": [
{
"description": "PART X",
"order_id": 2,
"qty": 5,
... more fields ...
"id": 1
},
... more ...
],
page: 1
}
JSON for main grid items:
{
"total": 1,
"records": 2,
"rows": [
{
"order_no": 2,
... more fields ...
"id": 2
},
... more ...
],
page:1
}
Applicable parts of my jqqrid script:
jQuery("#mygrid").jqGrid({
... cosmetic stuff for main grid ...
url: "/my_json_url/",
datatype: "json",
colNames:['Order',...],
colModel:[
{name:'order_no', index:'order_no'},
...
],
jsonReader: {
repeatitems:false,
root: "rows",
page: "page",
total: "total",
records: "records",
cell: "",
id: "id",
subgrid: {root: "rows", cell:"", repeatitems: false}
},
prmNames: {subgridid: "order_id"},
subGrid: true,
subGridUrl: "/json_url/to_line_items/",
subGridModel: [{ name : ['qty','description'],
width: [100,100] }]
})navGrid(some options);
I suppose that the code under the URL "/json_url/to_line_items/" don't use id parameter sent by jqGrid. If the user expand the subgrid the rowid of the row will be used as additional parameter of subGridUrl. By the way I don't understand why you use id values of the grid other as the order_id. Currently the id=1 parameter will be appended to the subGridUrl in case of expanding the row with order_id=10. Is it what you want?
I am using jqGrid 3.6.4 and a jquery 1.4.2 . in my sample i am getting following json data format & i want to map these json data into rows of a jqgrid
{
"page": "1",
"total": 1,
"records": "6",
"rows": [
{
"head": {
"student_name": "Mr S. Jack ",
"year": 2007
},
"sub": [
{
"course_description": "Math ",
"date": "22-04-2010",
"number": 1,
"time_of_add": "2:00",
"day": "today"
}
]
}
]
}
my jqgrid code is as follows
jQuery("#"+subgrid_table_id).jqGrid({
url:"http://localhost/stud/beta/web/GetStud.php?sid="+sid,
dtatype: "json",
colNames: ['Stud Name','Year','Date'.'Number'],
colModel: [ {name:'Stud Name',index:'student_name', width:100, jsonmap:"student_name"},
{name:'Year',index:'year', width:100, jsonmap:"year"},
{name:'Date',index:'date', width:100, jsonmap:"date"},
{name:'Number',index:'number', width:100, jsonmap:"number"}
],
height:'100%',
jsonReader: { repeatitems : false, root:"head" },
});
So now the problem is as my data i.e. student_name and year is under "head" , the jqgrid is enable to locate these two fields. at the same time other two column values i.e. Date and Number lies under "sub" and even those columns i am not be able to map it with jqgrid
so kindly help me how to located these attributes in JQGrid.
Thanks
First of all the code posted has some errors like dtatype: "json" instead of datatype: "json". "},});" instead of "}});" at the end of code and colNames: ['Stud Name','Year','Date'.'Number'] instead of colNames: ['Stud Name','Year','Date','Number']. After fixing this clear bugs you need change jsonmap values. This was your main question. The fixed code will be look like following:
jQuery("#"+subgrid_table_id).jqGrid({
...
datatype: 'json',
colNames: ['Stud Name','Year','Date'.'Number'],
colModel: [
{name:'student_name', width:100, jsonmap:"head.student_name"},
{name:'year', width:100, jsonmap:"head.year"},
{name:'date', width:100, jsonmap:"sub.0.date"},
{name:'number', width:100, jsonmap:"sub.0.number"}
],
jsonReader: { repeatitems:false, root:"rows" }
});
You have to fix root to "rows" and use jsonmap in JSON dot notation (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_dot_notation). I use a little strange notation like "sub.0.number" because sub.0.number in JavaScript is the same as sub[0].number. It works now.
I recommend you think one more about the structure of JSON data which you receive. (see my previous comments to you question): Is "sub" element is really an array with always one element or you want to use subgrids? Probably the data should be changed from sub:[{"":"", ...}] to sub:{"":"", ...}? What do you want to use as a rowid? student_name? Then add id: "head.student_name" to the jsonReader definition or add key: true property to the definition of the column student_name. Or you forget to include it in the JSON data?
And the last suggestion. If you open http://trirand.com/blog/jqgrid/jqgrid.html and opens on the left side of tree the branch "Data Mapping" \ "Data optimization" you will see an example where on use only array instead of named elements in JSON. Such data will be have minimum size and can be transferred more quickly from server to client. You data instead have some fields (like "course_description") which you don't use at all. So if you can make any changes in the server code try to optimize the data transfer rate.