var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "77733337", "ENTERED"]];
$("#grid").jqGrid({
datatype: "local",
height: 250,
width: '100%',
pager: '#pager0', //set your pager div id
search:true,
multiselect: true,
multiboxonly: true,
colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
colModel: [{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"},
{
name: 'thingy',
index: 'thingy',
sorttype: "date"},
{
name: 'blank',
index: 'blank',
width: 30},
{
name: 'number',
index: 'number',
sorttype: "float"},
{
name: 'status',
index: 'status',
sorttype: "float"}
],
caption: "Stack Overflow Example + Export to CSV",
// ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});
$("#grid").jqGrid('navGrid','#pager0',
{add:false,edit:false,del:false,search:true,refresh:true},
{},
{},
{},
{multipleSearch:true, multipleGroup:true, showQuery: true}
);
$("#grid").jqGrid('navGrid', '#pager0',
{ edit: false, add: false, del: false, search: false, pdf: true, },
{},
{},
{},
{});
$("#grid").jqGrid('navButtonAdd','#pager0',{
id:'ExportToExcel',
caption:'Export Selected Rows To CSV',
title:'Export Selected Rows To CSV',
onClickButton : function(e)
{
exportData(e, '#grid');
},
buttonicon: 'ui-icon ui-icon-document',
});
var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];
for (var i = 0; i < data.length; i++) {
mydata[i] = {};
for (var j = 0; j < data[i].length; j++) {
mydata[i][names[j]] = data[i][j];
}
}
for (var i = 0; i <= mydata.length; i++) {
$("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}
/*
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
*/
$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
function exportData(e, id){
var gridid = jQuery(id).getDataIDs(); // Get all the ids in array
var label = jQuery(id).getRowData(gridid[0]); // Get First row to get the labels
var selRowIds = jQuery(id).jqGrid ('getGridParam', 'selarrrow');
var obj = new Object();
obj.count = selRowIds.length;
if(obj.count) {
obj.items = new Array();
for(elem in selRowIds) {
obj.items.push(jQuery(id).getRowData( selRowIds[elem] ));
}
var json = JSON.stringify(obj);
JSONToCSVConvertor(json, "csv", 1);
}
}
function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
//If JSONData is not an object then JSON.parse will parse the JSON string in an Object
var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
var CSV = '';
//This condition will generate the Label/Header
if (ShowLabel) {
var row = "";
//This loop will extract the label from 1st index of on array
for (var index in arrData.items[0]) {
//Now convert each value to string and comma-seprated
row += index + ',';
}
row = row.slice(0, -1);
//append Label row with line break
CSV += row + '\r\n';
}
//1st loop is to extract each row
for (var i = 0; i < arrData.items.length; i++) {
var row = "";
//2nd loop will extract each column and convert it in string comma-seprated
for (var index in arrData.items[i]) {
row += '"' + arrData.items[i][index].replace(/(<([^>]+)>)/ig, '') + '",';
}
row.slice(0, row.length - 1);
//add a line break after each row
CSV += row + '\r\n';
}
if (CSV == '') {
alert("Invalid data");
return;
}
/*
*
* FORCE DOWNLOAD
*
*/
//this trick will generate a temp "a" tag
var link = document.createElement("a");
link.id="lnkDwnldLnk";
//this part will append the anchor tag and remove it after automatic click
document.body.appendChild(link);
var csv = CSV;
blob = new Blob([csv], { type: 'text/csv' });
var myURL = window.URL || window.webkitURL;
var csvUrl = myURL.createObjectURL(blob);
var filename = 'UserExport.csv';
jQuery("#lnkDwnldLnk")
.attr({
'download': filename,
'href': csvUrl
});
jQuery('#lnkDwnldLnk')[0].click();
document.body.removeChild(link);
}
<table id="grid"></table>
<div id="pager0"></div>
External resources loaded into this fiddle: