Html Grid

Invoke the exportdata method of the jqxGrid. Author: http://jqwidgets.com

HTML

<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="jqxWidget" style="font-size: 13px; font-family: Verdana; float: left;">
    <div id="jqxgrid"></div>
    <div style="margin-top: 20px;">
        <div style="float: left;">
            <input type="button" value="Export to Excel" id="excelExport" />
            <br />
            <br />
            <input type="button" value="Export to XML" id="xmlExport" />
        </div>
        <div style="margin-left: 10px; float: left;">
            <input type="button" value="Export to CSV" id="csvExport" />
            <br />
            <br />
            <input type="button" value="Export to TSV" id="tsvExport" />
        </div>
        <div style="margin-left: 10px; float: left;">
            <input type="button" value="Export to HTML" id="htmlExport" />
            <br />
            <br />
            <input type="button" value="Export to JSON" id="jsonExport" />
        </div>
    </div>
</div>

JavaScript

var data = generatedata(400);
var source = {
  localdata: data,
  datatype: "array",
  datafields: [{
    name: "firstname",
    type: "string"
  }, {
    name: "lastname",
    type: "string"
  }, {
    name: "productname",
    type: "string"
  }, {
    name: "available",
    type: "bool"
  }, {
    name: "quantity",
    type: "number"
  }, {
    name: "price",
    type: "number"
  }],
  pagenum: 2,
  pagesize: 100,
};
var dataAdapter = new $.jqx.dataAdapter(source);
// initialize jqxGrid
$("#jqxgrid").jqxGrid({
  width: 500,
  source: dataAdapter,
  theme: "energyblue",
  editable: true,
  selectionmode: "singlecell",
  pageable: true,
  pagesizeoptions: ["10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
  columns: [{
    text: "First Name",
    columntype: "textbox",
    datafield: "firstname",
    width: 90
  }, {
    text: "Last Name",
    datafield: "lastname",
    columntype: "textbox",
    width: 90
  }, {
    text: "Product",
    datafield: "productname",
    width: 170,

  }, {
    text: "In Stock",
    datafield: "available",
    columntype: "checkbox",
    width: 125,

  }, {
    text: "Quantity",
    datafield: "quantity",
    width: 85,
    cellsalign: "right",
    cellsformat: "n2",
    aggregates: ["min", "max"],

  }, {
    text: "Price",
    datafield: "price",
    cellsalign: "right",
    cellsformat: "c2",
    width: 100
  }]
});
$("#excelExport").jqxButton({
  theme: "energyblue"
});
$("#xmlExport").jqxButton({
  theme: "energyblue"
});
$("#csvExport").jqxButton({
  theme: "energyblue"
});
$("#tsvExport").jqxButton({
  theme: "energyblue"
});
$("#htmlExport").jqxButton({
  theme: "energyblue"
});
$("#jsonExport").jqxButton({
  theme: "energyblue"
});
$("#excelExport").click(function () {
  $("#jqxgrid").jqxGrid("exportdata", "xls", "jqxGrid");
});
$("#xmlExport").click(function () {
  $("#jqxgrid").jqxGrid("exportdata", "xml", "jqxGrid");
});
$("#csvExport").click(function () {
  $("#jqxgrid").jqxGrid("exportdata", "csv",...