JqxTable

by nija das

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.pager.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.filter.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxdropdownlist.js"></script>
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.sort.js "></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxgrid.edit.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.arctic.css">
<script src="http://www.jqwidgets.com/public/jqwidgets/jqxinput.js"></script>
  <h3 style="font-size: 16px; font-family: Verdana;">Data Source: "http://services.odata.org"</h3>
    <div id="jqxgrid"></div>
    <button id="asdf" >Click here</button>
   
  <div...

JavaScript

var source =
            {
                dataType: "json",
               dataFields: [
                    { name: 'ShipCountry', type: 'string' },
                    { name: 'ShipCity', type: 'string' },
                    { name: 'ShipAddress', type: 'string' },
                    { name: 'ShipName', type: 'string' },
                    { name: 'Freight', type: 'number' },
                    { name: 'ShippedDate', type: 'date' }
                ],
                 /* dataFields: [
                    { name: 'ShipCountry'},
                    { name: 'ShipCity'},
                    { name: 'ShipAddress'},
                    { name: 'ShipName' },
                    { name: 'Freight'},
                    { name: 'ShippedDate'}
                ],*/
                root: 'value',
                url: "http://services.odata.org/V3/Northwind/Northwind.svc/Orders?$format=json&$callback=?",
                pager: function (pagenum, pagesize, oldpagenum) {
                    // callback called when a page or page size is changed.
                }
            };
          //  console.log("source-->"+JSON.stringify(source))
            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                
                    formatData: function (data) {
                         // console.log("data->"+JSON.stringify(data))
                        data.$skip = data.pagenum * data.pagesize;
                        data.$top = data.pagesize;
                        data.$inlinecount = "allpages";
                        return data;
                    },
                    downloadComplete: function (data, status, xhr) {
                        if (!source.totalRecords) {
                            source.totalRecords = parseInt(data["odata.count"]);
                           // console.log("2scource->"+JSON.stringify(source))
                        }
                    },
                    loadError: function (xhr, status, error) {
      ...